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

天貓購(gòu)物車(chē)選中效果

原創(chuàng) 2019-04-17 11:24:13 295
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>仿天貓商城點(diǎn)擊選中商品效果</title><link rel="shortcut icon"  href="static/images/logo.pn

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>仿天貓商城點(diǎn)擊選中商品效果</title>

<link rel="shortcut icon"  href="static/images/logo.png" type="image/x-icon" />

<link rel="stylesheet" href="static/css/style.css" type="text/css">

<script type="text/javascript" src="static/js/jquery.js"></script>

<script type="text/javascript">

$(function(){

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

if($(this).hasClass('check')){

$(this).removeClass('check');

}else{

$(this).addClass('check').siblings('span').removeClass('check');

}

})

})

</script>


</head>

<body>

<div class="top">請(qǐng)選擇信息后加入購(gòu)物車(chē)</div>

<div class="main">

<p class="p1">

<b style="border:0px;">版本</b>

<span id="sp0" class="ed" name="0">ONE A2001</span>

<span id="sp1" class="ed" name="0">ONE A0001</span>

<span id="sp2" class="ed" name="0">ONE A1001</span>

</p>

<p class="p2">

<b style="border:0px;">機(jī)身顏色</b>

<span id="sp3" class="co" name="0">白色</span>

<span id="sp4" class="co" name="0">黑色</span>

<span id="sp5" class="co" name="0">金色</span>

</p>

<p class="p3">

<b style="border:0px;">套餐類(lèi)型</b>

<span id="sp6" class="pa" name="0">標(biāo)配</span>

<span id="sp7" class="pa" name="0">套餐一</span>

<span id="sp8" class="pa" name="0">套餐二</span>

</p>

<p class="p4">

<b style="border:0px;">運(yùn)行內(nèi)存</b>

<span id="sp9" class="ru" name="0">2GB</span>

<span id="sp10" class="ru" name="0">3GB</span>

<span id="sp11" class="ru" name="0">4GB</span>

</p>

<p class="p5">

<b style="border:0px;">機(jī)身內(nèi)存</b>

<span id="sp12" class="me" name="0">16GB</span>

<span id="sp13" class="me" name="0">32GB</span>

<span id="sp14" class="me" name="0">64GB</span>

</p>

<p class="p6">

<b style="border:0px;">產(chǎn)地</b>

<span id="sp15" class="ad" name="0">中國(guó)大陸</span>

<span id="sp15" class="ad" name="0">港澳臺(tái)</span>

</p>

<p class="p7">

<b style="border:0px;">價(jià)格</b>

<span id="sp15" class="ad" name="0">999元搶購(gòu)</span>

</p>

<p class="p8">

<b style="border:0px;">數(shù)量</b>

<input type="text" value="1" style="width:40px;height:26px;">

</p>


<p style="margin-top:30px;margin-left:95px;">

<button class="bu1">加入購(gòu)物車(chē)</button>

<button class="bu2">打開(kāi)購(gòu)物車(chē)</button>

</p>

</div>

<div class="shopCar">

<li style="font-size:14px;background: #C40000;color: white;">您所選商品信息如下:</li>

<div class="sright">

</div>

<div class="kong" style="background:#ccc;width:100%;height:7px;display:none"></div>

<button class="bu3" style="width:80px;height:35px;margin-left:20px;">隱藏購(gòu)物車(chē)</button>

<button class="bu4" style="width:80px;">清空購(gòu)物車(chē)</button>

</div>

</body>

</html>


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

.top {width: 400px;height: 35px;line-height: 35px;text-align:center;margin-top: 50px;border: 1px solid red;border-bottom: 0px;background: #C40000;color: white;}

.main {width: 400px;height: 400px;border: 1px solid red;/*border-top: 0px;*/}

p {width: 400px;height: 26px;margin-top:10px;/*border: 1px solid red;*/}

b {width: 90px;height: 26px;line-height: 26px;text-align: center;font-size: 12px;color:#838383;border: 1px solid #ccc;display: block;float: left;margin-left: 5px;}

span {width: 90px;height: 26px;line-height: 26px;text-align: center;font-size: 12px;color:#838383;border: 1px solid #ccc;display: block;float: left;margin-left: 5px;}

span:hover {cursor: pointer;}

button {width: 120px;height: 35px;background: #C40000;color: white;border: 0px;}

button:hover {cursor: pointer;}

.shopCar {width: 200px;/*height: 400px;*/border: 1px solid red;position: absolute;top: 50px;right: -200px;}

li {width: 200px;height: 26px;line-height: 26px;/*border: 1px solid red;*/margin: 5px auto;text-align: center;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;background: white;}

h4 {width:100%;text-align: center;}

.check{

    width: 88px;

    height: 24px;

    line-height: 24px;

    border: 2px solid red;

    color: red;


}


.change {width:200px;height:220px;border:1px solid red;background: yellow;}

.sc {width: 30px;height: 20px;font-size: 10px;position: relative;top:25px;right:0px;float: right;}

QQ圖片20190417112715.png


批改老師:天蓬老師批改時(shí)間:2019-04-17 14:03:40
老師總結(jié):做得不錯(cuò)喲, 那個(gè)數(shù)量, 是不是還可以居中顯示呢? 再優(yōu)化一下代碼

發(fā)布手記

熱門(mén)詞條