亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

小米商城框架布局

Original 2019-05-25 22:19:57 249
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)在代碼是不完整的, 下次注意

Release Notes

Popular Entries