外层一个DIV固定宽高,内层三个div 左浮动.(最后的元素清除过浮动).最后一步在中间的div里面加ul导航的时候发现
UL添加进div的时候不是默认的位置.可是正常情况下UL添加进div里面应该是默认居左的呀---------代码如下:html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>慕课网</title> <link rel="stylesheet" type="text/css" href="css/index.css"></head><body> <!-- 页面头部 --> <div> <ul> <li><a href="#">设为首页</a></li> <li><a href="#">加入收藏</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <!--页面外包装--> <div> <!-- logo --> <div class="head clears"> <!-- logo左边部分 --> <div> <img src="images/logo.jpg"> </div> <!-- logo右边部分 --> <div class="logo_right clears"> <span></span> <p> 24小时服务电话: <span>132-1212-1212</span> </p> </div> </div> <!-- 导航 --> <div class="nav clears"> <div></div> <div> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于慕课</a></li> <li><a href="#">新闻动态</a></li> <li><a href="#">课程中心</a></li> <li><a href="#">在线课程</a></li> <li><a href="#">人才招聘</a></li> </ul> </div> <div></div> </div> </div></body></html>-------------------------------css部分:html, body{ margin:0; height:100%;background-color: #f5f5f5}* { padding: 0; margin: 0; font-size: 12px;}.top a{ text-decoration:none; color: black;}.clears:after{content:'';display:block;clear:both; line-height:0px; overflow:hidden; font-size:0px; height:0px;}/** * 控制顶部 */.top{ height: 27px; width: 100%; background: url(../images/top_bg.jpg) repeat-x;}/** * 控制顶部的li */.top ul li{ list-style: none; list-style-image: url(../images/arrow.jpg); float: left; height: 27px; width: 70px; line-height:27px;/**字体垂直居中**/}/** * 控制顶部的ul */ul{ float: right; margin-right: 14%;}/** * 页面主体外包装 */.wrap{ width: 1000px; margin: 0 auto;}.head{ background-color:#FFFFFF;}/** * 控制logo左边图片 */.logo_left{ width: 200px; height: 80px; float: left;}.logo_right{ width: 300px;/*可修改*/ height: 28px; float: right; margin-top: 30px; }.logo_tel{ font-size: 20px; color: black; line-height: 28px; color: #CC0000;}.telimage{ width: 28px; height: 28px; display: block; background: url(../images/tel.jpg) no-repeat; background-position: 50% 50%; float: left;}.logo_right p{ float: left; line-height: 28px; height: 28px;}.nav{ height: 40px; width: 1000px;}.navl{ background: url(../images/nav_left.jpg) no-repeat; height: 40px; width: 10px; float: left;}.navr{ background: url(../images/nav_right.jpg) no-repeat; height: 40px; width: 10px; float: left;}.navc{ background: url(../images/nav_bg.jpg) repeat-x; width: 980px; height: 40px; float: left; vertical-align:left;}.navc li{ list-style: none; float: left;}.navc a{ color: #FFFFFF ligin}.navc a:hover {color: #FFFF00} /* 鼠标悬停 */.navc ul li{ /* width: 100px; */}
- 2 回答
- 0 关注
- 2140 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消