abstrak：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城-小米9-小米MIX 3</title> <link rel = "icon" ty
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城-小米9-小米MIX 3</title>
<link rel = "icon" type="image/x-icon" href ="./favicon.ico">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<style>
*{margin: 0;padding:0;}
ul{list-style: none;}
a{text-decoration: none;}
/*頭部樣式*/
.head{width: 100%;height: 40px;background:#333;}
.menu{width: 1226px;background: red;height: 40px;margin: 0 auto;}
/*內容樣式*/
.contents{width: 1226px;margin: 0 auto;}
/*內容區(qū)上面部分*/
.contents_top{width: 1226px;background-color: #fff;}
.contents_nav{width: 1226px;height: 100px;background-color: #fff;}
.contents_banner_img{width: 1226px;height: 644px;margin-bottom: 27px;}
.contents_banner{width: 1226px;height: 460px;background-color: #F0F4FF;}
.contents_img{width: 1240px;height: 170px;margin-top: 17px;}
.contents_img_l{width: 234px;height:170px;background: #333;float: left;}
.contents_img img{float: left;margin-left: 14.7px;}
/*內容區(qū)下面部分*/
.contents_bottom{width: 1226px;height: 6774px;background-color: #F5F5F5;margin-top: 20px;}
h2{display: block;width: 1226px;height: 57.6px;font-size: 22px;font-weight:200;line-height:58px;color: #333;}
.contents_phone{width: 1240px;height: 628px;margin-bottom: 20px;}
.contents_phone_l{height: 614px;width: 234px;background: #fff;float: left;background: url('../images/midAD4.jpg') no-repeat;background-size: 234px 614px ; }
.contents_phone_r{height: 614px;width: 992px;background: red;float: left;}
.contents_appliances{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_appliances_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_appliances_r{height: 614px;width: 992px;background: red;float: left;}
.contents_Intelligence{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_Intelligence_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_Intelligence_r{height: 614px;width: 992px;background: red;float: left;}
.contents_collocation{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_collocation_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_collocation_r{height: 614px;width: 992px;background: red;float: left;}
.contents_parts{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_parts_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_parts_r{height: 614px;width: 992px;background: red;float: left;}
.contents_periphery{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_periphery_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_periphery_r{height: 614px;width: 992px;background: red;float: left;}
.contents_Recommend{width: 1240px;height: 314px;background: red;margin-bottom: 20px;}
.contents_product{width: 1240px;height: 415px;background: red;margin-bottom: 20px;}
.contents_content{width: 1240px;height: 420px;background: red;margin-bottom: 20px;}
.contents_video{width: 1240px;height: 285px;background: red;margin-bottom: 20px;}
/*底部樣式*/
.footer{width: 1226px;height:500px;margin: 0 auto;}
.footer_service{width: 1226px;height:80px;background: #fff;position: relative;}
.footer_service ul{width: 1226px;height:25px;line-height: 80px;position: absolute;top: 50%;margin-top: -12.5px;}
.footer_service li{width: 243.74px;height:25px;float: left;line-height: 25px;text-align: center;font-size: 16px;border-right: 1px solid #ccc;}
.footer_service a{height:17.6px;display:inline-block;line-height: 17.6px;color: #333;}
.footer_service a:hover{color: #ff6700;}
.footer_links-clearfix{width: 1226px;height:192px;padding: 40px 0;}
dl{width: 160px;height: 112px;float: left;}
dt{font-size: 14px;margin: -1px 0 26px;line-height: 1.25;color: #424242;}
dd{margin:10px 0 10px 0;color: #757575;font-size: 12px;}
.col-contact{width:252px;height:112px;float: left;text-align: center;color: #757575;font-size: 12px;}
.col-contact_p1{margin: 0 0 5px 0;font-size: 22px;line-height: 1;color: #ff6700;}
.col-contact_p2{margin: 0 0 16px 0;font-size: 12px;}
.col-contact a{background: #fff;color: #ff6700;border: 1px solid #ff6700;width: 120px;height: 30px;margin:0 auto;display:block;}
.footer_site-info{width: 1267.2px;height:229.8px;font-size: 12px;}
.footer_site-info_logo{width: 57px;height: 57px;float: left;background: url(../images/footlogo.png);}
.footer_site-info_p1{width: 1159px;height: 18.4px;line-height: 18px;}
.footer_site-info_p1 a{color:#757575;border-right: 1px solid #ccc;margin-left: 5px;margin-right: 5px;}
.footer_site-info_p2{color: #b0b0b0;}
.footer_site-info_p2 a{margin-top:5px;color: #b0b0b0;}
.footer_site-info p{float: left;margin-left: 10px;}
.footer_site-info img{width: 85px;height: 28px;}
</style>
</head>
<body>
<div>
<div></div>
</div>
<div>
<div>
<div></div>
<div>
<div></div>
<div>
<div></div>
<div><img src="static/images/midAD1.jpg"></div>
<div><img src="static/images/midAD2.jpg"></div>
<div><img src="static/images/midAD3.jpg"></div>
</div>
</div>
<div style="clear:both;"></div>
<div><img src="static/images/longAD1.jpg" width="1226px height:120px" style="margin-bottom: 37px;"></div>
</div>
<div>
<h2>手機</h2>
<div>
<div></div>
<div></div>
</div>
<div>
<img src="static/images/longAD2.jpg" width="1226px" height="120px">
</div>
<div style="clear: both;"></div>
<h2>家電</h2>
<div>
<div></div>
<div></div>
</div>
<div>
<img src="static/images/longAD3.jpg" width="1226px" height="120px">
</div>
<h2>智能</h2>
<div>
<div></div>
<div></div>
</div>
<div>
<img src="static/images/longAD4.jpg" width="1226px" height="120px">
</div>
<h2>搭配</h2>
<div>
<div ></div>
<div ></div>
</div>
<div>
<img src="static/images/longAD5.jpg" width="1226px" height="120px">
</div>
<h2>配件</h2>
<div >
<div ></div>
<div ></div>
</div>
<div>
<img src="static/images/longAD6.png" width="1226px" height="120px">
</div>
<h2>周邊</h2>
<div >
<div ></div>
<div ></div>
</div>
<div>
<img src="static/images/longAD7.jpg" width="1226px" height="120px">
</div>
<h2>為您推薦</h2>
<div>
</div>
<h2>熱評產品</h2>
<div>
</div>
<h2>內容</h2>
<div>
</div>
<h2>視屏</h2>
<div>
</div>
</div>
</div>
<div>
<div>
<ul>
<li><a href="">預約維修服務</a></li>
<li><a href="" style="color: #ff6700;">7天無理由退貨</a></li>
<li><a href="">15天免費換貨</a></li>
<li><a href="">滿150元包郵</a></li>
<li><a href="">520余家售后網點</a></li>
</ul>
</div>
<hr>
<div>
<dl>
<dt>幫助中心</dt>
<dd>賬戶管理</dd>
<dd>購物指南</dd>
<dd>訂單操作</dd>
</dl>
<dl>
<dt>服務支持</dt>
<dd>售后政策</dd>
<dd>自助服務</dd>
<dd>相關下載</dd>
</dl>
<dl>
<dt>線下門店</dt>
<dd>小米之家</dd>
<dd>服務網點</dd>
<dd>授權體驗店</dd>
</dl>
<dl>
<dt>關于小米</dt>
<dd>了解小米</dd>
<dd>加入小米</dd>
<dd>投資者關系</dd>
</dl>
<dl>
<dt>關注我們</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>聯(lián)系我們</dd>
</dl>
<dl style="border-right:1px solid #ccc;">
<dt>特色服務</dt>
<dd>f碼通道</dd>
<dd>禮物碼</dd>
<dd>防偽查詢</dd>
</dl>
<div>
<p>400-100-5678</p>
<p>周一至周日 8:00-18:00(僅收市話費)</p>
<a href="">聯(lián)系客服</a>
</div>
</div>
<div>
<div>
</div>
<p>
<a href="">小米商城</a>
<a href="">MIUI</a>
<a href="">米家</a>
<a href="">米聊</a>
<a href="">多看</a>
<a href="">游戲</a>
<a href="">路由器</a>
<a href="">米粉卡</a>
<a href="">政企服務</a>
<a href="">小米天貓店</a>
<a href="">隱私政策</a>
<a href="">商城用戶協(xié)議</a>
<a href="">賬號協(xié)議</a>
<a href="">問題反饋</a>
<a href="">廉正舉報</a>
<a href="">誠信合規(guī)</a>
<a href="">Setlect Region</a>
</p>
<p>
<a href="">mi.com</a>
<a href="">京ICP證110507號</a>
<a href="">京ICP備10046444號</a>
<a href="">京公網安備11010802020134號</a>
<a href="">京網文[2017]1530-131號</a><br>
<a href="">（京）網械平臺備字（2018）第00005號</a>
<a href="">互聯(lián)網藥品信息服務資格證 (京) -非經營性-2014-0090</a>
<a href="">營業(yè)執(zhí)照</a>
<a href="">醫(yī)療器械公告</a><br>
<a href="">增值電信業(yè)務許可證</a>
<a href=""> 網絡食品經營備案（京）【2018】WLSPJYBAHF-12</a>
<a href="">食品經營許可證 </a><br>
違法和不良信息舉報電話:<a href="">185-0130-1238</a>
<a href="">知識產權侵權投訴</a>
本網站所列數(shù)據，除特殊說明，所有數(shù)據均出自我司實驗室測試
</p>
<div style="clear: both;"></div>
<div>
<img src="static/images/footericon1.png" style="margin-left: 65px;">
<img src="static/images/footericon2.png">
<img src="static/images/footericon3.png">
<img src="static/images/footericon4.png">
<img src="static/images/footericon5.png">
</div>
</div>
</div>
</body>
</html>由于不能上傳文件,就將css部分直接加到html頁面上,到這里小米商城前端的大體框架已經成功
Guru membetulkan：韋小寶Masa pembetulan：2019-03-14 09:21:17
Rumusan guru：這種有外部引入樣式的 不能發(fā)布樣式 就直接把結果截圖附上就可以 看代碼寫的還是很不錯的