摘要：<!DOCTYPE html> <html> <head> <title>
<!DOCTYPE html>
<html>
<head>
<title>
小米商城
</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
<style type="text/css">
*{margin: 0px; padding: 0px;} li{list-style: none;} a{text-decoration:
none;cursor: pointer;}/*cursor是指定光标移上效果*/ .clear{ clear: both; } /*头部样式*/
.header{ width: 100%; height: 40px; background-color: #333333; margin:
10px 0px; } .memu{ width: 1226px; height: 40px; background-color: #ccc;
margin: 0px auto; } /*主题部分样式*/ .contents{ width: 100%; margin: 10px auto;
} .content{ width: 1226px; margin: 0px auto; } .content-memu{ width: 1226px;
height: 68px; background-color:#ccc; margin: 10px auto; } .content-pic{
width: 1226px; height: 460px; margin: 10px auto; } .content-pic-l{ width:
246px; height: 460px; background-color: red; float: left; } .content-pic-r{
width: 980px; height: 460px; background-color: green; float: left; } .content-ul{
width: 1226px; height: 170px; background-color: #ccc; margin: 10px auto;
} .content-ul-0{ width: 236px; height: 170px; background-color: #5F5750;
float: left; } .content-ul-1{ width: 316px; height: 170px; background-color:
red; float: left; margin-left: 14px; } .content-shop{ width: 1226px; height:
400px; margin: 10px auto; } .content-shop-0{ width: 236px; height: 340px;
background-color:#ccc; float: left; } .content-shop-1{ width: 236px; height:
340px; background-color:#ccc; float: left; margin-left: 11.5px; } .content-img{
width: 1226px; height: 120px; background-color: #ccc; margin: 10px auto;
} .content-phone{ width: 1226px; height: 85px; background-color: #ccc;
margin: 10px auto; } .content-phone-content{ width: 1226px; height: 580px;
background-color: #ccc; margin: 10px auto; } /*底部分样式*/ .footers{ width:
100%; height: 345px; margin: 10px auto; } .footer{ width: 1226px; height:
345px; background-color: #ccc; margin: 0px auto; }
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="memu">
导航
</div>
</div>
<!-- 主题部分 -->
<div class="contents">
<div class="content">
<div class="content-memu">
菜单
</div>
<div class="content-pic">
<div class="content-pic-l">
</div>
<div class="content-pic-r">
</div>
</div>
<div class="content-ul">
<div class="content-ul-0">
</div>
<div class="content-ul-1" style="background:url(images/midAD1.jpg);">
</div>
<div class="content-ul-1" style="background:url(images/midAD2.jpg);">
</div>
<div class="content-ul-1" style="background:url(images/midAD3.jpg);">
</div>
</div>
<div class="content-shop">
<h1>
小米闪购
</h1>
<div class="content-shop-0" style="border-top:1px solid #E53935;">
</div>
<div class="content-shop-1" style="border-top:1px solid #FFAC13;">
</div>
<div class="content-shop-1" style="border-top:1px solid #83C44E;">
</div>
<div class="content-shop-1" style="border-top:1px solid #2196F3;">
</div>
<div class="content-shop-1" style="border-top:1px solid #E53935;">
</div>
</div>
<div class="content-img" style="background:url(images/longAD1.jpg)">
</div>
<div class="content-phone">
手机
</div>
<div class="content-phone-content">
</div>
<div class="content-img" style="background:url(images/longAD2.jpg)">
</div>
<div class="content-phone">
家电
</div>
<div class="content-phone-content">
</div>
<div class="content-img" style="background:url(images/longAD3.jpg)">
</div>
<div class="content-phone">
智能
</div>
<div class="content-phone-content">
</div>
<div class="content-img" style="background:url(images/longAD4.jpg)">
</div>
</div>
</div>
<!-- 底部部分 -->
<div class="footers">
<div class="footer">
底部
</div>
</div>
</body>
</html>老师，那个我没有清除浮动为啥没又出现老师那种效果？是浏览器的缘故吗？我用的360浏览器。
