天堂8在线新版官网,精品国产av一区二区三区

abstract：小米商城（商品詳情頁面布局HTML部分）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>紅米6A立即購買-小米商城</title><link rel="shortcut icon"

小米商城（商品詳情頁面布局HTML部分）

<!DOCTYPE html>

<head>

<title>紅米6A立即購買-小米商城</title>

</head>

<body>

<li><a href="#">小愛分享平臺</a><span>|</span></li>

<li><a href="#">SelectRegion</a></li>

</ul>

<ul>

<div>購物車中還沒有商品，趕緊選購吧!</div>

</li>

</ul>

</div>

</div>

<li>小米手機(jī)

</li>

</ul>

</form>

</div>

</div>

</div>

</div>

<p>12nm高性能處理器 / 5.45" 小巧全面屏 / 1300萬高清相機(jī) / "小楊柳腰"機(jī)身</p>

<span>北京   北京市   東城區(qū)   永定門外街道 <a href="" style="color: #ff6700;"> 修改</a> </span><br>

</div>

</div>

</div>

<p>選擇小米提供的保障服務(wù)</p>

<a href="#">了解保障服務(wù)</a>

</div>

<p style="font-size: 18px; color: #333;">意外保障服務(wù)</p>

<p>手機(jī)意外摔落/進(jìn)水/碾壓等損壞</p>

</div>

<p style="font-size: 18px; color: #333;">碎屏保障服務(wù)</p>

</div>

<div>

</div>

</div>

<div class="shop_detail_cart">加入購物車</div>

<p><i class="fa fa-check-circle-o"></i> 7天無理由退貨 <i class="fa fa-check-circle-o"></i> 15天質(zhì)量問題換貨 <i class="fa fa-check-circle-o"></i> 365天保修 </p>

</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-map-marker"></i>520余家售后網(wǎng)點(diǎn)</a>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<p class="time">周一至周日 8:00-18:00<br>(僅收市話費(fèi))</p>

</div>

</div>

</div>

<ul>

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

<li>Select Region</li>

</ul>

</div>

京ICP證110507號

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

<br>

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

</div>

</div>

探索黑科技，小米為發(fā)燒而生!

</div>

</body>

</html>

小米商城（商品詳情頁面布局CSS部分）

* {margin: 0px; padding: 0px;}

li {list-style: none;}

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

h1,h2,h3,h4,h5,h6 {font-weight: 300;}

.clear {clear: both;}

