abstract：在線預(yù)覽地址：http://www.pursuer.top/xiaomi1/detail.htmlHTML部分：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>小米商城</title> <link
在線預(yù)覽地址：http://www.pursuer.top/xiaomi1/detail.html
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/detail.css">
<script src="static/js/jq_3.3.1_mi.js"></script>
<script src="static/js/detail.js"></script>
</head>
<body>
<!-- 頭部 -->
<div>
<div>
<div>
<a href="">小米商城</a><span>|</span>
<a href="">MIUI</a><span>|</span>
<a href="">IOT</a><span>|</span>
<a href="">云服務(wù)</a><span>|</span>
<a href="">小愛分享平臺(tái)</a><span>|</span>
<a href="">金融</a><span>|</span>
<a href="">有品</a><span>|</span>
<a href="">企業(yè)服務(wù)</a><span>|</span>
<a href="">SelectRegion</a>
</div>
<div>
<a href="login.html">登錄</a><span>|</span>
<a href="login.html">注冊(cè)</a><span>|</span>
<a href="">我的訂單</a>
<li>
<a ><i class="fa fa-shopping-cart"></i>購(gòu)物車(0)</a>
<div>購(gòu)物車中還沒有商品，趕緊選購(gòu)吧！</div>
</li>
</div>
</div>
</div>
<div></div>
<!-- 主體 -->
<div>
<div>
<!-- 導(dǎo)航 -->
<div>
<div>
<img src="static/images/footlogo.png" alt="" style="margin:5px 0;margin-right:10px;">
<img src="static/images/logoAD.gif" alt="">
</div>
<div>
<li>
<a href="#">小米手機(jī)</a>
<div>
<div>
<div>
<div>新品</div>
<img src="static/images/phone/phone1.png" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone2.png" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone3.png" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone4.jpg" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone5.jpg" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone7.png" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
</div>
</div>
</li>
<li>
<a href="#">紅米</a>
<div>
<div>
<div>
<div>新品</div>
<img src="static/images/phone/phone8.png" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone9.jpg" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone10.png" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone11.png" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone13.png" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
<div></div>
<div>
<div>新品</div>
<img src="static/images/phone/phone14.png" alt="">
<a href="#">小米2s</a>
<span>3299元</span>
</div>
</div>
</div>
</li>
<li><a href="#">電視</a></li>
<li><a href="#">筆記本</a></li>
<li><a href="#">盒子</a></li>
<li><a href="#">新品</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服務(wù)</a></li>
<li><a href="#">社區(qū)</a></li>
<div></div>
</div>
<div>
<input type="text">
<div>
<a href="#">電視新品</a>
<a href="#">618預(yù)熱</a>
</div>
<div><i class="fa fa-search"></i></div>
</div>
</div>
<div></div>
<!-- 商品詳情 -->
<div>
<div>
<div>
<div>
<div>
<b>小米8</b><span>|</span><a href="">小米8 SE</a>
</div>
<div>
<a href="#">概述</a><span>|</span>
<a href="#">圖集</a><span>|</span>
<a href="#">參數(shù)</a><span>|</span>
<a href="#">F碼通道</a><span>|</span>
<a href="#">用戶評(píng)價(jià)</a>
</div>
</div>
</div>
<div></div>
<div>
</div>
<div>
<div>
<h2>紅米6A</h2>
<p>12nm高性能處理器 / 5.45" 小巧全面屏 / 1300萬(wàn)高清相機(jī) / “小楊柳腰”機(jī)身</p>
<span>599</span>
</div>
<div>
<p><i class="fa fa-map-marker"></i>北京 北京市 東城區(qū) 永定門外街道
<a href="#">修改</a></p>
<span>有現(xiàn)貨</span>
</div>
<div>
<h2>選擇版本</h2>
<div class="short_kuang active" data-tit="4GB+64GB 全網(wǎng)通" data-val="599">
<p>4GB+64GB 全網(wǎng)通</p>
<span>599元</span>
</div>
<div data-tit="6GB+64GB 全網(wǎng)通" data-val="699">
<p>6GB+64GB 全網(wǎng)通</p>
<span>699元</span>
</div>
</div>
<div></div>
<div>
<h2>選擇顏色</h2>
<div class="color_kuang active" data-val="金色">
<div><span></span>金色</div>
</div>
<div data-val="深灰">
<div><span style="background:#3c3f43;"></span>深灰</div>
</div>
<div data-val="亮紅">
<div><span style="background:#d93239;"></span>亮紅</div>
</div>
<div data-val="亮藍(lán)">
<div><span style="background:#3871b7;"></span>亮藍(lán)</div>
</div>
</div>
<div></div>
<div>
<div>
<h2>選擇小米提供的保障服務(wù)</h2>
<a href="#">了解保障服務(wù) ></a>
</div>
<div></div>
<div style="border-bottom: none;">
<div>
<span class="fa fa-check-circle"></span>
<img src="static/images/bz.jpg" alt="">
</div>
<div>
<div>意外保障服務(wù)</div>
<p>手機(jī)意外摔落/進(jìn)水/碾壓等損壞</p>
<p><div class="fa fa-check-square"></div><h5>我已閱讀</h5><b>服務(wù)條款</b><span>|</span><b>服務(wù)條款</b></p>
<div val='99'>99元</div>
</div>
</div>
<div>
<div>
<span class="fa fa-check-circle"></span>
<img src="static/images/bz.jpg" alt="">
</div>
<div>
<div>碎屏保障服務(wù)</div>
<p>手機(jī)意外碎屏</p>
<p><div class="fa fa-check-square"></div><h5>我已閱讀</h5><b>服務(wù)條款</b><span>|</span><b>服務(wù)條款</b></p>
<div val="179">179元</div>
</div>
</div>
</div>
<div></div>
<div>
<div id="phoneName">小米8 4GB+64GB 全網(wǎng)通 金色</div>
<div id="phonePrice">599元</div>
<div></div>
<div id="totalPrice">總計(jì)：599元</div>
</div>
<div></div>
<button onclick="location.href='index.html'">加入購(gòu)物車</button>
<p><i class="fa fa-check-circle-o"></i> 7天無(wú)理由退貨 <i class="fa fa-check-circle-o"></i> 15天質(zhì)量問(wèn)題換貨 <i class="fa fa-check-circle-o"></i> 365天保修</p>
</div>
</div>
<div></div>
</div>
<!-- 商品詳情 end-->
</div>
</div>
<div></div>
<!-- 其他信息 -->
<div>
<div>
<p>特別說(shuō)明</p>
<img src="static/images/sm.jpg" alt="">
</div>
<div>
<p>官方微信</p>
<img src="static/images/2.jpg" alt="">
</div>
</div>
<div></div>
<!-- 其他信息 end -->
<!-- 底部 -->
<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天無(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>
<div>
<div>
<div>幫助中心</div>
<a>賬戶管理</a>
<a>購(gòu)物指南</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="tel"><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="">問(wèn)題反饋</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ù)，除特殊說(shuō)明，所有數(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;font-family:Helvetica; }
a{text-decoration: none;cursor:pointer;color:#373737;}
li{list-style:none;}
.clear{clear: both;}
/*頭部樣式*/
.header{width:100%;height:40px;background-color:#333;}
.menu{width:1226px;height:40px;margin:0 auto;}
.menu .left{float: left;}
.menu .right{float: right;}
.menu .right li{float: right;margin-left: 8px;position: relative;}
.menu .right li .text{z-index:999;width:260px;height:90px;background:#fff;font-size: 12px;color: #ccc;padding:10px;display:none;position: absolute;top:40px;right: 0;text-align: center;}
.menu .right li:hover .text{display:block;}
.menu .right li:hover a{color:#ff6a00;background: #fff; }
.menu a{font-size: 12px;color: #ccc;line-height: 40px;}
.menu a:hover{color: #fff;}
.menu .gwc{width: 120px;height: 40px;background: #424242;display:inline-block;text-align: center;line-height: 40px;}
.menu .gwc:hover{background: #fff;color: #ff6a00;}
.menu .gwc i{margin-right: 8px;}
.menu span{font-size: 12px;color: #ccc;margin:0 6px;}
/*主體樣式*/
.main{width:1226px;margin:0 auto;}
.main .detail{
width: 1226px;
height: 500px;
border-top: 1px solid #e0e0e0;
}
/*導(dǎo)航*/
.mainNav{width:1226px;height:66px;margin:10px auto;}
.mainNav_p,.mainNav_ul,.mainNav_s{float:left;}
.mainNav_ul li{font-size:18px;margin:0 8px;line-height: 66px;float: left;}
.mainNav_ul li a{color: #333;}
.mainNav_ul li a:hover{color: #ff6a00;}
.mainNav_s{height:66px;width:312px;float:right;position: relative;}
.mainNav_s input{outline:none;padding:0 10px;height: 50px;width: 228px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;margin: 7px 0;float: left;}
.mainNav_s div{position: absolute;width:120px;top:22px;right:60px;}
.mainNav_s div a{font-size:12px;padding:4px;background:#ebebeb;color: #aaa;}
.mainNav_s div a:hover{background:#ff6a00;color: #fff;}
.mainNav_s .but{cursor:pointer;font-size:22px;line-height:52px;text-align:center;height: 50px;width: 60px;border:1px solid #ccc;margin: 7px 0;position: absolute;top: 0;right: 0;}
.mainNav_s .but:hover{background: #ff6a00;color: #fff;}
/*下拉框*/
.mainNav_ul .mainNav_ul_p{width: 100%;height: 230px;background: #fff;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;position: absolute;left:0;top:116px;display: none;z-index: 999;}
.mainNav_ul li:hover .mainNav_ul_p{display: block;}
.mainNav_ul .mainNav_ul_p .div_p{width: 1226px;height: 230px;margin: 0 auto;}
.mainNav_ul .mainNav_ul_p .div_p_c{width:120px;height:230px;float: left;margin: 0 40px;}
.mainNav_ul .mainNav_ul_p .div_b{width:1px;height:90px;background: #ccc;float: left;margin-top:40px;}
.mainNav_ul .mainNav_ul_p .div_p_c .new{width:60px;height: 18px;border:1px solid #ff6a00;line-height: 20px;text-align: center;margin:10px auto;font-size: 12px;color:#ff6a00;}
.mainNav_ul .mainNav_ul_p .div_p_c img{margin:20px auto;display: block;}
.mainNav_ul .mainNav_ul_p .div_p_c .sp1{height:30px;line-height:30px;display:block;font-size: 14px;text-align:center;color:#333;}
.mainNav_ul .mainNav_ul_p .div_p_c .sp2{height:30px;line-height:30px;display:block;font-size: 14px;text-align:center;color:#ff6a00;}
.mainNav_ul .mainNav_ul_p .div_p_b{border-left: 1px solid #333;width: 2px;height:160px;float: left;}
/*商品詳情*/
.detail_shop .detail_shop_s{
width:100%;
height:65px;
background: #fff;
border-top: 1px solid #ccc;
position:absolute;
left:0;
box-shadow:0 2px 5px #e0e0e0;
}
.detail_shop .detail_shop_s .middle{
width: 1226px;
margin:0 auto;
}
.detail_shop .detail_shop_s .middle .left{
line-height: 66px;
float: left;
font-size: 14px;
}
.detail_shop .detail_shop_s .middle .right{
line-height: 66px;
float:right;
font-size: 14px;
}
.detail_shop .detail_shop_s .middle span{
margin:0 10px;
color:#616161;
}
.detail_shop .detail_shop_s .middle a:hover{
color: #ff6700;
}
.detail_shop .detail_shop_l{
width: 560px;
height: 600px;
margin-top:100px;
float: left;
}
.detail_shop .detail_shop_r{
width: 600px;
margin-top:100px;
float:right;
}
.detail_shop .detail_shop_r .chanpin h2{
font-size: 28px;
color: #000;
font-weight: 100;
font-family: Helvetica;
line-height: 37px;
}
.detail_shop .detail_shop_r .chanpin p{
font-size:14px;
color: #aaa;
}
.detail_shop .detail_shop_r .chanpin span{
font-size: 21px;
color: #ff6700;
font-weight: 100;
line-height: 51px;
display: block;
border-bottom: 1px solid #ccc;
}
.detail_shop .detail_shop_r .adress{
width: 538px;
margin: 40px 0;
border:1px solid #ccc;
background: #fafafa;
padding: 30px;
font-size: 14px;
color: #000;
}
.detail_shop .detail_shop_r .adress p{
margin-bottom: 5px;
}
.detail_shop .detail_shop_r .adress i{
margin-right: 5px;
color: #ccc;
}
.detail_shop .detail_shop_r .adress a{
color: #ff6700;
}
.detail_shop .detail_shop_r .adress span{
color: #ff6700;
}
.detail_shop .detail_shop_r .select h2{
font-size: 18px;
color: #333;
margin:20px 0;
font-weight: 100;
}
.detail_shop .detail_shop_r .select .short_kuang,.detail_shop .detail_shop_r .select .color_kuang{
width: 255px;
height: 50px;
border:1px solid #ccc;
line-height:52px;
padding:0 20px;
float: left;
margin:0 3px 3px 0;&am
Correcting teacher：天蓬老師Correction time：2019-09-29 19:36:31
Teacher's summary：完成的相當(dāng)不錯(cuò), 至少看上去如此, 還有, div中不要直接放文本, 這是很不好的習(xí)慣