html+js部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的購物車</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
</head>
<body>
<div id="contain">
<div id="banner">
<div class="banner1">
<div class="banner2">
<ul>
<li><img src="img/小房子_03.png"></li>
<li><a href="#">京東首頁</a></li>
<li><i class="fa fa-map-marker" aria-hidden="true"></i></li>
<li>
<option>廣東</option>
</li>
</ul>
</div>
<div class="banner3">
<ul>
<li><a href="#">余生</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
<li><span>|</span></li>
<li><a href="#">我的訂單</a></li>
<li><span>|</span></li>
<li><a href="#">我的京東</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
<li><span>|</span></li>
<li><a href="#">京東會員</a></li>
<li><span>|</span></li>
<li><a href="#">企業采購</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
<li><span>|</span>
<li>
<li><a href="#">客戶服務</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
<li><span>|</span></li>
<li><a href="#">網站導航</a></li>
<li><span>|</span>
<li>
<li><a href="#">手機京東</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="content1">
<div class="logo"><img src="img/京東購物車專案.png"><a href="#">購物車</a></div>
<div class="from">
<input type="text" class="search" value=''>
<span class='photo' title="未選擇取任何檔案">
<img src="camera.png" alt="">
</span>
<button class='button'>
<i>搜索</i>
</button>
</div>
</div>
<div class="content2">
<div class="dl">
<ul>
<li class="sanjiao"><img src="img/三角警告_07.png"></li>
<li class="denglu">你還沒有登錄!請登錄后購物車的商品將保存到你的賬號中</li>
<li><button class="dl1"><i>立即登錄</i></button></li>
</ul>
</div>
</div>
<div class="content3" id="jd_cart">
<div class="jdsp">
<div class="allshopping">
<ul>
<li><em>全部商品</em></li>
<li>
<hr class="underscorecharacter" />
</li>
</ul>
</div>
<div class="region">
<ul>
<li>配送至:</li>
<li>
<select class="area">
<option>廣東省汕頭市龍湖區</option>
</select>
</li>
</ul>
</div>
</div>
<div class="operationbox">
<div class="allcheck">
<input type="checkbox" checked id="checkAll" />全選
</div>
<div class="shopping">商品</div>
<div class="nullbox"></div>
<div class="unitprice">單價</div>
<div class="amount">數量</div>
<div class="subtotal">小計</div>
<div class="system">操作</div>
</div>
</div>
<div id="content5">
<div class="phonebox1">
<div class="check"><input type="checkbox" checked id="checkAll" /></div>
<div class="phonepicture"><img src="img/手機1.png"></div>
<div class="phoneinformation"><a href="#">小米10 Pro 雙模5G手機【下單送豪</br> &ensp; 禮】驍龍865 新品游戲手機小米10pro</a></div>
<div class="phonechoose" title="珍珠白">珍珠白 8+258GB</br>官方標配</div>
<div class="price">￥4699.00</div>
<div class="number">
<button οnclick="calc(this)">-</button>
<span> 1 </span>
<button οnclick="calc(this)">+</button>
</div>
<div class="total">￥4699.00</div>
<div class="opreate"><a href="#">洗掉</a></div>
</div>
<div class="phonebox1">
<div class="check"><input type="checkbox" checked id="checkAll" /></div>
<div class="phonepicture"><img src="img/手機2.png"></div>
<div class="phoneinformation"><a href="#">小米10 5G游戲手機【至高12期分期0</br>首付】鈦銀黑 8G+256G</a></div>
<div class="phonechoose" title="鈦銀黑">鈦銀黑</br>8G+256G</div>
<div class="price">￥3788.00</div>
<div class="number">
<button οnclick="calc(this)">-</button>
<span> 1 </span>
<button οnclick="calc(this)">+</button>
</div>
<div class="total">￥3788.00</div>
<div class="opreate"><a href="#">洗掉</a></div>
</div>
<div class="phonebox1">
<div class="check"><input type="checkbox" checked id="checkAll" /></div>
<div class="phonepicture"><img src="img/手機3.png"></div>
<div class="phoneinformation"><a href="#">Apple 蘋果 iphone 11 手機黃色全網通 128GB</a></div>
<div class="phonechoose" title="黃色">黃色</br>全網通 128GB</div>
<div class="price">￥5489.00</div>
<div class="number">
<button οnclick="calc(this)">-</button>
<span> 1 </span>
<button οnclick="calc(this)">+</button>
</div>
<div class="total">￥5489.00</div>
<div class="opreate"><a href="#">洗掉</a></div>
</div>
<div class="phonebox1">
<div class="check"><input type="checkbox" checked id="checkAll" /></div>
<div class="phonepicture"><img src="img/手機4.png"></div>
<div class="phoneinformation"><a href="#">Apple 蘋果 iphone 11 手機綠色全網通 128GB</a></div>
<div class="phonechoose" title="綠色">綠色</br>全網通 128GB</div>
<div class="price">￥5399.00</div>
<div class="number">
<button οnclick="calc(this)">-</button>
<span> 1 </span>
<button οnclick="calc(this)">+</button>
</div>
<div class="total">￥5399.00</div>
<div class="opreate"><a href="#">洗掉</a></div>
</div>
</div>
<div class="Bottombox">
<div class="bottombox">
<ul>
<li><input type="checkbox" checked id="checkAll" />全選</li>
<li><a href="#">洗掉選中商品</a></li>
<li><a href="#">移到關注</a></li>
<li><a href="#">清理購物車</a></li>
</div>
<div class="rightbottombox">
<div class="select">
已選擇<span>4</span>件商品<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="bottomprice">
總價:<span>￥19375.00</span>
</div>
<div class="settlement">
<button>去結算</button>
</div>
</div>
</div>
</div>
<div id="guessyoulike">
<h2 class="guesswhatyoulike">猜你喜歡</h2>
<hr class="guesswhatyoulike1">

