我做的这个页面出现好多BUG，看的好迷糊，不知道错在哪了
2019-03-13 04:20:03304*{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none;color:#fff;cursor:pointer;}
.clear{clear:both;}
.zhutise{background:#F5F5F5;width:100%;}
/* .l li{float:left;line-height:40px;color:#ccc;margin:0 5px;font-size:12px;}
.r li{float:right;line-height:40px;color:#ccc;margin:0 5px;font-size:12px;}
a:hover{color:#fff;}
.clear{clear:both;} */
/* 头部样式 */
.header{background:#333;height:40px;width:100%;}
.menu{width:1226px;height:40px;background:#ccc;margin:auto;}
/* 主体部分样式 */
.zt{width:1226px;margin:0px auto;}
.ztmenu{background:#ccc;height:90px;margin:10px auto;}
.ztpic{margin:10px auto;}
.ztpic-l{width:246px;height:460px;background:#ccc;float:left;}
.ztpic-r{width:980px;height:460px;background:pink;float:left;}
.ztpic_ul{height:180px;margin:10px auto;}
.ztpic_ul_1{width:235px;height:170px;float:left;background:#5f5750;margin-right:13px;}
.ztpic_ul_2{width:317px;height:170px;float:left;}
/* 小米闪购 */
.titletext{text-align:left;font-size:22px;font-weight:300px;margin-bottom:10px;color:#333;}
.ztshop{height:340px;margin:10px auto;}
.ztshop1{width:235px;height:340px;background:#ccc;float:left;}
.ztimg{background:#ccc;height:100px;margin:10px auto;box-shadow:2px 2px 12px #808080;}
.ztul{background:#ccc;height:80px;margin:10px auto;}
.ztphone{height:615px;margin:10px auto;}
.ztphone-l{background:url(../images/xiaomi9.jpg);height:615px;width:234px;float:left;margin-right:12px;box-shadow:2px 2px 10px #000;}
.ztphone-r{height:615px;width:980px;float:left;margin-top:-10px;}/*这里有个问题，如果我不用margin-top:-10px，div就不能往上对齐*/
.ztphone-r div{background:#ccc;height:300px;width:235px;float:left;}
.ztphone-0,.ztphone-1{background:pink;height:300px;width:235px;float:left;}
.sjdp{margin-right:12.7px;margin-top:12.7px;}
.marginr{margin-right:12.7px;}
.margint{margin-top:12.7px;}
/* 网页底部 */
.footer{background:#ccc;height:100px;width:1226px;margin:10px auto;}
----------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset=UTF-8>
<meta name=Generator content=baidu.com>
<meta name=Author content=作者>
<meta name=Keywords content=关键词>
<meta name=Description content=文档描述信息>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" >
<!-- <script type="text/javascript" src=""></script> -->
<title>小米商城 - 小米9、小米MIX 3、红米Note 7，小米电视官方网站</title>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="menu" >
</div>
</div>
<!-- 主体部分 -->
<div class="zts" >
<div class="zt" style="background:#fff;">
<div class="ztmenu"></div>
<div class="ztpic"></div>
<div class="ztpic-l"></div>
<div class="ztpic-r"></div>
<div class="clear"></div>
<div class="ztpic_ul">
<div class="ztpic_ul_1"></div>
<div class="ztpic_ul_2" style="background:url(images/xiaomi8.jpg) ;margin-right:13px;" ></div>
<div class="ztpic_ul_2" style="background:url(images/hongmi6.jpg) ;margin-right:13px;" ></div>
<div class="ztpic_ul_2" style="background:url(images/shouhuan3.jpg)"></div></div>
<!-- 小米闪购 -->
<div class="ztshop">
<p class="titletext" style="">小米闪购</p>
<div class="ztshop1" style="margin-right:12.7px;border-top:1px solid red;" ></div>
<div class="ztshop1" style="margin-right:12.7px;border-top:1px solid yellow;" ></div>
<div class="ztshop1" style="margin-right:12.7px;border-top:1px solid #66cc33;"></div>
<div class="ztshop1" style="margin-right:12.7px;border-top:1px solid #cc3300;"></div>
<div class="ztshop1" style="border-top:1px solid #3366ff;"></div>
</div>
<div class="clear"></div>
<div class="ztimg" style="background:url(images/banner1.jpg)"></div>
<div class="zhutise" >
<div class="ztul" >手机</div>
<div class="ztphone" >
<div class="ztphone-l"></div>
<div class="ztphone-r">
<div class="sjdp"></div>
<div class="sjdp"></div>
<div class="sjdp"></div>
<div style="margin-top:12.7px;"></div>
<div class="sjdp"></div>
<div class="sjdp"></div>
<div class="sjdp"></div>
<div style="margin-top:12.7px;"></div>
</div>
</div>
<div class="clear"></div>
<div class="ztimg" style="background:url(images/banner2.jpg)"></div>
<div class="ztul" >家电</div>
<div class="ztphone" >
<div class="ztphone-0 marginr"><a href=""><img src="images/dianfanbao.jpg" width="234" height="300" border="0" alt=""></a></div>
<div class="ztphone-1 marginr"><a href=""><img src="images/jd2.jpg" width="235" height="300" border="0" alt=""></a></div>
<div class="ztphone-1 marginr"><a href=""><img src="images/jd1.jpg" width="235" height="300" border="0" alt=""></a></div>
<div class="ztphone-1 marginr"></div>
<div class="ztphone-1 margint"style="margin-top:1px;"></div>
<div class="ztphone-0" style="margin:9px 0px;margin-right:12.7px;"><a href=""><img src="images/saodi.jpg" width="234" height="300" border="0" alt=""></a></div>
<div class="ztphone-1 marginr margint"></div>
<div class="ztphone-1 marginr margint"></div>
<div class="ztphone-1 marginr margint"></div>
<div class="ztphone-1 margint"></div>
</div>
<div class="clear"></div>
<div class="ztimg" style="background:url(images/banner3.jpg)"></div>
<div class="ztul" >智能</div>
<div class="ztphone" ></div>
<div class="ztimg" style="background:url(images/banner4.jpg)"></div>
<div class="ztul" >搭配</div>
<div class="ztphone" ></div>
<div class="ztimg" style="background:url(images/banner5.jpg)"></div>
<div class="ztul" >配件</div>
<div class="ztphone" ></div>
<div class="ztimg" style="background:url(images/banner6.jpg)"></div>
<div class="ztul" >周边</div>
<div class="ztphone" ></div>
<div class="ztul" >为你推荐</div>
<div class="ztphone" ></div>
<div class="ztul" >热评产品</div>
<div class="ztphone" ></div>
<div class="ztul" >内容</div>
<div class="ztphone" ></div>
<div class="ztul" >视频</div>
<div class="ztphone" ></div>
</div>
</div>
</div>
<!-- 底部 -->
<div id="" class="footers" >
<div class="footer" >
网页底部
</div>
</div>
</body>
</html>