摘要：<html> <head> <meta charset="utf-8"> <title>浮动练习</title> <style type="text/css"> *{padding:0px;margin:0px;} body{margin:20px 0px&
<html>
<head>
<meta charset="utf-8">
<title>浮动练习</title>
<style type="text/css">
*{padding:0px;margin:0px;}
body{margin:20px 0px 0px 350px;color:#fff;background:#ccc;}
.logo{width:200px;height:80px;background:red;display:inline-block;float:left;}
.topimg{width:800px;height:80px;background:blue;}
ul li{list-style:none;width:155px;height:30px;margin:2px 6px 2px 0px;background:green;line-height:30px;text-align:center;float:left;}
a{text-decoration:none;color:#fff;}
a:hover{font-weight: bold;color:red;}
.clear{clear:both;}
.leftc{width:180px;height:600px;background:pink;float:left;color:black;}
.rightc{width:800px;height:600px;background:#ffd39b;color:black;}
.footc{width:800px;height:23px;background:#ff4500;}
</style>
</head>
<body>
<div class="logo">这里是顶部logo</div>
<div class="topimg">这里是顶部img</div>
<div class="nav">
<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>
</ul>
</div>
<div class="clear"></div>
<div class="leftc">左侧内容</div>
<div class="rightc">右侧内容</div>
<div class="footc">底部内容</div>
</body>
</html>
<!-- 灭绝老师，有个问题：第一行：logo+img的宽度是200+800=1000，
导航的总宽度是：155*5+6*4=799，
左右内容的总宽度是：180+800=980，
底部内容的宽度是800，
宽度都不一样，为什么我在浏览器看起来那么和谐啊，应该差很多吧？
我是哪里出错了？ -->
批改老师：灭绝师太批改时间：2018-12-01 16:45:32
老师总结：有差别的，知识像素点太少看不出，你放大点就有了，布局差练！快点看小米商城布局
