abstract:在線預(yù)覽地址:http://www.pursuer.top/xiaomi1 html部分:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>小米商城</title><link rel="shortcut icon"&nb
在線預(yù)覽地址:http://www.pursuer.top/xiaomi1
html部分:
<!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" href="static/layui/css/layui.css"> -->
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<!-- 頭部 -->
<div>
<div>
</div>
</div>
<!-- 主體 -->
<div>
<div>
<!-- 導(dǎo)航 -->
<div>搜索</div>
<!-- 輪播圖 -->
<div>
<div></div>
<div></div>
</div>
<div></div>
<!-- 商品廣告 -->
<div>
<div></div>
<div style="background:url(static/images/midAD1.jpg);"></div>
<div style="background:url(static/images/midAD2.jpg);"></div>
<div style="background:url(static/images/midAD3.jpg);"></div>
</div>
<div></div>
<!-- 小米閃購 -->
<div>
<h2>小米閃購</h2>
<div style="margin-right: 14px;border-top:1px solid #f00;"></div>
<div style="margin-right: 14px;border-top:1px solid #ff6700;"></div>
<div style="margin-right: 14px;border-top:1px solid #080;"></div>
<div style="margin-right: 14px;border-top:1px solid #00f;"></div>
<div style="border-top:1px solid #f00;"></div>
</div>
<div></div>
<!-- 廣告圖 -->
<div style="background:url(static/images/longAD1.jpg);">
</div>
<!-- 手機(jī)專區(qū) -->
<div>
<div>
<h2>手機(jī)</h2>
<span>查看更多</span>
</div>
<div></div>
<div style="background:url(static/images/buy/手機(jī)AD.jpg);;">
</div>
<div>
<div style="margin-bottom:14px;"></div>
<div style="margin-bottom:14px;"></div>
<div style="margin-bottom:14px;"></div>
<div style="margin-bottom:14px;"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div></div>
<!-- 廣告圖 -->
<div style="background:url(static/images/longAD2.jpg);"></div>
<!-- 智能專區(qū) -->
<div>
<div>
<h2>智能</h2>
<span>熱門</span>
<span>電視影音</span>
<span>電腦</span>
<span>家具</span>
</div>
<div></div>
<div>
<div style="background:#ccc;background:url(static/images/buy/智能AD1.jpg);margin-bottom: 14px;"></div>
<div style="background:#ccc;background:url(static/images/buy/智能AD2.jpg);"></div>
</div>
<div>
<div style="margin-bottom:14px;"></div>
<div style="margin-bottom:14px;"></div>
<div style="margin-bottom:14px;"></div>
<div style="margin-bottom:14px;"></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
<div style="margin-top:10px;"></div>
</div>
</div>
</div>
<div></div>
<!-- 廣告圖 -->
<div style="background:url(static/images/longAD3.jpg);"></div>
<!-- 家電專區(qū) -->
<div>
<div>
<h2>家電</h2>
<span>熱門</span>
<span>家居</span>
<span>家電</span>
</div>
<div></div>
<div>
<div style="background:#ccc;background:url(static/images/buy/家電AD1.jpg);margin-bottom: 14px;"></div>
<div style="background:#ccc;background:url(static/images/buy/家電AD2.jpg);"></div>
</div>
<div>
<div style="margin-bottom:14px;"></div>
<div style="margin-bottom:14px;"></div>
<div style="margin-bottom:14px;"></div>
<div style="margin-bottom:14px;"></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
<div style="margin-top:10px;"></div>
</div>
</div>
</div>
<div></div>
<!-- 廣告圖 -->
<div style="background:url(static/images/longAD4.jpg);"></div>
</div>
</div>
<!-- 底部 -->
<div>
<div>
<div>
<a href=""><i class="fa fa-wrench"></i>預(yù)約維修服務(wù)</a><span>|</span>
<a href=""><i class="fa fa-rotate-right"></i>7天無理由退貨</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>
<div>
<div>
<div>幫助中心</div>
<a>賬戶管理</a>
<a>購物指南</a>
<a>訂單操作</a>
</div>
<div>
<div>服務(wù)支持</div>
<a>售后政策</a>
<a>自助服務(wù)</a>
<a>相關(guān)下載</a>
</div>
<div>
<div>線下門店</div>
<a>小米之家</a>
<a>服務(wù)網(wǎng)點(diǎn)</a>
<a>授權(quán)體驗(yàn)店</a>
</div>
<div>
<div>關(guān)于小米</div>
<a>了解小米</a>
<a>加入小米</a>
<a>投資者關(guān)系</a>
</div>
<div>
<div>關(guān)注我們</div>
<a>新浪微博</a>
<a>官網(wǎng)微博</a>
<a>聯(lián)系我們</a>
</div>
<div>
<div>特色服務(wù)</div>
<a>F碼通道</a>
<a>禮物碼</a>
<a>防偽查詢</a>
</div>
<div>
<span style="font-size:22px;">Feir-520-1314</span>
<span style="font-size:12px;color: #616161;">周一至周日 8:00-18:00<br>(僅收市話費(fèi))</span>
<div id="cont"><a><i class="fa fa-commenting"></i>聯(lián)系客服</a></div>
</div>
</div>
<div></div>
<div>
<div style="background: url(static/images/footlogo.png);"></div>
<div>
<div>
<a href="">小米商城</a><span>|</span>
<a href="">MIUI</a><span>|</span>
<a href="">米家</a><span>|</span>
<a href="">米聊</a><span>|</span>
<a href="">多看</a><span>|</span>
<a href="">游戲</a><span>|</span>
<a href="">路由器</a><span>|</span>
<a href="">米粉卡</a><span>|</span>
<a href="">政企服務(wù)</a><span>|</span>
<a href="">小米天貓店</a><span>|</span>
<a href="">隱私政策</a><span>|</span>
<a href="">問題反饋</a><span>|</span>
<a href="">Select Region</a>
</div>
<div>
<span> <a href="">?mi.com</a> 京ICP證110507號(hào) <a href="">京ICP備10046444號(hào)</a> <a href="">京公網(wǎng)安備11010802020134號(hào)</a> <a href="">京網(wǎng)文[2014]0059-0009號(hào)</a> <br>違法和不良信息舉報(bào)電話:185-0130-1238,本網(wǎng)站所列數(shù)據(jù),除特殊說明,所有數(shù)據(jù)均出自我司實(shí)驗(yàn)室測(cè)試</span>
</div>
</div>
<div>
<img src="static/images/footericon1.png" alt="">
<img src="static/images/footericon2.png" alt="">
<img src="static/images/footericon3.png" alt="">
<img src="static/images/footericon4.png" alt="">
<img src="static/images/footericon5.png" alt="">
</div>
</div>
<div></div>
<div>探索黑科技,小米為發(fā)燒而生!</div>
</div>
</div>
</body>
</html>
css部分:
/*公共樣式*/
*{padding:0;margin:0;}
a{text-decoration: none;cursor:pointer;}
li{list-style:none;}
.clear{clear: both;}
/*頭部樣式*/
.header{width:100%;height:40px;background-color:#333;}
.menu{width:1226px;height:40px;background: #ccc;margin:0 auto;}
/*主體樣式*/
.main{width:1226px;margin:0 auto;}
/*導(dǎo)航*/
.mainNav{width:1226px;height:80px;background:#ccc;margin:10px auto;}
/*輪播圖*/
.mainRpm{margin:10px auto;}
.mainRpm_l{width:246px;height:460px;background:#ccc;float: left;}
.mainRpm_r{width:980px;height:460px;background:#bbb;float: left;}
/*商品廣告*/
.mainShop{margin:10px auto;}
.mainShop_l{width:235px;height:170px;background:#5f5750;float: left;}
.mainShop_r{width:317px;height:170px;float: left;margin-left:13px;}
/*小米閃購*/
.mainPurchase{margin:20px auto;}
.mainPurchase_tit{padding:20px 0;}
.mainPurchase_shop{width: 234px;height:329px;float: left;background-color: #ccc;}
/*廣告位*/
.mainImg{width:1226px;height:119px;background:#ccc;margin:30px auto;}
/*專區(qū)*/
.mainPhone{margin:10px auto;}
.mainPhone_tit{height: 60px;margin: 10px 0;line-height:60px;}
.mainPhone_tit .tit{height:40px;line-height:40px;float: left;}
.mainPhone_tit .more{height:40px;line-height:40px;float: right;font-size: 14px;}
.mainPhone_tit .short{height:40px;line-height:40px;float: right;margin-left:15px;font-size: 14px;}
.mainPhone_tit .short:hover{color:#ff6700;border-bottom: 2px solid #ff6700;}
.mainPhone_l{width:234px;height:614px;float:left;}
.mainPhone_l .ad{width:234px;height:300px;}
.mainPhone_r{width:992px;height:614px;float:right;}
.mainPhone_r .p{width:234px;height:300px;background:#ccc;float:left;margin-left: 14px;}
.mainPhone_r .p1{width:234px;height:300px;float:left;margin-left: 14px;}
.mainPhone_r .p1 .ad{width:234px;height:145px;background:#ccc;}
.mainRecommend{width:1226px;height:310px;background:#ccc;margin:20px auto;}
.mainHost{width:1226px;height:490px;background:#ccc;margin:20px auto;}
.mainContainer{width:1226px;height:490px;background:#ccc;margin:20px auto;}
.mainVideo{width:1226px;height:360px;background:#ccc;margin:20px auto 40px;}
/*底部樣式*/
.foot{width:1226px;margin:0 auto;}
.foot_top{height:80px;margin:0 auto;text-align: center;border-bottom: 1px solid #e0e0e0;}
.foot_top a{color:#616161;font-size: 16px;line-height: 80px;}
.foot_top i{font-size:20px;line-height: 80px;margin-right:10px;}
.foot_top a:hover{color:#ff6700;}
.foot_top span{color:#616161;margin:0 50px;}
.foot_middle{height:114px;margin:40px 0;}
.foot_middle .nav{height: 114px;width: 160px;float: left;}
.foot_middle .nav .tit{font-size: 14px;margin-bottom: 26px;color: #424242;}
.foot_middle .nav .list{font-size: 12px;margin:10px 0;color:#555;display: block;}
.foot_middle .nav .list:hover{color:#ff6700;}
.foot_middle .nav_r{height:114px;width:265px;float: left;border-left: 1px solid #e0e0e0;}
.foot_middle .nav_r span{text-align: center;color: #ff6700;display: block;}
.foot_middle .nav_r #cont{width: 118px;height: 28px;border:1px solid #ff6700;margin:20px auto 0;color:#ff6700;text-align: center;line-height:30px;font-size:14px;}
.foot_middle .nav_r #cont:hover{background: #ff6700;color:#fff;}
.foot_middle .nav_r #cont i{margin-right: 10px;}
.foot_bottom{height:84px;}
.foot_bottom .foot_bottom_l{width:56px;height: 57px;float: left;margin-right: 16px;}
.foot_bottom .foot_bottom_m{width:640px;height: 57px;float: left;}
.foot_bottom .foot_bottom_m .up{width: 640px;height: 19px;margin-bottom:6px;color: #555;font-size: 12px;}
.foot_bottom .foot_bottom_m .up a{color: #555;}
.foot_bottom .foot_bottom_m .up a:hover{color: #ff6700;}
.foot_bottom .foot_bottom_m .up span{margin:0 0 0 2px;}
.foot_bottom .foot_bottom_m .down{width: 640px;height: 31px;font-size: 10px;}
.foot_bottom .foot_bottom_m .down span a{color: #757575;}
.foot_bottom .foot_bottom_m .down span a:hover{color: #ff6700;}
.foot_bottom .foot_bottom_m .down span{color:#555;}
.foot_bottom .foot_bottom_r{width:455px;height:57px;float:right;}
.foot_bottom .foot_bottom_r img{width: 83px;height: 28px;float:left;margin-left:8px;}
.slogan{font-size: 24px;font-family: '楷體';text-align: center;color: #ccc;padding-bottom:20px;}
Correcting teacher:天蓬老師Correction time:2019-08-27 09:16:09
Teacher's summary:寫得不錯(cuò), 不是在css中, 類名中的多個(gè)單詞之間,推薦使用連接線, 而不是下劃線