青霜
2015-10-28 16:17
<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结束 -->
CSS如下:
.nav{
height: 40px
}
.nav_left{
width:10px;
background: url(images/nav_left.jpg) no-repeat;
}
.nav_mid{
width: 980px;
background: url(images/nav_bg.jpg) repeat-x;
line-height: 40px;
}
.nav_right{
width: 10px;
background: url(images/nav_right.jpg) no-repeat;
}
.nav_left, .nav_mid, .nav_right{
height:40px;
float: left;
}/*各类有相同代码,可这样连写*/
.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: "微软雅黑"
}/*超链接的初始状态和访问状态*/
.nav_mid_left a:hover,.nav_mid_left a:active{
text-decoration: none;
color: #FF0;
font-size:16px;
font-family: "微软雅黑"
}/*鼠标经过时和点击时的状态*/
.search_text{
width: 190px;
height: 25px;
float: left;
margin-top: 5px;
background: url(images/search.jpg) no-repeat right center;
background-color: #FFF;
padding-right: 25px;/*字体不会与搜索图标重复*/
border:1px solid #FFF;
}
.nav{
height: 40px;
clear:both;
}
意思是,你要这三个div在一行需要他们是同级的关系
你这nav_left和nav_mid是兄弟,nav_mid是nav_right他老爸,这怎么在一行?
企业网站综合布局实战
157075 学习 · 2157 问题
相似问题