<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*标签样式区*/ *{ margin:0; padding:0; font-size:16px; font-family:"roman"; } a{ color:#fff; text-decoration:none; } ul{list-style: none;} /* 页面导航样式s*/ .nav{ width:100%; height:50px; background:#333; } .logo{ height:50px; width:auto; float:left; } .logo img{ height:50px; } .nav_ul{ height:50px; float:right; line-height:50px; } .nav_li{ height:50px; float:left; padding-right:10px; margin-left:10px; } /*页面内容样式区*/ .container{ height:1000px; } .left{ float: left; width:35%; height:1000px; background-color: blue; } .right{ float:right; width: 20%; height:1000px; background-color: green; } .clear{ clear: both; } /*页脚样式区*/ .footer{ background-color: #333; width: 100%; height:50px; } .footer_ul{ max-width: 600px; height:50px; line-height: 50px; margin:0 auto; } .footer_li{ float: left; height:50px; line-height: 50px; padding:0 15px; } </style></head><body> <!-- 页面导航 --> <div class="nav"> <div class="logo"> <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="" title=""/> </div> <ul class="nav_ul"> <li class="nav_li"><a href="#">课程实战</a></li> <li class="nav_li"><a href="#">职业路径</a></li> <li class="nav_li"><a href="#">实战</a></li> <li class="nav_li"><a href="#">猿问</a></li> <li class="nav_li"><a href="#">手记</a></li> </ul> </div> <!-- 页面内容区 --><div class="container"> <div class="left">left</div> <div class="mid">mid</div> <div class="right">right</div> <div class="clear"></div></div> <!-- 页脚区 --> <div class="footer"> <ul class="footer_ul"> <li class="footer_li"><a href="#">网站首页</a></li> <li class="footer_li"><a href="#">企业合作</a></li> <li class="footer_li"><a href="#">人才招聘</a></li> <li class="footer_li"><a href="#">联系我们</a></li> <li class="footer_li"><a href="#">常见问题</a></li> <li class="footer_li"><a href="#">友情链接</a></li> </ul> </div></body></html>
3 回答
Gotta
TA贡献53条经验 获得超16个赞
开发者工具调出来。 看看div.mid 发现啥了没？ 这个div没有浮动也没定宽 占了一整行 所以把.right往下挤了。
啥 为啥left不受影响？因为left在mid前面啊……
- 3 回答
- 0 关注
- 2362 浏览
添加回答
举报
0/150
提交
取消