摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="short
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="shortcut ico"type="text/x-ico" href="images/footlogo.png">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--頭部-->
<div class='header'>
<div class="meun"></div>
</div>
<!--內(nèi)容部分-->
<div class="contents">
<div class="content">
<div class="contentMeun"></div>
<div class="contentPic">
<div class="content_l"></div>
<div class="content_r"></div>
</div>
<div class="clear"></div>
<div class="contentPic_ul">
<div class="contentPic_ul_1"></div>
<div class="contentPic_ul_0"style="background: url('images/midAD1.jpg');margin-right: 13px" ></div>
<div class="contentPic_ul_0"style="background: url('images/midAD2.jpg');margin-right: 13px"></div>
<div class="contentPic_ul_0"style="background: url('images/midAD3.jpg');"></div>
</div>
<!-- 小米閃購(gòu) -->
<div class="contentShop">
<h3>小米閃購(gòu)</h3>
<div class="contentShop_1"style="margin-right: 12.7px;border-top: 1px solid pink"></div>
<div class="contentShop_1"style="margin-right: 12.7px;border-top: 1px solid deeppink"></div>
<div class="contentShop_1"style="margin-right: 12.7px;border-top: 1px solid lightpink"></div>
<div class="contentShop_1"style="margin-right: 12.7px;border-top: 1px solid lightpink""></div>
<div class="contentShop_1"></div>
</div>
<div class="clear"></div>
<div class="contentImg" style="background: url('images/longAD1.jpg')"></div>
<div class="contentUl">手機(jī)</div>
<div class="contentPhone">
<div class="contentPhone_l"></div>
<div class="contentPhone_r">
<div style="margin-right: 12.7px;"></div>
<div style="margin-right: 12.7px;"></div>
<div style="margin-right: 12.7px;"></div>
<div></div>
<div style="margin-right: 12.7px;margin-top: 12px"></div>
<div style="margin-right: 12.7px;margin-top: 12px"></div>
<div style="margin-right: 12.7px;margin-top: 12px"></div>
<div style="margin-top: 12px"></div>
</div>
</div>
<div class="contentImg" style="background: url('images/longAD2.jpg')"></div>
<div class="contentUl">智能</div>
<div class="contentPhone">
<div class="contentPhone_0"style="margin-right: 12.7px; background: url(images/buy/家電AD1.jpg)"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;"></div>
<div class="contentPhone_1"style="margin-right: 12.7px"></div>
<div class="contentPhone_1"></div>
<div class="contentPhone_0"style="margin-right: 12.7px;margin-top: 12px;background: url(images/buy/家電AD2.jpg)"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_2" style="margin-top: 12px;float: left";>
<div class="content_1_t"></div>
<div class="content_1_d"></div>
</div>
</div>
<div class="contentImg" style="background: url('images/longAD3.jpg')"></div>
<div class="contentUl">家電</div>
<div class="contentPhone">
<div class="contentPhone_0"style="margin-right: 12.7px; background: url(images/buy/智能AD1.jpg)"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;"></div>
<div class="contentPhone_1"style="margin-right: 12.7px"></div>
<div class="contentPhone_1"></div>
<div class="contentPhone_0"style="margin-right: 12.7px;margin-top: 12px;background: url(images/buy/智能AD2.jpg)"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_2" style="margin-top: 12px;float: left";>
<div class="content_1_t"></div>
<div class="content_1_d"></div>
</div>
</div>
<div class="contentImg" style="background: url('images/longAD4.jpg')"></div>
</div>
</div>
<!--網(wǎng)頁底部-->
<div class="footers">
<div class="footer">
<div class="footer-top_li">
<div class="footer-top_li_1">
<a href="#"><i class="fa fa-wrench"></i>預(yù)約維修服務(wù)</a><span></span>
<a href="#"><i class="fa fa-rotate-right"></i>七天無理由退貨</a><span></span>
<a href="#"><i class="fa fa-refresh"></i>15天免費(fèi)換貨</a><span></span>
<a href="#"><i class="fa fa-gift"></i>滿150元包郵</a><span></span>
<a href="#"><i class="fa fa-wrench"></i>百余家售后網(wǎng)點(diǎn)</a>
</div>
<span class="separate"></span>
<!--第二部分-->
<div class="footer-top_li_2">
<div class="footer-top_li_a">
<dl>
<dt>幫助中心</dt>
<dd><a href="">賬戶管理</a></dd>
<dd><a href="">購(gòu)物指南</a></dd>
<dd><a href="">訂單操作</a></dd>
</dl>
<dl>
<dt>服務(wù)支持</dt>
<dd><a href="">賬戶管理</a></dd>
<dd><a href="">購(gòu)物指南</a></dd>
<dd><a href="">訂單操作</a></dd>
</dl>
<dl>
<dt>線下門店</dt>
<dd><a href="">賬戶管理</a></dd>
<dd><a href="">購(gòu)物指南</a></dd>
<dd><a href="">訂單操作</a></dd>
</dl>
<dl>
<dt>關(guān)于小米</dt>
<dd><a href="">賬戶管理</a></dd>
<dd><a href="">購(gòu)物指南</a></dd>
<dd><a href="">訂單操作</a></dd>
</dl>
<dl>
<dt>特色服務(wù)</dt>
<dd><a href="">賬戶管理</a></dd>
<dd><a href="">購(gòu)物指南</a></dd>
<dd><a href="">訂單操作</a></dd>
</dl>
<div class="connect">
<p class="telephone">520-131121</p>
<p class="time">周一至周五</p>
<button><span class="fa-facommenting"></span>聯(lián)系客服</button>
</div>
<!-- -->
</div>
<div class="footer-top_li_b"></div>
</div>
</div>
<div class="footer-bottom_li">
<div class="footer-bottom_li_1" style="margin-right: 5px">
<img src="images/footlogo.png">
</div>
<div class="footer-bottom_li_2">
<div class="footer-bottom_li_a">
<ul>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
</ul>
</div>
<div class="footer-bottom_li_b">
<a href="">備案：10004121111</a>
<a href="">備案：10004121211</a>
<a href="">備案：10004121211</a>
<a href="">備案：10004121211</a>
<br>
違法和不良信息舉報(bào)電話：185-0130-1238 知識(shí)產(chǎn)權(quán)侵權(quán)投訴 本網(wǎng)站所列數(shù)據(jù)，除特殊說明，所有數(shù)據(jù)均出自我司實(shí)驗(yàn)室測(cè)試
</div>
</div>
<div class="footer-bottom_li_3">
<img src="images/footericon1.png" alt="">
<img src="images/footericon2.png" alt="">
<img src="images/footericon3.png" alt="">
<img src="images/footericon4.png" alt="">
<img src="images/footericon5.png" alt="">
</div>
<div class="footer-bottom_li_4">
探索黑科技，小米為發(fā)燒而生！
</div>
</div>
</div>
</div>
</body>
</html>
</*CSS部分*>
*{margin: 0px;padding: 0px;}
.clear{clear: both}
li{list-style: none}
a{text-decoration: none;color:#cccccc;cursor: pointer}
/*網(wǎng)頁頭部*/
.header{width: 100%;height: 40px;background: #333333}
.meun{background: #ccc;width: 1226px;height: 40px;margin:0px auto}
/*主體部分*/
.content{width:1226px;margin:0px auto;}
/*主體包含的div*/
.contentMeun{background: #ccc;height: 90px;margin: 10px auto}
.contentPic{margin: 10px auto}
/*PIC下面的布局*/
.content_l{width: 246px;height:480px;background: #cccccc;float: left; }
.content_r{width: 980px; height: 480px;background: pink;float: left}
.contentPic_ul{height: 180px;margin: 10px auto}
/*PIC_UL下面的四個(gè)小圖片*/
.contentPic_ul_1{width: 235px;background: #5F5750;height: 170px;margin-right: 13px;float: left}
.contentPic_ul_0{width: 317px;height: 170px;float: left}
.contentShop{height: 340px;margin: 10px auto;}
/*小米閃購(gòu)*/
.contentShop_1{width: 235px;height:340px;background: #cccccc;float: left}
.contentImg{background: #ccc;height: 100px;margin: 10px auto}
.contentUl{background: #ccc;height: 80px;margin: 10px auto}
.contentPhone{height: 614px;margin: 10px auto}
.contentPhone_l{height: 614px;width: 234px;background: url(../images/buy/手機(jī)AD.jpg);float: left;margin-right: 12px}
.contentPhone_r{height: 614px;width: 980px;float: left}
.contentPhone_r div{height:300px;width:235px;background: #cccccc;float: left}
.contentPhone_0,.contentPhone_1{height:300px;width:235px;background: #cccccc;float: left}
.content_1_t,.content_1_d{height:145px;width:235px;background: #cccccc;}
.content_1_d{margin-top: 10px}
.footer{width:1226px;height:100px;margin:10px auto;}
.footer-top_li_1{width: 1126px;height:80px;line-height:80px;text-align:center}
.footer-top_li_1 a{font-size: 16px;color: #00CC66;font-weight:300;}
.footer-top_li_1 a:hover{color:#9A0000}
.footer-top_li_1 a i{font-size: 20px;margin-right: 10px;}
.footer-top_li_1 span{font-size: 20px;color:rebeccapurple;border-left:1px solid #e0e0e0;margin: 0px 20px;}
.separate{width: 1226px;border-bottom: 1px solid #cccccc ;display:block}
.footer-top_li_2{width:1226px;height:100px;margin: 40px 0px;text-align: center;}
.footer-top_li_a dl{float: left;display: block;width: 160px;}
.footer-top_li_a dt{font-size: 14px;line-height: 14px;color: #9A0000;margin-bottom: 22px}
.footer-top_li_a dd{font-size: 14px;line-height: 18px;color: #9A0000;margin-top:10px}
.footer-top_li_a dd a:hover{color: #9A0000}
.footer-top_li_a .connect{width: 258px;height: 112px;border-left:1px solid #cccccc;float: right;}
.footer-top_li_a .connect .telephone{color:#ff6700;margin: 0px 0px 5px;font-size: 22px;line-height: 22px;}
.footer-top_li_a .connect .time{color: #616161;margin: 0px 16px;font-size: 12px;}
.footer-top_li_a .connect button{width: 118px;height: 28px;font-size: 12px;line-height: 28px;border:1px solid #ff6700;background: #ff6700;}
/**/
.footer-bottom_li_1,.footer-bottom_li_2,.footer-bottom_li_3{float: left}
.footer-bottom_li_4{clear: left;text-align: center;font-family: "楷體";}
.footer-bottom_li_a{height: 12px;width: 640px;}
.footer-bottom_li_a li{float: left;height: 19px;font-size: 12px;color: #cccccc}
.footer-bottom_li_a li span{border-left: 1px solid #c2c2c2;height:5px;margin: 3px 3px}
.footer-bottom_li_b{font-size: 8px;width: 640px}
.footer-bottom_li_b a:hover{color: #9A0000}
/*底部圖片樣式*/
.footer-bottom_li_3 img{width: 83px;float: left;}
批改老師：天蓬老師批改時(shí)間：2019-05-28 17:02:07
老師總結(jié)：你的css代碼, 你不覺得看起來很累嗎? 下次記得一行只寫一個(gè)樣式