<div class="nav">
<div class="nav_left"></div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li><a href="#">首页</a></li>
<li><a href="list.html">关于慕课</a></li>
<li><a href="list.html">新闻动态</a></li>
<li><a href="list.html">课程中心</a></li>
<li><a href="list.html">在线课程</a></li>
<li><a href="list.html">人才招聘</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text" class="search_text"/>
</form>
</div>
</div><!--nav_mid结束-->
<div class="nav_right"></div>
</div><!--nav结束-->
</div><!--wrop结束-->
</body>
</html>
css代码
.nav{
height:40px;
}
.nav_left{
width:10px;
background:url(../image/nav_left.jpg) no-repeat;
/*background-image:url(../image/nav_left.jpg);
background-repeat:no-repeat;*/}
.nav_mid{
width:980px;
background:url(../image/nav_bg.jpg) repeat-x;
}
.nav_right{
width:10px;
background:url(../image/nav_right.jpg) no-repeat;
float:left;}
.nav_left,.nav_mid,.nav_right{
float:left;
height:40px;}
.nav_mid_left,nav_mid_right{
float:left;}
.nav_mid_left{
width:680px;}
.nav_mid_right{
width:300px;}
.nav_mid_left li{
float:left;
list-style:none;
width:100px;
text-align:center;
line-height:40px;}
.nav_mid_left a:link,.nav_mid_left a:visited{
text-decoration:none;
color:#FFF;
font-size:16px;
font-family:Fixedsys, "Microsoft YaHei UI";}
.nav_mid_left a:hover,.nav_mid_left a:active{
text-decoration:none;
color:#FF0;
font-size:16px;
font-family:Fixedsys, "Microsoft YaHei UI";}
search_text{
width:190px;
height:25px;
margin-top:5px;
background:url(../image/search.jpg) no-repeat right center;
}
nav_mid_right 设置右浮动就可以了 float:right;