</ul>
<div class="left">
<</div> <div class="right">>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="footer1">
<div class="fourzt">
<ul>
<li><img src="img/多_03.png"></li>
<li><i class="ttf">品類齊全,輕松購物</i></li>
<li><img src="img/快_03.png"></li>
<li><i class="ttf">多倉直發,極速配送</i></li>
<li><img src="img/好_03.png"></li>
<li><i class="ttf">正品行貨,精致服務</i></li>
<li><img src="img/?_03.png"></li>
<li><i class="ttf">天天低價,暢選無憂</i></li>
</ul>
</div>
<hr>
<div class="btbox">
<div class="bt1">
<h2>購物指南</h2>
<ul>
<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>
</ul>
</div>
<div class="bt2">
<h2>配送方式</h2>
<ul>
<li><a href="#">上門自提</a></li>
<li><a href="#">211限時達</a></li>
<li><a href="#">配送服務查詢</a></li>
<li><a href="#">配送費收取標準</a></li>
<li><a href="#">海外配送</a></li>
</ul>
</div>
<div class="bt3">
<h2>支付方式</h2>
<ul>
<li><a href="#">貨到付款</a></li>
<li><a href="#">在線支付</a></li>
<li><a href="#">分期付款</a></li>
<li><a href="#">公司轉賬</a></li>

