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

仿小米商城-商城底部布局(2)

asal 2019-02-20 15:18:37 587
abstrak:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>仿小米商城</title><!-- 圖標 --><link rel='shortcut icon' type='i

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>仿小米商城</title>

<!-- 圖標 -->

<link rel='shortcut icon' type='image/x-icon' href='https://s01.mifile.cn/favicon.ico'>

<!-- css樣式 -->

<link rel='stylesheet' href='static/css/index.css'>

<!-- font-awesome 字體庫 -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

<!-- index.css -->

<style type='text/css'>

body,ul,li,dl,dt,dd,p{padding:0;margin:0;}

li{list-style:none;}

a{color:red;text-decoration:none;cursor:pointer;}

.clear{clear:both;}

.l{float:left;}

.r{float:right;}

.m_t10{margin-top:10px;}

#wrapper{min-width:1226px;}


/* 頁頭部分 */

#header{width:100%;background:#333;line-height:40px;}

.header_menu{width:1226px;height:40px;background:blue;margin:0 auto;}


/* 主體部分 */

#main{width:1226px;margin:0 auto;}

/* 導航 */

.nav{height:70px;background:blue;}


.menu{height:460px;}

.menu_left{width:246px;height:460px;background:cadetblue;}

.menu_right{float:left;width:980px;height:460px;background:chocolate;}


.submenu{height:170px;}

.submenu_left{width:240px;height:170px;margin-right:6px;background:blue;}

.submenu_right{width:980px;height:170px;}

.submenu_right img{float:left;width:317px;height:inherit;margin-right:14.5px;}

.submenu_right img:nth-last-child(1){margin-right:0px;}

/* 小米閃購 */

.shop{height:340px;}

.shop_top{font-size:22px;font-weight:400;height:30px;line-height:30px;}

.shop_bottom{width:100%;height:340px;}

.shop_bottom>div{float:left;width:235px;height:310px;margin-right:12.75px;background:blue;}

.shop_bottom>div:nth-last-child(1){margin-right:0px;}

/* 廣告 */

.banner{height:100px;}

.banner img{width:1226px;height:100px;}

/* 手機 */

.guild_top{height:60px;line-height:60px;}

.guild_bottom{height:614px;}

.guild_bottom>div{float:left;width:235px;height:300px;margin-right:12px;background:blue;}

.guild_bottom>div:nth-child(1){height:614px;width:234px;}

.guild_bottom>div:nth-child(1)>img{width:234px;}

.guild_bottom>div:nth-child(5),.guild_bottom div:nth-child(9){margin-right:0px;}

.guild_bottom>div:nth-child(5)~div{margin-top:14px;}

/* 智能 */

.guild1_top{height:60px;line-height:60px;}

.guild1_bottom{height:614px;}

.guild1_bottom>div{float:left;width:235px;height:300px;margin-right:12px;background:blue;}

.guild1_bottom>div>img{width:234px;}

.guild1_bottom>div:nth-child(1),.guild1_bottom div:nth-child(6){width:234px;}

.guild1_bottom>div:nth-child(5),.guild1_bottom div:nth-child(10){margin-right:0px;}

.guild1_bottom>div:nth-child(5)~div{margin-top:14px;}

.guild1_bottom>div:nth-last-child(1){background:none;}

.guild1_bottom>div:nth-last-child(1)>div{height:145px;background:blue;}

.guild1_bottom>div:nth-last-child(1)>div:nth-last-child(1){margin-top:10px;}

/* 頁腳 */

#footer{width:1226px;margin:0 auto;}

/* 頁腳 頁頭 */

