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="">©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è)