</ul>
</div>
<div class="bt4">
<h2>售后服務</h2>
<ul>
<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>
</ul>
</div>
<div class="bt5">
<h2>特色服務</h2>
<ul>
<li><a href="#">奪寶島</a></li>
<li><a href="#">DIY裝機</a></li>
<li><a href="#">延保服務</a></li>
<li><a href="#">京東E卡</a></li>
<li><a href="#">京東通信</a></li>
<li><a href="#">京東魚智能</a></li>
</ul>
</div>
</div>
<hr>
<div class="dxbox">
<div class="dbdht">
<ul>
<li><a href="#">關于我們</a></li>
<li><span>|</span></li>
<li><a href="#">聯系我們</a></li>
<li><span>|</span></li>
<li><a href="#">聯系客服</a></li>
<li><span>|</span></li>
<li><a href="#">合作招商</a></li>
<li><span>|</span></li>
<li><a href="#">商家幫助</a></li>
<li><span>|</span></li>
<li><a href="#">營銷中心</a></li>
<li><span>|</span></li>
<li><a href="#">手機京東</a></li>
<li><span>|</span></li>
<li><a href="#">友情鏈接</a></li>
<li><span>|</span></li>
<li><a href="#">銷售聯盟</a></li>
<li><span>|</span></li>
<li><a href="#">京東社區</a></li>
<li><span>|</span></li>
<li><a href="#">風險監測</a></li>
<li><span>|</span></li>
<li><a href="#">隱私政策</a></li>
<li><span>|</span></li>
<li><a href="#">京東公益</a></li>
<li><span>|</span></li>
<li><a href="#">English Site</a></li>
<li><span>|</span></li>
<li><a href="#">Media&ensp;&&ensp;IR</a></li>
</ul>
</div>
<div class="dbdht1">
<ul>
<li><a href="#">京公網安備&ensp;11000002000088號</a></li>
<li><span>|</span></li>
<li>京ICP證070359號</li>
<li><span>|</span></li>
<li><a href="#">互聯網藥品資訊服務資格證編號(京)-經營性-2014-0008</a></li>
<li><span>|</span></li>
<li>新出發京零字第大120007號</li>
</ul>
</div>
<div class="dbdht2">
<ul>
<li>互聯網出版許可證編號新出網證(京)字150號</li>
<li><span>|</span></li>
<li><a href="#">出版物經營許可證</a></li>
<li><span>|</span></li>
<li><a href="#">網路文化經營許可證京網文[2014]2148-348號</a></li>
<li><span>|</span></li>
<li>違法和不良資訊舉報電話：4006561155</li>
<li><span>|</span></li>
</ul>
</div>
<div class="dbdht3">
<ul>
<li>
<p>Copyright ? 2004-2020京東JD.com著作權所有</p>
</li>
<li><span>|</span></li>
<li>消費者維權熱線：4006067733 <a href="#">經營證照 </a></li>
<li><span>|</span></li>
<li> (京)網械平臺備字(2018)第00003號 </li>
<li><span>|</span></li>
<li><a href="#"> 營業執照</a></li>

</ul>
</div>
<div class="dbdht4">
<ul>
<li><img src="img/國旗_03.png"></li>
</ul>
</div>
<div class="dbdht5">
<ul>
<li>京東旗下網站： <a href="#">京東錢包</a>
<li>
<li><span>|</span></li>
<li> <a href="#">京東智聯云</a></li>
</ul>
</div>
<div class="dbdht6">
<ul>
<ul>
<li><img src="img/網站_03.png"></li>
<li class="zt">可信網站</br>信用評價</li>
<li><img src="img/網警_03.png"></li>
<li class="zt">網路警察</br>提醒你</li>
<li><img src="img/誠信_03.png"></li>
<li class="zt1">誠信網站</li>
<li><img src="img/互聯_03.png"></li>
<li class="zt">網上有害信</br>息舉報專區</li>
<li><img src="img/下載_03.png"></li>
<li class="zt">網路舉報</br>APP下載</li>

</ul>
</div>
</div>
</div>

</div>
</div>
</body>
<script type="text/javascript">
//手動輪播
//獲取左右按鈕，加單擊事件
var guessyoulike = document.getElementById("guessyoulike");
var leftDiv = guessyoulike.getElementsByClassName("left")[0];
var rightDiv = guessyoulike.getElementsByClassName("right")[0];
var ul = document.getElementById("goodlist");

//向左移動
var timer = null;
leftDiv.onclick = leftMove;

}, 20); //每隔20秒呼叫一次函式
}
//向右移動
rightDiv.onclick = rightMove;

