abstract:<--頁(yè)面--><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小米商城</title> <link rel="shortcut icon" type="image/x-icon&q
<--頁(yè)面-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<!-- 頭部 -->
<div class="header">
<div class="menu"></div>
</div>
<!-- 主體部分 -->
<div class=content>
<div class="contentMenu"></div>
<div class="contentPic">
<div class="contentPic_l fl"></div>
<div class="contentPic_r fl"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="contentPic-ul">
<div class="contentPic-ul-1 fl" ></div>
<div class="contentPic-ul-2 fl" style="background:url(static/img/midAD1.jpg);margin-right:13px;"></div>
<div class="contentPic-ul-2 fl" style="background:url(static/img/midAD2.jpg);margin-right:13px;"></div>
<div class="contentPic-ul-2 fl" style="background:url(static/img/midAD3.jpg);"></div>
</div>
<div class="clear"></div>
<!-- 小米閃購(gòu) -->
<div class="contentShop">
<h2>小米閃購(gòu)</h2>
<div class="contentShop-1 fl" style="margin-right:12px;border-top:1px solid red;"></div>
<div class="contentShop-1 fl" style="margin-right:12px;border-top:1px solid blue;"></div>
<div class="contentShop-1 fl" style="margin-right:12px;border-top:1px solid orange;"></div>
<div class="contentShop-1 fl" style="margin-right:13px;border-top:1px solid green;"></div>
<div class="contentShop-1 fl" style="border-top:1px solid orange;"></div>
</div>
<div class="clear"></div>
<div class="contentImg" style="background:url(static/img/longAD1.jpg)"></div>
<div class="contentUl">手機(jī)</div>
<div class="contentPhone">
<div class="contentPhone-1 fl"></div>
<div class="contentPhone-2 fl">
<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:12.7px;"></div>
<div style="margin-right:12.7px;margin-top:12.7px;"></div>
<div style="margin-right:12.7px;margin-top:12.7px;"></div>
<div style="margin-top:12.7px;"></div>
</div>
</div>
<div class="clear"></div>
<div class="contentImg" style="background:url(static/img/longAD2.jpg)"></div>
<div class="contentUl">家電</div>
<div class="contentPhone">
<div class="contentPhone-a fl" style="margin-right:12.7px;background:url(static/img/buy/家電AD1.jpg)"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px"></div>
<div class="contentPhone-b fl"></div>
<div class="contentPhone-a fl" style="margin-right:12.7px;margin-top:12.7px;background:url(static/img/buy/家電AD2.jpg)"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px;margin-top:12.7px;"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px;margin-top:12.7px;"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px;margin-top:12.7px;"></div>
<div class="contentPhone-b fl" style="margin-top:12.7px;">
<div class="contentPhone-b-1">11</div>
<div class="contentPhone-b-1" style="margin-top:10px;">22</div>
</div>
</div>
<div class="clear"></div>
<div class="contentImg" style="background:url(static/img/longAD3.jpg)"></div>
<div class="contentUl">智能</div>
<div class="contentPhone">
<div class="contentPhone-a fl" style="margin-right:12.7px;background:url(static/img/buy/智能AD1.jpg)"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px"></div>
<div class="contentPhone-b fl"></div>
<div class="contentPhone-a fl" style="margin-right:12.7px;margin-top:12.7px;background:url(static/img/buy/智能AD2.jpg)"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px;margin-top:12.7px;"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px;margin-top:12.7px;"></div>
<div class="contentPhone-b fl" style="margin-right:12.7px;margin-top:12.7px;"></div>
<div class="contentPhone-b fl" style="margin-top:12.7px;">
<div class="contentPhone-b-1">11</div>
<div class="contentPhone-b-1" style="margin-top:10px;">22</div>
</div>
</div>
<div class="clear"></div>
<div class="contentImg" style="background:url(static/img/longAD4.jpg)"></div>
<div ></div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="foot">
<div class="foot-top">
<a href="#"><i class="fa fa-wrench"></i>預(yù)約維修服務(wù)</a><span></span>
<a href="#"><i class="fa fa-rotate-right"></i>7天無(wú)理由退貨</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-map-marker"></i>520余家售后網(wǎng)點(diǎn)</a>
</div>
<span class="separate"></span>
<!-- <div class="separate"></div> -->
<div class="foot-middle">
<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="#">售后服務(wù)</a></dd>
<dd><a href="#">自助服務(wù)</a></dd>
<dd><a href="#">相關(guān)下載</a></dd>
</dl>
<dl>
<dt>線下門(mén)店</dt>
<dd><a href="#">小米之家</a></dd>
<dd><a href="#">服務(wù)網(wǎng)點(diǎn)</a></dd>
<dd><a href="#">授權(quán)體驗(yàn)店</a></dd>
</dl>
<dl>
<dt>關(guān)于小米</dt>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">加入小米</a></dd>
<dd><a href="#">投資者關(guān)系</a></dd>
</dl>
<dl>
<dt>關(guān)注我們</dt>
<dd><a href="#">新浪微博</a></dd>
<dd><a href="#">官網(wǎng)微博</a></dd>
<dd><a href="#">聯(lián)系我們</a></dd>
</dl>
<dl>
<dt>特色服務(wù)</dt>
<dd><a href="#">F碼通道</a></dd>
<dd><a href="#">禮物碼</a></dd>
<dd><a href="#">防偽查詢</a></dd>
</dl>
<div class="connect">
<p class="tele">Feir-520-1314</p>
<p class="timer">周一至周日 8:00-18:00<br>僅收市話費(fèi)</p>
<button><i class="fa fa-commenting"></i><span>聯(lián)系客服</span></button>
</div>
</div>
<div class="clear"></div>
<div class="foot-bottom">
<div class="foot-bottom-left fl">
<img src="static/img/footlogo.png">
</div>
<div class="foot-bottom-middle fl" style="margin:0 8px;">
<div class="foot-bottom-middle-a">
<ul>
<li>小米商城<span></span></li>
<li>MIUI<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>政企服務(wù)<span></span></li>
<li>小米天貓店<span></span></li>
<li>隱私政策<span></span></li>
<li>問(wèn)題反饋<span></span></li>
<li>Select Region</li>
</ul>
</div>
<div class="foot-bottom-middle-b">
?mi.com 京ICP證110507號(hào) 京ICP備10046444號(hào) 京公網(wǎng)安備11010802020134號(hào) 京網(wǎng)文[2014]0059-0009號(hào)違法和不良信息舉報(bào)電話:185-0130-1238,本網(wǎng)站所列數(shù)據(jù),除特殊說(shuō)明,所有數(shù)據(jù)均出自我司實(shí)驗(yàn)室測(cè)試
</div>
</div>
<div class="foot-bottom-right fr">
<img src="static/img/footericon1.png">
<img src="static/img/footericon2.png">
<img src="static/img/footericon3.png">
<img src="static/img/footericon4.png">
<img src="static/img/footericon5.png">
</div>
<div class="clear"></div>
<div class="" style="line-height:15px;text-align:center;">
探索黑科技,小米為發(fā)燒而生!
</div>
</div>
</div>
</div>
</body>
</html>
<--style.css-->
*{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;color:#ccc;cursor:pointer;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
/*頭部樣式*/
.header{background:#333;width:100%;height:40px;}
.menu{background:#ccc;width:1226px;height:40px;margin:0 auto;}
/*主體樣式*/
.content{width:1226px;margin:10px auto;}
.contentMenu{background:#ccc;width:100%;height:90px;margin:10px auto;}
.contentPic{width:100%;margin:10px auto;}
.contentPic_l{width:246px;height:480px;background:#000;}
.contentPic_r{width:980px;height:480px;background:#4c004c;}
.contentPic-ul{width:100%;height:170px;margin:10px auto;}
.contentPic-ul-1{width:235px;height:170px;background:#4c004c;margin-right:13px;}
.contentPic-ul-2{width:317px;height:170px;}
/*小米閃購(gòu)*/
.contentShop{width:100%;margin:10px auto;}
.contentShop-1{width:235px;height:340px;background:#ccc;}
.contentImg{background:#ccc;width:100%;height:100px;margin:10px auto;}
.contentUl{background:#ccc;width:100%;height:80px;margin:10px auto;}
.contentPhone{background:#ccc;margin:10px auto;}
.contentPhone-1{background:#ccc;width:234px;height:614px;background:url(../img/buy/手機(jī)AD.jpg);margin-right: 12px;}
.contentPhone-2{background:#ccc;width:980px;height:614px;}
.contentPhone-2 div{background:#10cc10;width:235px;height:300px;float:left;}
.contentPhone-a{width: 235px;height:300px;background:#10cc10;}
.contentPhone-b{width: 235px;height:300px;background:#10cc10;}
.contentPhone-b-1{width: 235px;height:145px;background:#ccc;}
/*底部?jī)?nèi)容*/
.footer{background:#fff;width:1226px;height:100px;margin:10px auto;}
.foot-top{width:100%;height:80px;line-height:80px;text-align:center;}
.foot-top a{font-size: 16px;color:#616161;font-weight:300px;}
.foot-top a:hover{color:orange;}
.foot-top span{font-size: 20px;color:#616161;border-left:1px solid #e0e0e0;margin:0px 56px;}
.separate{border:1px solid #e0e0e0;display:block;}
.foot-middle{margin-top: 20px;}
.foot-middle dl{float:left;width:160px;}
.foot-middle dt{font-size:14px;line-height:14px;color:#424242;margin-bottom:26px;}
.foot-middle dd{font-size:12px;line-height:12px;color:#424242;margin-top:10px;}
.foot-middle dd a{color:#757575;}
.foot-middle dd a:hover{color:#ff6700;}
.connect{width:258px;height:112px;border-left:1px solid #e0e0e0;float:right;text-align:center;}
.tele{color:#ff6700;margin:0 0 5px;font-size:22px;line-height: 22px;}
.timer{color:#616161;margin:0px 16px;font-size: 12px;}
.connect button{border:1px solid #ff6700;width:118px;height:28px;font-size: 12px;line-height:28px;color:#ff6700;background:#fff;margin-top: 20px;}
.connect button:hover{background: #ff6700;color:#fff;}
.foot-bottom{margin-top: 20px;}
.foot-bottom-middle-a{width:640px;}
.foot-bottom-middle ul li{height:19px;float:left;font-size: 12px;}
.foot-bottom-middle span{height:2px;color:#757575;border-left:1px solid #b0b0b0;margin:3px 3px;}
.foot-bottom-middle-b{width:640px;color:#b0b0b0;font-size: 12px;margin-top: 5px;display: inline-block;}
.foot-bottom-right img{width:83px;}
Correcting teacher:天蓬老師Correction time:2019-05-27 09:13:59
Teacher's summary:下次只需要提交關(guān)鍵代碼就可以了, 現(xiàn)在代碼是不完整的, 下次注意