.footer_top{width:1226px;height:20px;line-height:20px;padding:30px 0px;border-bottom:1px solid #e0e0e0;text-align:center;}

.footer_top ul li{float:left;width:240px;border-right:1px solid #e0e0e0;}

.footer_top ul li:nth-last-child(1){border-right:none;}

.footer_top a{font-size:16px;color:#616161;font-weight:300;}

.footer_top a:hover{color:#ff6700;}

.footer_top a i{font-size:20px;margin-right:10px;}

/* 頁腳 主體 */

.footer_content{width:1226px;padding:30px 0px;}

.footer_content_left{width:960px;height:125px;}

.footer_content_left dl{float:left;width:160px;}

.footer_content_left dt{font-size:15px;height:15px;line-height:15px;color:#424242;margin-bottom:26px;}

.footer_content_left dd{font-size:13px;height:18px;line-height:18px;color:#424242;margin-bottom:10px;}

.footer_content_left dd a{color:#757575;}

.footer_content_left dd a:hover{color:#ff6700;}

.footer_content_right{width:262px;height:125px;border-left:1px solid #e0e0e0;text-align:center;}

.footer_content_right>p{color:#616161;font-size:12px;margin-bottom:10px;}

.footer_content_right>p:nth-child(1){color:#ff6700;font-size:22px;}

.footer_content_right>p>span{display:inline-block;margin-top:5px;}

.footer_content_right>div{margin:0 auto;width:120px;height:28px;line-height:28px;font-size:12px;border:1px solid #ff6700;color:#ff6700;background:#fff;}

.footer_content_right>div:hover{background:#ff6700;color:#fff;cursor:pointer;}

/* 頁腳 頁腳 */

.footer_bottom_content_top ul li{float:left;color:#757575;font-size:12px;height:14px;padding:0px 5px 5px;border-right:1px solid #e0e0e0;}

.footer_bottom_content_top ul li:nth-last-child(1){border-right:0px;}

.footer_bottom_content_bottom{color:#b0b0b0;font-size:12px;padding-left:5px;}

.footer_bottom_content_bottom a{color:#b0b0b0;}

.footer_bottom_content_bottom a:hover{color:#ef3a3b;}

.footer_bottom_right img{height:28px;margin-left:2px;float:left;}

/* 探索黑科技,小米為發(fā)燒而生 */

.footer_logo{text-align:center;margin:10px 0px;}


</style>

</head>

<body>


<div id='wrapper'>

<!-- 頁頭部分 -->

<div id='header'>

<div class='header_menu'></div>

</div>


<!-- 主體部分 -->

<div id='main'>

<div class='nav m_t10'>

</div>


<div class='menu m_t10'>

<div class='menu_left l'></div>

<div class='menu_right l'></div>

</div>


<div class='submenu m_t10'>

<div class='submenu_left l'></div>

<div class='submenu_right l'>

<img src='https://i1.mifile.cn/a4/xmad_15500580021576_iymFx.jpg' alt='小米8青春版'>

<img src='https://i1.mifile.cn/a4/xmad_15410029988871_TdzPQ.jpg' alt='紅米6 AI雙攝'>

<img src='https://i1.mifile.cn/a4/xmad_1550022313197_PMtDb.jpg' alt='小米凈水器 廚下式'>

</div>

</div>


<div class='shop m_t10'>

<div class='shop_top'>小米閃購</div>

<div class='shop_bottom'>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</div>

<!-- 廣告 -->

<div class='banner m_t10'>

<img src='https://i1.mifile.cn/a4/xmad_15500232485691_uYPkv.jpg' alt='為你而戰(zhàn)'>

</div>


<!-- 手機導航 -->

<div class='guild m_t10'>

<div class='guild_top'>手機</div>

<div class='guild_bottom'>

<div><img src='https://i1.mifile.cn/a4/xmad_1544580545953_UvEXK.jpg' alt='手機'></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</div>


<!-- 廣告 -->

<div class='banner m_t10'>

<img src='https://i1.mifile.cn/a4/xmad_15486596829568_opVwS.jpg' alt='小米電視'>

</div>


<!-- 家電導航 -->

<div class='guild1 m_t10'>

<div class='guild1_top'>家電</div>

<div class='guild1_bottom'>

<div><img src='https://i1.mifile.cn/a4/xmad_15232433421155_vCzhJ.jpg' alt='電飯煲'></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div><img src='https://i1.mifile.cn/a4/xmad_15453810333749_hDsXv.jpg' alt='小米凈化器'></div>

<div></div>

<div></div>

<div></div>

<div>

<div></div>

<div></div>

</div>

</div>

</div>

<!-- 廣告 -->

<div class='banner m_t10'>

<img src='https://i1.mifile.cn/a4/xmad_1549096127912_QzHyY.jpg' alt='小米情人節(jié)'>

</div>

<!-- 智能導航 -->

<div class='guild1 m_t10'>

<div class='guild1_top'>智能</div>

<div class='guild1_bottom'>

<div><img src='https://i1.mifile.cn/a4/xmad_15266395374048_JnZQo.jpg' alt='攝像機'></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div><img src='https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg' alt='平衡車'></div>

<div></div>

<div></div>

<div></div>

<div>

<div></div>

<div></div>

</div>

</div>

</div>




<!-- 廣告 -->

<div class='banner m_t10'>

<img src='https://i1.mifile.cn/a4/xmad_15439756480639_IhxpV.jpg' alt='小米筆記本'>

</div>


</div>


<!-- 頁腳部分 -->

<div id='footer'>

<div class='footer_top m_t10'>

<ul>

<li><a href='#'><i class='fa fa-wrench'></i>預約維修服務</a></li>

<li><a href='#'><i class='fa fa-rotate-right'></i>7天無理由退貨</a></li>

<li><a href='#'><i class='fa fa-refresh'></i>15天免費換貨</a></li>

<li><a href='#'><i class='fa fa-gift'></i>滿150元包郵</a></li>

<li><a href='#'><i class='fa fa-map-marker'></i>520余家售后網(wǎng)點</a></li>

</ul>

</div>

<div class='footer_content'>

<div class='footer_content_left l'>

<dl>

<dt>幫助中心</dt>

<dd><a href="">賬戶管理</a></dd>

<dd><a href="">購物指南</a></dd>

<dd><a href="">訂單操作</a></dd>

</dl>

<dl>

<dt>服務支持</dt>

<dd><a href="">售后政策</a></dd>

<dd><a href="">自助服務</a></dd>

<dd><a href="">相關下載</a></dd>

</dl>

<dl>

<dt>線下門店</dt>

<dd><a href="">小米之家</a></dd>

<dd><a href="">服務網(wǎng)點</a></dd>

<dd><a href="">授權(quán)體驗店</a></dd>

</dl>

<dl>

<dt>關于小米</dt>

<dd><a href="">了解小米</a></dd>

<dd><a href="">加入小米</a></dd>

<dd><a href="">投資者關系</a></dd>

</dl>

<dl>

<dt>關注我們</dt>

<dd><a href="">新浪微博</a></dd>

<dd><a href="">官網(wǎng)微博</a></dd>

<dd><a href="">聯(lián)系我們</a></dd>

</dl>

<dl>

<dt>特色服務</dt>

<dd><a href="">F碼通道</a></dd>

<dd><a href="">禮物碼</a></dd>

<dd><a href="">防偽查詢</a></dd>

</dl>


</div>

<div class='footer_content_right r'>

<p>Feir-520-1314</p>

<p>周一至周日 8:00-18:00<br><span>(僅收市話費)</span></p>

<div><i class="fa fa-commenting "></i> 聯(lián)系客服</div>

</div>

<div class='clear'></div>

</div>

<div class='footer_bottom m_t10'>

<div class='footer_bottom_left l'>

<img src='https://s01.mifile.cn/i/logo-footer.png?v2' alt='小米商城'>

</div>

<div class='footer_bottom_content l'>

<div class='footer_bottom_content_top'>

<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>政企服務<span></span></li>

<li>小米天貓店<span></span></li>

<li>隱私政策<span></span></li>

<li>問題反饋<span></span></li>

<li>Select Region</li>

</ul>

</div>

<div class='footer_bottom_content_bottom'>

<a href="">&copy;mi.com</a>

京ICP證110507號

<a href="">京ICP備10046444號</a>

<a href="">京公網(wǎng)安備11010802020134號</a>

<a href="">京網(wǎng)文[2014]0059-0009號</a>

<br>

違法和不良信息舉報電話:185-0130-1238,本網(wǎng)站所列數(shù)據(jù),除特殊說明,所有數(shù)據(jù)均出自我司實驗室測試

</div>

</div>

<div class='footer_bottom_right r'>

<img src='https://i1.mifile.cn/f/i/17/site/truste.png' alt='標1'>

<img src='https://s01.mifile.cn/i/v-logo-2.png' alt='標2'>

<img src='https://s01.mifile.cn/i/v-logo-1.png' alt='標3'>

<img src='https://s01.mifile.cn/i/v-logo-3.png' alt='標4'>

<img src='https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png' alt='標5'>

</div>

<div class='clear'></div>

</div>

<div class='footer_logo'>

<img src='https://s01.mifile.cn/i/slogan2016.png' alt='探索黑科技,小米為發(fā)燒而生'>

<!-- 探索黑科技,小米為發(fā)燒而生 -->

</div>

</div>


</div>


</body>

</html>


Guru membetulkan:天蓬老師Masa pembetulan:2019-02-20 15:43:39
Rumusan guru:如果一個運行圖, 就完美了, 下次記得加個圖片一起發(fā)作業(yè)

Nota Keluaran

Penyertaan Popular