.detail {width: 100%; height: 65px; border-top: 1px solid #ccc; line-height: 65px; box-shadow: -3px 5px 10px #eee;}

.detail_left {float: left;}

.detail_right {float: right;}

.detail a {font-size: 10px; color: #444; display: inline-block;}

.detail span {border-left: 2px solid #ccc; height: 12px; margin: 0px 7px; display: inline-block;}

.shop_detail {width: 1226px; margin: 30px auto;}

.shop_detail_pic {width: 560px; height: 600px; float: left; margin-right: 30px;}

.shop_detail_menu {width: 600px; float: right;}

.shop_detail_menu h1 {font-size: 27px;}

.shop_detail_menu h2 {color: #ff6700; font-size: 20px; border-bottom: 1px solid #ccc; height: 50px; line-height: 50px;}

.shop_detail_menu p {font-size: 13px; color: #ccc;}

.detail_map {width: 558px; border: 1px solid #ccc; background: #fafafa;padding: 30px 10px 30px 30px; line-height: 20px; margin: 30px 0px; font-size: 14px;}

.shop_detail_much, .shop_detail_color {width: 600px; }

/* jQurery中替換版本的class樣式 */

.shop_detail_much .checked {border: 1px solid #ff6700;}

.shop_detail_much p {font-size: 18px; color: #333; margin-bottom: 15px;}

.shop_detail_much div {font-size: 15px; padding: 0px 20px;float: left; width: 255px;height: 50px; line-height: 50px;border: 1px solid #ccc;}

.shop_detail_much span {float: right; color: #ccc;}

.shop_detail_color p {font-size: 18px; color: #333; margin: 15px 0px;}

.shop_detail_color div {font-size: 15px; padding: 0px 20px;float: left; width: 255px;height: 50px; line-height: 50px;border: 1px solid #ccc; text-align: center;}

.shop_detail_color span {display: inline-block; width: 16px; height: 16px; border-radius: 8px; margin-right: 10px;}

/* jQuery中替換顏色的class樣式 */

.shop_detail_color .checked {border: 1px solid #ff6700;}

.shop_detail_bz0 p { font-size: 18px; color: #333; margin: 20px 0px;float: left;}

.shop_detail_bz0 a {float: right; color: #ff6700; margin: 27px 0px; font-size: 13px;}

.shop_detail_bz1 {border: 1px solid #ccc; width: 598px; height: 150px; }

.shop_detail_bz1 span {float: left; width: 10px; height: 10px; line-height: 10px; display: inline-block; border-radius: 6px; margin: 60px 0px; margin-left: 40px;}

.shop_detail_bz1 img {float: left; margin: 50px 20px;}

.shop_detail_1 {margin: 40px 0px;}

.shop_detail_1 p {margin-bottom: 10px;}

.shop_detail_1 b {width: 10px; height: 10px; line-height: 10px; display: inline-block;}

.shop_detail_1 span {float: right; margin: 0px;margin-right: 20px; color: #aaa; width: 50px;}

.shop_detail_button {color: rgba(0,0,0,0); border: 1px solid #ccc;}

/* jQuery中選中服務(wù)的class樣式 */

.shop_detail_bz1 .checked {color: #ff6700;}

.shop_detail_zj {width: 600px; height: 130px; background: #f9f9fa; margin-top: 30px; }

.shop_detail_zj div {margin: 0px 30px 20px;width: 540px; height: 50px; line-height: 50px;}

.shop_detail_zj p {color: #333; float: left; font-size: 15px;}

.shop_detail_zj span {color: #333; float: right; font-size: 15px;}

.shop_detail_cart {width: 300px; height: 50px; text-align: center; line-height: 50px; background: #ff6700; font-size: 18px; margin-top: 30px; color: #fff;}

.shop_detail_cart+p {font-size: 15px; margin: 20px 0px;}

.detail_content {background: #f9f9fa;}

.detail_content_1 {margin: 0px auto; width: 1226px; padding: 20px 0px;}

小米商城（商品詳情頁面布局jQuery部分）

// 使用替換class名的方法

$(function() {

//默認(rèn)選中第一個(gè)版本和第一個(gè)顏色

$('.detail_much_left').eq(0).attr('class','detail_much_left checked')

$('.detail_color_left').eq(0).attr('class','detail_color_left checked')

//點(diǎn)擊選中其它版本

$('.detail_much_left').click(function(){

$('.detail_much_left').attr('class','detail_much_left');

$(this).attr('class','detail_much_left checked');

updateTotalPrice();

})

// 點(diǎn)擊選中其它顏色

$('.detail_color_left').click(function(){

$('.detail_color_left').attr('class','detail_color_left');

$(this).attr('class','detail_color_left checked');

})

//選中小米提供的保障服務(wù)

$('.shop_detail_bz1').click(function(){

var nowcircleclass=$(this).find('.fa-check-circle').attr('class');//獲取到現(xiàn)在的class名

var nowclass= $(this).find('.fa-check-square').attr('class');

if(nowcircleclass.indexOf('checked')>0) {

//如果被選中，就移除選中

nowcircleclass=nowcircleclass.replace('checked','');

nowclass=nowclass.replace('checked','');

$(this).find('.fa-check-circle').attr('class',nowcircleclass);

$(this).find('.fa-check-square').attr('class',nowclass);

}else {

$(this).find('.fa-check-circle').attr('class',nowcircleclass+'checked');

$(this).find('.fa-check-square').attr('class',nowclass+'checked');

}

updateTotalPrice();

})

//計(jì)算總價(jià)

function updateTotalPrice(){

//獲取選中的版本的價(jià)格

var bbPrice=$(".detail_much_left[class$='checked']").find('span').attr('data-val')*1;

//獲取選中的服務(wù)的價(jià)格

var svPrice=0;

var svSpan=$(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]');

for(var i=0; i<svSpan.length; i++){

svPrice += svSpan[i].getAttribute('data-val')*1;

}

var TotalPrice=bbPrice+svPrice;

$('#totalPrice').html('總計(jì)  :  ' +TotalPrice+'元');

$('#phonePrice').html(bbPrice+'元');

}

})

Correcting teacher：西門大官人Correction time：2019-04-01 10:07:53
Teacher's summary：作業(yè)寫的不錯(cuò)，樣式命名基本做到見名知意，js代碼結(jié)構(gòu)清晰

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

小米商城（商品詳情頁面布局及jQuery選中和價(jià)格統(tǒng)計(jì)效果）

Popular Entries