<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="top">
<div class="search">
<div class="engine">
<input type="text" class="txt" />
<div class="search_logo">
<img src="img/search.png" alt="" />
</div>
</div>
<div class="radio_1">
<input type="radio" class="sex" value=""/>
<span>搜索本站</span>
</div>
<div class="radio_2">
<input type="radio" class="sex" value="" />
<span>搜索全站</span>
</div>
</div>
</div>
<div id="header">
<div id="header_content">
<div class="header_logo">
<img src="img/logo.png" alt="" />
</div>
<div class="header_menu fr">
<ul>
<li class="earth"><span >Language: ZH</span></li>
<li>学生</li>
<li>教师</li>
<li>校友</li>
<li>考生</li>
<li><img src="img/sea.png" alt="" /></li>
</ul>
</div>
</div>
</div>
<div id="nav"></div>
<div id="banner"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
CSS如下：
/*公共样式*/
body,html{padding: 0; margin: 0; font-family: "微软雅黑"; }
li{list-style: none;}
a{text-decoration: none;}
.fl{float: left;}
.fr{float: right;}
/*布局样式*/
/*头部*/
#top{width:100%; height: 0; overflow: hidden;}
#top .search{width: 800px; height: 150px; margin: 0 auto ; }
#top .txt{width:634px;height: 48px;}
#top .engine{width: 686px; height: 48px; position: relative; top:50px; left: 0;}
#top .search_logo{width: 50px; height: 54px; background: #0000FF; position: absolute;right:2px; top:0;}
#top .search_logo img{margin-left: 15px; margin-top: 15px;}
#top span{color: #c6c6c6;}
#top .radio_1, #top .radio_2{width: 90px; height: 13px; float: right;clear: both; margin-bottom:18px;}
#top .radio_2{}
/*header*/
#header{width: 100%; height: 140px; background: url(../img/top-site-bg.jpg);}
#header #header_content{width: 1190px; height: 140px; margin: 0 auto;position: relative;}
#header .header_logo{width: 400px; height: 76px; position: absolute; top:35px;}
#header .header_menu{ height: 140px; background: red;}
#header .header_menu ul{ width:564px;margin-top:62px;}
#header .header_menu li{float: left; margin-right: 40px;}
#header .earth{width:154px;height:18px; text-align:center; line-height:18px;background: url(../img/earth.png)no-repeat left; }
#header .earth span{display: block; background: url(../img/in_01.png)no-repeat right;}
杰杰就是我