//添加商品到購物車
//1.自動生成商品串列
//商品資料
var goodsArr = [{
imgUrl: "img/phone.jpg",
name: "華為(HUAWEI)榮耀9Play3",
price: "868"
},
{
imgUrl: "img/phone2.jpg",
name: "天語H5全面屏",
price: "668"
},
{
imgUrl: "img/phone3.jpg",
name: "OPPO Find X2手機",
price: "4999"
},
{
imgUrl: "img/phone4.jpg",
name: "vivo X50 5G手機",
price: "3498"
},
{
imgUrl: "img/phone5.jpg",
name: "三星 Galaxy A90",
price: "2699"
},
{
imgUrl: "img/phone6.jpg",
name: "Redmi 10X天璣820",
price: "1799"
},
{
imgUrl: "img/phone7.jpg",
name: "vivo S5 8GB+128GB",
price: "1998"
},
{
imgUrl: "img/phone8.jpg",
name: "vivo X30 雙模5G",
price: "2998"
},
];
//把以上商品放入ul串列
//獲取存放的商品ul
var goodlist = document.getElementById("goodlist");
//遍歷陣列通過函式來進行處理
//創建li
goodsArr.forEach(function(el, idx) {
var li = document.createElement("li");
goodlist.appendChild(li);
//創建li中的內容
var htmlStr = "<div><img src='" + el.imgUrl + "'></div>"
htmlStr += "<div>" + el.name + "</div>";
htmlStr += "<div>¥" + el.price + "</div>";
htmlStr += "<div οnclick='addCart(" + idx + ")'><a href='#'>添加到購物車</a></div>";
li.innerHTML = htmlStr;
})

//實作商品到購物車
function addCart(i) {
//一.如果添加的商品已經在購物車存在，則在數量上增加即可
//通過要添加的商品名稱與購物車商品名稱對比
//如果有相同的名稱，則表示此商品已經添加過
//(1)獲取購物車中所有的商品名稱
//(a)獲取content5所有行
var content5 = document.getElementById("content5");
var alldiv = content5.children;
//console.log(alldiv);
//(b)獲取所有商品名稱
var allGoodsNameArr = [];
for (var k = 0; k < alldiv.length; k++) {
//console.log(k);
//console.log(alldiv[k]);
allGoodsNameArr.push(alldiv[k].children[2].innerText);
//console.log(alldiv[k].children.length);
}
//(2)查找要添加的商品名稱是否存在于購物車
var index = allGoodsNameArr.findIndex(function(v) {
return v == goodsArr[i].name;
}); //回傳-1,表示在陣列中不存在要比較的物件
if (index != -1) { //如果添加的商品已經存在于購物車中
//獲取已添加商品中所在盒子中的數量加1
var n = alldiv[index].getElementsByTagName("span")[0].innerText;
n++;
alldiv[index].getElementsByTagName("span")[0].innerText = n;
//更新小計單價*數量
var price = alldiv[index].getElementsByClassName('price')[0].innerText.substr(1);
console.log(price);
alldiv[index].getElementsByClassName('total')[0].innerHTML = "¥" + n * price;

//更新總計
total();
return; //不再執行下面的代碼，即購物車中不再添加新行
}
var content5 = document.getElementById("content5");
var newDiv = document.createElement("div");
var phonebox1 = newDiv.classList.add("phonebox1");
content5.appendChild(newDiv);
//二.如果購物車沒有此商品，則商品添加此商品到購物車中

}

//洗掉
var content5 = document.getElementById("content5");
var allA = content5.getElementsByTagName("a"); //拿到所有a
//console.log(allA);
for (var i = 1; i < allA.length; i += 2) { //遍歷奇數a
allA[i].onclick = function() {
this.parentNode.parentNode.remove(); //洗掉整個盒子
total(); //重新總計
//由每一個盒子復選框狀態決定全選按鈕狀態
//把復選框集合轉成陣列
var arr = Array.from(allCheckbox);
//只要陣列中元素的checked值有一個為假，every函式的回傳值為假
checkAll.checked = arr.every(function(v) {
return v.checked;
});
//洗掉全部商品后全選按鈕不再被選中
if (allCheckbox.length === 0) {
checkAll.checked = false;
}
}
}
//獲取全選按鈕復選框
var checkAll = document.getElementById("checkAll");

//全選和全不選功能實作
checkAll.onchange = function() {
for (var i = 0; i < allCheckbox.length; i++) {
allCheckbox[i].checked = checkAll.checked;
}
total();
}

//*****************01
function total() {

//三.總計
var content5 = document.getElementById("content5");
var alldiv = content5.children;
var allCheckbox = content5.getElementsByTagName("input"); //獲取盒子中所有的復選框
//console.log(allCheckbox);
var total = 0;
for (var i = 0; i < alldiv.length; i++) {
//累加復選框選中的盒子進行小計
if (allCheckbox[i].checked) { //復選框選中狀態
total += parseFloat(alldiv[i].children[6].innerText.substr(1));
}
}
//console.log(total);
//找到最后一個總計
var content = document.getElementById("content");
var Bottombox = content.getElementsByClassName("Bottombox")[0];
var rightbottombox = Bottombox.getElementsByClassName("rightbottombox")[0];
var bottomprice = rightbottombox.getElementsByClassName("bottomprice")[0];
//console.log(bottomprice);
bottomprice.innerHTML = "總價" + "¥" + total.toFixed(2);
}

二.css部分

*{
margin: 0px;
padding: 0px;
}
body{
font-size:15px ;
font-family: "黑體";
}
ul li{
list-style: none;
}
ul li a{
text-decoration: none;
}
#contain{
width: 1920px;
}
#banner{
width: 1920px;
height: 40px;
background: lightgrey;

}
#content{
width: 1250px;
margin: 0px auto;
}
#footer{
width: 1920px;
height: 840px;
background: #EEEEEE;
display: flex;
align-items: center;
justify-content: center;
}
.banner1{
width: 1250px;
height: 40px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.banner2{
width: 162px;
height: 25px;

}
.banner3{
width: 864px;
height: 25px;

}
.content1{
width: 1250px;
height: 140px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 270px;
height: 80px;
font-size: 25px;

}
.logo a{
text-decoration: none;
color: black;
position: relative;
bottom: 15px;
}
.from{
width: 420px;
height: 34px;
border: 3px solid #e2231a;
}
.content2{
width: 1250px;
height: 60px;
background: lightgoldenrodyellow;
display: flex;
align-items: center;
border: 1px solid yellow;

}
.content3{
width: 1250px;
}
#guessyoulike{
width:1250px ;
height: 466px;
margin: 0px auto;
margin-top: 20px;
overflow: scroll;
position: relative;
}
.footer1{
width: 1250px;
height: 760px;

}
.fourzt{
width: 1110px;
height: 60px;
margin: 0px auto;
margin-top: 20px;
}
.btbox{
width: 1110px;
height: 320px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: flex-start;
}
.dxbox{
width: 1250px;
height: 300px;

}
.bt1{
width: 105px;
height: 200px;

}
.bt2{
width: 115px;
height: 200px;
margin-left:130px ;
}
.bt3{
width: 105px;
height: 200px;

margin-left:110px ;
}
.bt4{
width: 105px;
height: 200px;

margin-left: 140px;
}
.bt5{
width: 100px;
height: 200px;

margin-left: 145px;
}
.dbdht{
width: 1250px;
height: 40px;
}
.dbdht1{
width: 960px;
height: 30px;
margin: 0px auto;
}
.dbdht2{
width: 1054px;
height: 30px;
margin: 0px auto;
}
.dbdht3{
width: 980px;
height: 30px;
margin: 0px auto;
}
.dbdht4{
width: 809px;
height: 30px;
margin: 0px auto;
}
.dbdht5{
width: 687px;
height: 50px;
margin:0px auto;
}
.banner2 ul li{
float: left;

}
.banner2 ul li a:hover{
color: red;
}
.banner2 ul li a{
color: lightslategrey;
}
.banner2 ul{
margin-top:5px ;
}
.banner3 ul li{
float: left;
}
.banner3 ul{
margin-left: 300px;
margin-top: 5px;
color: grey;
}
.banner3 ul li a:hover{
color: red;
}
.banner3 ul li a{
color: grey;
}
.search{
width: 365px;
height: 34px;
border: 1px solid transparent;
background: transparent;
line-height: 34px;
overflow: hidden;
}
.button{
width: 58px;
height: 34px;
background: #E2231A;
border: 1px solid transparent;
outline: none;
cursor: pointer;
position: absolute;
top: 93px;
right: 315px;
}
button:hover{
background-color:#c81623 ;
}
.dl{
width: 700px;
height: 32px;
margin-left: 50px;
}
.dl1{
width: 73px;
height: 30px;
background: #C81623;
}
.dl1:hover{
color: red;
}
.dl ul li{
float: left;
}
.sanjiao{
margin-top:10px ;
}
.denglu{
font-size: 20px;
color: darkorange;

}
.fourzt ul li{
float: left;
font-size:20px ;
color: black;
}
.bt1 ul li a:hover{
color: red;
}
.bt1 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt1 ul li{
padding-top: 5px;
}
h2{
color: #777;
}
.bt2 ul li a:hover{
color: red;
}
.bt2 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt2 ul li{
padding-top: 5px;
}
.bt3 ul li a:hover{
color: red;
}
.bt3 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt3 ul li{
padding-top: 5px;
}
.bt4 ul li a:hover{
color: red;
}
.bt4 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt4 ul li{
padding-top: 5px;
}
.bt5 ul li a:hover{
color: red;
}
.bt5 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt5 ul li{
padding-top: 5px;
}
.dbdht ul li{
float: left;
margin-top: 10px;
margin-left:5px ;
}
.dbdht ul li a:hover{
color: red;
}
.dbdht ul li a{
color: grey;
font-size: 15px;
}
span{
color: grey;
}
.dbdht1 ul li{
float: left;
margin-top:5px ;
color: grey;
padding-right: 5px;
}
.dbdht1 ul li a{
color: grey;
}
.dbdht1 ul li a:hover{
color: red;
}
.dbdht2 ul li{
float: left;
margin-top:5px ;
color: grey;
padding-right: 5px;
}
.dbdht2 ul li a{
color: grey;
}
.dbdht2 ul li a:hover{
color: red;
}
.dbdht3 ul li{
float: left;
padding-right: 5px;
color: grey;
margin-top: 5px;
}
.dbdht3 ul li a{
color: grey;
}
.dbdht3 ul li a:hover{
color: red;
}
.dbdht3 ul li p{
margin-top: -2px;
}
.dbdht5 ul li{
float: left;
padding-right: 5px;
color: grey;
margin-top: 5px;
}
.dbdht5 ul li a{
color: grey;
}
.dbdht5 ul li a:hover{
color: red;
}
.dbdht5 ul{
margin-left:150px;
}
.dbdht6 ul li{
float: left;
}
.dbdht6 {
width: 686px;
height: 50px;
margin: 0px auto;
}
.zt{
position: relative;
bottom: 2px;
color: dimgrey;
padding-right: 20px;
}
.zt1{
position: relative;
top: 5px;
color: dimgrey;
padding-right: 20px;
}
h3{
margin-top: 10px;
padding-left:10px ;
padding-right: 10px;
}
.sp a{
color: red;
font-size: 20px;
text-decoration: none;

}
.sp em{
font-style:normal ;
display: block;
line-height:40px ;
}
.sp1 hr{
border-bottom:1px solid red ;
margin-top: 8px;
}
.dq ul li{
float: left;
font-size: 18px;

}
.dq1{
width: 220px;
height: 27px;
margin-top: -2px;
font-size: 17px;

}
.dq2{
margin-left:16px ;
}
.jdsp{
width: 1250px;
height: 53px;
display: flex;
align-items: center;
justify-content: space-between;
}
.operationbox{
width: 1250px;
height: 52px;
display: flex;
align-items: center;
background: lightgrey;
}
.phonebox{
width: 1250px;
height: 272px;
background: #FFFF00;
display: flex;
align-items: center;
border:2px solid ;
border-color:grey mintcream mintcream mintcream;
}
.phonebox1{
width: 1250px;
height: 272px;

border:2px solid ;
border-color:grey mintcream mintcream mintcream;
display: flex;
align-items: center;

}

.Bottombox{
width: 1250px;
height: 69px;
border: 1px solid white;
display: flex;
align-items: center;
justify-content: space-between;
}
.allshopping{
width: 110px;
height: 40px;
font-size: 20px;
line-height: 40px;
}
.allshopping ul li{
color: red;
}
.underscorecharacter{
margin-top:4px ;
border-color: red;
}
em,i,u{
font-style: normal;
}
.ttf{
position: relative;
top: 5px;
}
.fourzt ul li{
font-size: 25px;
color: #000000;
}
.region{
width: 260px;
height: 40px;
font-size: 15px;
margin-top: 10px;
line-height: 30px;

}
.region ul li{
float: left;
}
.area{
width: 190px;
height: 31px;
}
.allcheck{
text-align: center;
width: 133px;
height: 32px;
line-height: 25px;
}
.shopping{
width: 208px;
height: 32px;
line-height: 27px;
text-align: center;
}
.nullbox{
width: 300px;
height: 32px;
}
.unitprice{
width: 160px;
height: 32px;
text-align: right;
line-height: 25px;
}
.amount{
width: 140px;
height: 32px;
text-align: center;
line-height: 25px;
}
.subtotal{
width: 140px;
height: 32px;
text-align: right;
line-height:25px ;
}
.system{
width: 75px;
height: 32px;
line-height: 25px;
text-align: right;
}
.check{
width: 16px;
height: 100px;
text-align: right;
margin-left: 40px;
}
.phonepicture{
width: 142px;
height: 100px;
text-align: center;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: red;
}
.phoneinformation{
width: 300px;
height: 100px;
text-align: center;
}
.phonechoose{
width: 250px;
height: 100px;
}
.price{
width: 100px;
height: 100px;
}
.number{
width: 180px;
height: 100px;

}
.total{
width:98px ;
height: 100px;
}
.opreate{
height: 100px;
}
.bottombox{
width: 343px;
height: 27px;
text-align: center;
}
.bottombox ul li{
float: left;
padding-left: 5px;
padding-top: 5px;
}
.bottombox ul{
margin-left: 43px;
}
.rightbottombox{
width: 490px;
height: 68px;
display: flex;
}
.select{
height: 69px;
}
.bottomprice{
margin-left: 20px;
font-size: 30px;
color: grey;

}
.bottomprice span{
color: red;
}
.settlement button{
position: relative;
left: 5px;
margin-left:10px;
padding:20px;
padding-left:20px;
width:120px;
background:#F00;
font-size:18px;
font-weight: 800;
color:#FFF

}
.guesswhatyoulike{
color: red;
}
.guesswhatyoulike1{
width: 90px;
border-color:red ;
}
#goodlist li{
float: left;
width: 280px;
height: 360px;
border: 1px dashed #CACACA;
margin-top: 5px;
}
.phonechoose1{
width: 300px;
height: 100px;
}
#goodlist{
width: 2260px;
height: 400px;
border: 1px dashed #cacaca;
position: absolute;
margin-top: 2px;
}
#guessyoulike .left,#guessyoulike .right{
position: absolute;
width: 40px;
height: 100px;
line-height: 100px;
background-color: lightgray;
top: 100px;
font-size: 40px;
display: none;
}
#guessyoulike .left{
left: 0;
}
#guessyoulike .right{
right: 0;
text-align: center;

}
#goodlistdiv{
width:1130px ;
height: 370px;
margin-left: 46px;
margin-right: 46px;
position: absolute;
overflow: hidden;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/231017.html

標籤：其他

上一篇：瀏覽器渲染網頁程序

下一篇：CSS3簡易切割輪播圖

京東購物車（html+css+js）

html+js部分