制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价
整体页面
购物车布局html
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"
<div class="cart-body">
<!-- 商店 -->
<div class="shop">
<!-- 商店内容全选 -->
<div class="cart-checkbox">
<input type="checkbox" name="checkShop" class="jdcheckbox" onclick="jdcheckAll(this)"/>
</div>
<!-- 商店名 -->
<span class="shop-txt">
<a href="#" class="shop-name" target="_blank">
炊大皇水具旗舰店
</a>
<!-- 咨询背景 -->
<div class="shop-im"></div>
</span>
</div>
<div class="cart-item-list">
<div class="item-item" id="1001">
<div class="item-form">
<div class="base p-checkbox">
<input type="checkbox" name="checkItem" class="jdcheckbox" onclick="goods()">
</div>
<!-- 选择的商品图片及介绍 -->
<div class="base p-goods">
<div class="goods-item">
<!-- 商品图片 -->
<div class="p-img">
<a href="#" title="炊大皇（COOKER KING）保温杯316不锈钢带吸管男女小学生儿童水杯双盖大肚杯喝水杯子 蓝色580ml【含公仔】">
<img src="img/p-img1.jpeg" alt="#" />
</a>
</div>
<!-- 商品介绍 -->
<div class="p-txt">
<div class="p-name">
<a href="#" target="_blank" title="炊大皇（COOKER KING）保温杯316不锈钢带吸管男女小学生儿童水杯双盖大肚杯喝水杯子 蓝色580ml【含公仔】">炊大皇（COOKER KING）保温杯316不锈钢带吸管男女小学生儿童水杯双盖大肚杯喝水杯子
蓝色580ml【含公仔】</a>
</div>
</div>
</div>
</div>
<!-- 客户所选择的商品款式 -->
<div class="base p-props">
<!-- 款式名称 -->
<div class="props-txt">
<span>蓝色580ml【含公仔】</span>
</div>
</div>
<!-- 商品单价 -->
<div class="base p-price">
￥<span class="p-price-num">89.90</span>
</div>
<!-- 商品数量 -->
<div class="base p-quantity">
<div class="cart-number quantity">
<button class="cart-number-minus" value="-" onclick="mius(this)">-</button>
<div class="cart-input">
<input class="cart-input" min="1" max="100" value="1" />
</div>
<button class="cart-number-add" value="+" onclick="add(this)">+</button>
</div>
<p class="ac inventory ">有货</p>
</div>
<!-- 商品总价 -->
<div class="base p-sum">
<strong>¥89.90</strong>
</div>
<!-- 商品操作 -->
<div class="base p-ops">
<a href="#" class="p-ops-item" onclick="del()">删除</a>
<a href="#" class="p-ops-item" onclick="attention()">移入关注</a>
</div>
</div>
<div class="product-extra block-b"></div>
</div>
</div>
</div>点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量
首先是实现全选功能，给全选复选框填上一个onclick点击事件，分别对应选中商家和商品的两个函数
<div class="column t-checkbox">
<div class="cart-checkbox">
<input type="checkbox" name="selcet-all" class="jdcheckbox" id="checkALL1" onclick="checkAll(this),jdcheckAll(this)"/>
</div>
全选
</div>JS函数
function checkAll(obj){
//获取所有的商家
var checks = document.getElementsByName("checkShop");
//循环遍历
for(var i = 0;i < checks.length;i++){
checks[i].checked = obj.checked;
}
}
function jdcheckAll(th){
//获取所有的商品
var checkitems =document.getElementsByName("checkItem");
//为被选中的商品添加flag
var flag = th.checked;
for(var i in checkitems){
checkitems[i].checked=flag;
}
//调用goods()
goods();
}为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致
<div class="base p-checkbox">
<input type="checkbox" name="checkItem" class="jdcheckbox" onclick="goods()">
</div>JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量
function goods(){
// 获取所有商品单选框
var selected = document.getElementsByName("checkItem");
// 获取商品总价
var price =document.getElementsByClassName("p-sum");
var sum = 0;
var flag = true;
var amount = 0;
for(var i = 0;i<selected.length;i++){
// 判断商品是否被选中
if( !selected[i].checked){
flag = false;
}else{
// 选择商品数量
amount +=1;
// 获取标签中的内容
var priceall = price[i].firstElementChild.innerHTML;
// 将字符串转化为数字，采用indexOf去掉￥
sum += parseFloat((priceall.substring(priceall.indexOf("¥")+1)));
}
}
checkALL.checked = flag;
checkALL1.checked = flag;
// 打印商品数量
document.getElementById("amountall").innerHTML = amount;
// 打印总价
document.getElementById("allsum").innerHTML = "¥" + sum.toFixed(2);
}商品总价及已选择商品种类数量html部分
<div class="price-sum">
<div class="price-sum-amount">
<div class="price-show">
<span class="txt">总价:</span>
<span class="price priceShow" >
<em id="allsum">￥0.00</em>
</span>
<b class="price-tips"><img src="img/price.png" alt="" /></b>
</div>
<span class="amount-sum">
已选择
<em id="amountall">0</em>
件商品
<b class="up"></b>
</span>
</div>
<div class="price-sum-extra"></div>
</div>实现商品数量的增减，并当数量等于1时点击减弹出以下对话框
html部分
<!-- 商品数量 -->
<div class="base p-quantity">
<div class="cart-number quantity">
<button class="cart-number-minus" value="-" onclick="mius(this)">-</button>
<div class="cart-input">
<input class="cart-input" min="1" max="100" value="1" />
</div>
<button class="cart-number-add" value="+" onclick="add(this)">+</button>
</div>
<p class="ac inventory ">有货</p>
</div>js部分
// 数量增加
function add(obj){
//获取文本框内的value
var num = obj.previousElementSibling.firstElementChild.value;
//每次点击“+”，数值加一
num++ ;
obj.previousElementSibling.firstElementChild.value = num;
// 获取单价
var price =parseFloat(obj.parentNode.parentNode.previousElementSibling.firstElementChild.innerHTML);
//小计
var subPrice = price * num;
obj.parentNode.parentNode.nextElementSibling.firstElementChild.innerHTML = "¥"+subPrice.toFixed(2);
goods();
}
// 数量减少
function mius(obj){
var num = obj.nextElementSibling.firstElementChild.value;
//每次点击“-”，数值加一
num-- ;
if(num<1){
alert("数量不能小于1");
return ;
}
obj.nextElementSibling.firstElementChild.value = num;
// 获取单价
var price =parseFloat(obj.parentNode.parentNode.previousElementSibling.firstElementChild.innerHTML);
//小计
var subPrice = price * num;
obj.parentNode.parentNode.nextElementSibling.firstElementChild.innerHTML = "¥"+subPrice.toFixed(2);
goods();
}html完整代码（代码中某些功能只做出展示，未实现其功能）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
<section>
<!-- 商品部分框架 -->
<div class="third">
<!-- 标题框 -->
<div class="cart-thead">
<div class="column t-checkbox">
<div class="cart-checkbox">
<input type="checkbox" name="selcet-all" class="jdcheckbox" id="checkALL1"
onclick="checkAll(this),jdcheckAll(this)" />
</div>
全选
</div>
<div class="column t-goods">商品</div>
<div class="column t-props"> </div>
<div class="column t-price">单价</div>
<div class="column t-quantity">数量</div>
<div class="column t-sum">小计</div>
<div class="column t-action">操作</div>
</div>
<!-- 商品内容 -->
<div class="cart-body">
<!-- 商店 -->
<div class="shop">
<!-- 商店内容全选 -->
<div class="cart-checkbox">
<input type="checkbox" name="checkShop" class="jdcheckbox" onclick="jdcheckAll(this)" />
</div>
<!-- 商店名 -->
<span class="shop-txt">
<a href="#" class="shop-name" target="_blank">
炊大皇水具旗舰店
</a>
<!-- 咨询背景 -->
<div class="shop-im"></div>
</span>
</div>
<div class="cart-item-list">
<div class="item-item" id="1001">
<div class="item-form">
<div class="base p-checkbox">
<input type="checkbox" name="checkItem" class="jdcheckbox" onclick="goods()">
</div>
<!-- 选择的商品图片及介绍 -->
<div class="base p-goods">
<div class="goods-item">
<!-- 商品图片 -->
<div class="p-img">
<a href="#"
title="炊大皇（COOKER KING）保温杯316不锈钢带吸管男女小学生儿童水杯双盖大肚杯喝水杯子 蓝色580ml【含公仔】">
<img src="img/p-img1.jpeg" alt="#" />
</a>
</div>
<!-- 商品介绍 -->
<div class="p-txt">
<div class="p-name">
<a href="#" target="_blank"
title="炊大皇（COOKER KING）保温杯316不锈钢带吸管男女小学生儿童水杯双盖大肚杯喝水杯子 蓝色580ml【含公仔】">炊大皇（COOKER
KING）保温杯316不锈钢带吸管男女小学生儿童水杯双盖大肚杯喝水杯子
蓝色580ml【含公仔】</a>
</div>
</div>
</div>
</div>
<!-- 客户所选择的商品款式 -->
<div class="base p-props">
<!-- 款式名称 -->
<div class="props-txt">
<span>蓝色580ml【含公仔】</span>
</div>
</div>
<!-- 商品单价 -->
<div class="base p-price">
￥<span class="p-price-num">89.90</span>
</div>
<!-- 商品数量 -->
<div class="base p-quantity">
<div class="cart-number quantity">
<button class="cart-number-minus" value="-" onclick="mius(this)">-</button>
<div class="cart-input">
<input class="cart-input" min="1" max="100" value="1" />
</div>
<button class="cart-number-add" value="+" onclick="add(this)">+</button>
</div>
<p class="ac inventory ">有货</p>
</div>
<!-- 商品总价 -->
<div class="base p-sum">
<strong>¥89.90</strong>
</div>
<!-- 商品操作 -->
<div class="base p-ops">
<a href="#" class="p-ops-item" onclick="del()">删除</a>
<a href="#" class="p-ops-item" onclick="attention()">移入关注</a>
</div>
</div>
<div class="product-extra block-b"></div>
</div>
<div class="item-item" id="1002">
<div class="item-form">
<div class="base p-checkbox">
<input type="checkbox" name="checkItem" class="jdcheckbox" onclick="goods()">
</div>
<div class="base p-goods">
<div class="goods-item">
<div class="p-img">
<a href="#"
title="炊大皇（COOKER KING）水杯高颜值儿童塑料杯tritan材质夏季学生男女便携户外吸管杯水壶 奶香白【进口tritan】 600ml">
<img src="img/p-img2.jpeg" alt="#" />
</a>
</div>
<div class="p-txt">
<div class="p-name">
<a href="#" target="_blank"
title="炊大皇（COOKER KING）水杯高颜值儿童塑料杯tritan材质夏季学生男女便携户外吸管杯水壶 奶香白【进口tritan】 600ml">炊大皇（COOKER
KING）水杯高颜值儿童塑料杯tritan材质夏季学生男女便携户外吸管杯水壶 奶香白【进口tritan】 600ml</a>
</div>
</div>
</div>
</div>
<div class="base p-props">
<div class="props-txt">
<span>奶香白【进口tritan】 600ml</span>
</div>
</div>
<div class="base p-price">
￥<span class="p-price-num">49.90</span>
</div>
<div class="base p-quantity">
<div class="cart-number quantity">
<button class="cart-number-minus" value="-" onclick="mius(this)">-</button>
<div class="cart-input">
<input class="cart-input" min="1" max="100" value="1">
</div>
<button class="cart-number-add" value="+" onclick="add(this)">+</button>
</div>
<p class="ac inventory ">有货</p>
</div>
<div class="base p-sum">
<strong>¥49.90</strong>
</div>
<div class="base p-ops">
<a href="#" class="p-ops-item" onclick="del()">删除</a>
<a href="#" class="p-ops-item" onclick="attention()">移入关注</a>
</div>
</div>
<div class="product-extra block-b"></div>
<div class="item-line"></div>
</div>
</div>
</div>
<div class="cart-body">
<!-- 商店 -->
<div class="shop">
<!-- 商店内容全选 -->
<div class="cart-checkbox">
<input type="checkbox" name="checkShop" class="jdcheckbox" onclick="jdcheckAll(this)" />
</div>
<!-- 商店名 -->
<span class="shop-txt">
<a href="#" class="shop-name" target="_blank">
童趣京东自营官方旗舰店
</a>
<!-- 咨询背景 -->
<div class="shop-im"></div>
</span>
</div>
<div class="cart-item-list">
<div class="item-item" id="2001">
<div class="item-form">
<div class="base p-checkbox">
<input type="checkbox" name="checkItem" class="jdcheckbox" onclick="goods()">
</div>
<!-- 选择的商品图片及介绍 -->
<div class="base p-goods">
<div class="goods-item">
<!-- 商品图片 -->
<div class="p-img">
<a href="#"
title="故宫怪兽谈（第二辑4-6册）故宫里的大怪兽作者打造姐妹篇 前迪士尼画师精心手绘 中国版的“哈利波特” 提升阅读和写作能力 带你再度开启奇幻冒险">
<img src="img/p-img3.jpeg" alt="#" />
</a>
</div>
<!-- 商品介绍 -->
<div class="p-txt">
<div class="p-name">
<a href="#" target="_blank"
title="故宫怪兽谈（第二辑4-6册）故宫里的大怪兽作者打造姐妹篇 前迪士尼画师精心手绘 中国版的“哈利波特” 提升阅读和写作能力 带你再度开启奇幻冒险">故宫怪兽谈（第二辑4-6册）故宫里的大怪兽作者打造姐妹篇
前迪士尼画师精心手绘 中国版的“哈利波特” 提升阅读和写作能力 带你再度开启奇幻冒险</a>
</div>
</div>
</div>
</div>
<!-- 客户所选择的商品款式 -->
<div class="base p-props">
<!-- 款式名称 -->
<div class="props-txt">
<span>故宫怪兽谈4-6</span>
</div>
</div>
<!-- 商品单价 -->
<div class="base p-price">
￥<span class="p-price-num">68.30</span>
</div>
<!-- 商品数量 -->
<div class="base p-quantity">
<div class="cart-number quantity">
<button class="cart-number-minus" value="-" onclick="mius(this)">-</button>
<div class="cart-input">
<input class="cart-input" min="1" max="100" value="1">
</div>
<button class="cart-number-add" value="+" onclick="add(this)">+</button>
</div>
<p class="ac inventory ">有货</p>
</div>
<!-- 商品总价 -->
<div class="base p-sum">
<strong>¥68.30</strong>
</div>
<!-- 商品操作 -->
<div class="base p-ops">
<a href="#" class="p-ops-item" onclick="del()">删除</a>
<a href="#" class="p-ops-item" onclick="attention()">移入关注</a>
</div>
</div>
<div class="product-extra block-b"></div>
</div>
<div class="item-item" id="2002">
<div class="item-form">
<div class="base p-checkbox">
<input type="checkbox" name="checkItem" class="jdcheckbox" onclick="goods()">
</div>
<div class="base p-goods">
<div class="goods-item">
<div class="p-img">
<a href="#" title="故宫御猫夜游记（1-20）了解文化历史锻炼观察专注力，儿童文学读物入选中国好童书100佳">
<img src="img/p-img4.jpeg" alt="#" />
</a>
</div>
<div class="p-txt">
<div class="p-name">
<a href="#" target="_blank"
title="故宫御猫夜游记（1-20）了解文化历史锻炼观察专注力，儿童文学读物入选中国好童书100佳">故宫御猫夜游记（1-20）了解文化历史锻炼观察专注力，儿童文学读物入选中国好童书100佳</a>
</div>
</div>
</div>
</div>
<div class="base p-props">
<div class="props-txt">
<span>故宫御猫夜游记</span>
</div>
</div>
<div class="base p-price">
¥<span class="p-price-num">416.90</span>
</div>
<div class="base p-quantity">
<div class="cart-number quantity">
<button class="cart-number-minus" value="-" onclick="mius(this)">-</button>
<div class="cart-input">
<input class="cart-input" min="1" max="100" value="1">
</div>
<button class="cart-number-add" value="+" onclick="add(this)">+</button>
</div>
<p class="ac inventory ">有货</p>
</div>
<div class="base p-sum">
<strong>¥416.90</strong>
</div>
<div class="base p-ops">
<a href="#" class="p-ops-item" onclick="del()">删除</a>
<a href="#" class="p-ops-item" onclick="attention()">移入关注</a>
</div>
</div>
<div class="product-extra block-b"></div>
<div class="item-line"></div>
</div>
<div class="item-item" id="2003">
<div class="item-form">
<div class="base p-checkbox">
<input type="checkbox" name="checkItem" class="jdcheckbox" onclick="goods()">
</div>
<div class="base p-goods">
<div class="goods-item">
<div class="p-img">
<a href="#" title="迪士尼金色童年绘本珍藏馆礼盒装儿童早教认字故事书迪士尼里程碑式重磅作品童趣出品">
<img src="img/p-img5.jpeg" alt="#" />
</a>
</div>
<div class="p-txt">
<div class="p-name">
<a href="#" target="_blank"
title="迪士尼金色童年绘本珍藏馆礼盒装儿童早教认字故事书迪士尼里程碑式重磅作品童趣出品">迪士尼金色童年绘本珍藏馆礼盒装儿童早教认字故事书迪士尼里程碑式重磅作品童趣出品</a>
</div>
</div>
</div>
</div>
<div class="base p-props">
<div class="props-txt">
<span>迪士尼金色童年/span>
</div>
</div>
<div class="base p-price">
¥<span class="p-price-num">249.80</span>
</div>
<div class="base p-quantity">
<div class="cart-number quantity">
<button class="cart-number-minus" value="-" onclick="mius(this)">-</button>
<div class="cart-input">
<input class="cart-input" min="1" max="100" value="1">
</div>
<button class="cart-number-add" value="+" onclick="add(this)">+</button>
</div>
<p class="ac inventory ">有货</p>
</div>
<div class="base p-sum">
<strong>¥249.80</strong>
</div>
<div class="base p-ops">
<a href="#" class="p-ops-item" onclick="del()">删除</a>
<a href="#" class="p-ops-item" onclick="attention()">移入关注</a>
</div>
</div>
<div class="product-extra block-b"></div>
<div class="item-line"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 底部 -->
<footer>
<div class="cart-bottom">
<div class="bottom-wrap">
<div class="left">
<div class="select-all">
<input type="checkbox" name="selcet-all" class="jdcheckbox" id="checkALL"
onclick="checkAll(this),jdcheckAll(this)" />
全选
</div>
<div class="operation">
<a href="#" class="bottom-remove" onclick="del()">删除选中的商品</a>
<a href="#" class="bottom-removefollow" onclick="attention()">移入关注</a>
<a href="#" class="bottom-cleaner" title="亲，点我可快速清理购物车商品哦！">
<strong>清理购物车</strong>
</a>
</div>
</div>
<div class="right">
<div class="combine">
<div class="btn-area">
<a href="#" class="submit-btn" onclick="payAll()">去结算</a>
</div>
<div class="price-sum">
<div class="price-sum-amount">
<div class="price-show">
<span class="txt">总价:</span>
<span class="price priceShow">
<em id="allsum">￥0.00</em>
</span>
<b class="price-tips"><img src="img/price.png" alt="" /></b>
<div class="price-tipsbox">
<div class="tips-main">不含运费及送装服务费</div>
<span class="tips-main-triangle"></span>
</div>
</div>
<span class="amount-sum">
已选择
<em id="amountall">0</em>
件商品
<b class="up"></b>
</span>
</div>
<div class="price-sum-extra"></div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="js/js-main.js" type="text/javascript"></script>
</body>
</html>js完整代码
function checkAll(obj){
var checks = document.getElementsByName("checkShop");
// var checkAll = document.getElementById("checkALL");
for(var i = 0;i < checks.length;i++){
checks[i].checked = obj.checked;
}
}
function jdcheckAll(th){
var checkitems =document.getElementsByName("checkItem");
var flag = th.checked;
for(var i in checkitems){
checkitems[i].checked=flag;
}
goods();
}
function goods(){
// 获取所有商品单选框
var selected = document.getElementsByName("checkItem");
// 获取商品总价
var price =document.getElementsByClassName("p-sum");
var sum = 0;
var flag = true;
var amount = 0;
for(var i = 0;i<selected.length;i++){
// 判断商品是否被选中
if( !selected[i].checked){
flag = false;
}else{
// 选择商品数量
amount +=1;
// 获取标签中的内容
var priceall = price[i].firstElementChild.innerHTML;
// console.log(priceall);
sum += parseFloat((priceall.substring(priceall.indexOf("¥")+1)));
}
}
checkALL.checked = flag;
checkALL1.checked = flag;
// 打印商品数量
document.getElementById("amountall").innerHTML = amount;
// 打印总价
document.getElementById("allsum").innerHTML = "¥" + sum.toFixed(2);
}
// 数量增加
function add(obj){
var num = obj.previousElementSibling.firstElementChild.value;
num++ ;
obj.previousElementSibling.firstElementChild.value = num;
// 获取单价
var price =parseFloat(obj.parentNode.parentNode.previousElementSibling.firstElementChild.innerHTML);
//小计
var subPrice = price * num;
obj.parentNode.parentNode.nextElementSibling.firstElementChild.innerHTML = "¥"+subPrice.toFixed(2);
// totalPrice();
goods();
}
// 数量减少
function mius(obj){
var num = obj.nextElementSibling.firstElementChild.value;
num-- ;
if(num<1){
alert("数量不能小于1");
return ;
}
obj.nextElementSibling.firstElementChild.value = num;
// 获取单价
var price =parseFloat(obj.parentNode.parentNode.previousElementSibling.firstElementChild.innerHTML);
//小计
var subPrice = price * num;
obj.parentNode.parentNode.nextElementSibling.firstElementChild.innerHTML = "¥"+subPrice.toFixed(2);
// totalPrice();
goods();
}
function attention() {
alert("关注成功！");
}
function del() {
if (window.confirm("是否确认删除")) {
alert("已删除");
} else {
alert("已取消");
}
}
css样式
* {
margin: 0;
padding: 0;
}
header li {
list-style: none;
}
header {
width: 100%;
height: 30px;
font-size: 12px;
color: #999;
background-color: rgb(227, 228, 229);
}
.header-wrap {
width: 990px;
margin: 0 auto;
height: 30px;
line-height: 30px;
background-color: rgb(227, 228, 229);
display: flex;
justify-content: space-between;
}
.header-wrap .nav-left {
width: 156px;
height: 30px;
}
/* 导航条左边列表京东首页样式 */
.header-wrap .nav-left li:first-of-type {
width: 73px;
padding-left: 2px;
padding-right: 2px;
}
/* 导航条左边列表左浮动 */
.nav-left .ul-left li {
float: left;
}
/* logo样式 */
.nav-left .home-logo {
width: 18px;
height: 16.8px;
vertical-align: middle;
}
/* 定位图标 */
.nav-left .location-logo {
width: 12px;
height: 15px;
padding-right: 6px;
vertical-align: middle;
}
/* 导航条左边列表位置样式 */
.header-wrap .nav-left li:last-of-type {
width: 78.56px;
}
.location {
width: 45px;
padding-left: 10px;
padding-right: 25px;
}
/* 位置选择隐藏框样式 */
.nav-left ul li .location-wrap {
width: 300px;
padding: 10px 0 10px 10px;
position: absolute;
top: 30px;
background: #fff;
border: 1px solid #ddd;
border-top: none;
z-index: 9999;
display: none;
}
/* 省份选择，采用弹性盒子布局 */
.province-wrap {
width: 300px;
margin-left: 6px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
/* 设置每个省份div样式 */
.province-wrap .province {
width: 60px;
height: 24px;
line-height: 24px;
padding: 2px 0;
}
/* 地区专享，采用弹性盒子布局 */
.district-exclusive {
width: 290px;
margin: 10px 0 10px 10px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
/* 当鼠标悬停在位置上时所显示的样式 */
.ul-left .location-list .location:hover {
background-color: #fff;
border: 1px solid #ddd;
border-bottom: none;
}
/* 当鼠标悬停时弹出隐藏框 */
.ul-left .location-list:hover .location-wrap {
display: block;
}
/* 地区分割线 */
.district-split {
width: 262px;
height: 0;
border-bottom: dotted 1px #eeeeef;
}
/* 地区专享标题样式 */
.district-exclusive p {
width: 290px;
margin-top: 9px;
}
/* 设置地区div样式 */
.district-exclusive .district {
width: 145px;
height: 26px;
line-height: 24px;
}
/* 设置地区背景图标样式 */
.district-exclusive .district .icon {
padding-left: 25px;
background-size: 16px;
background-position: 0px 2px;
}
.district-exclusive .district .icon1 {
background-image: url("../img/icon1.png");
background-repeat: no-repeat;
background-size: 14px;
background-position: 2px;
}
.district-exclusive .district .icon2 {
background-image: url("../img/icon2.png");
background-repeat: no-repeat;
}
.district-exclusive .district .icon3 {
background-image: url("../img/icon3.png");
background-repeat: no-repeat;
}
.district-exclusive .district .icon4 {
background-image: url("../img/icon4.png");
background-repeat: no-repeat;
}
.district-exclusive .district .icon5 {
background-image: url("../img/icon5.png");
background-repeat: no-repeat;
}
/* 导航条右边样式 */
.nav-right {
width: 730px;
display: flex;
justify-content: flex-start;
}
.nav-right ul li {
float: left;
padding: 0 2px;
}
/* 标题旁小箭头 */
.nav-right ul li .fore img {
width: 12px;
height: 12px;
vertical-align: middle;
padding-left: 8px;
}
/* 标题旁分割线 */
.nav-right ul .spacer {
width: 1px;
height: 12px;
margin-top: 9px;
padding: 0;
background: #ccc;
}
/* 设置标题间距，定义标题为相对定位 */
.nav-right ul li .fore {
padding: 0 8px;
position: relative;
}
/* PLUS样式 */
.nav-right ul .right-fore1 span {
padding: 0 3px;
background-color: #d7d4cb;
border-radius: 2px;
color: white;
font-weight: bold;
margin: 0 6px;
}
/* 定义Li为相对定位 */
.nav-right-fore {
position: relative;
}
/* 设置隐藏款的样式，定义其为绝对定位 */
.nav-right ul li .fore-wrap {
/* width: 250px; */
padding: 10px 0 10px 10px;
position: absolute;
left: 0;
top: 30px;
background: #fff;
border: 1px solid #ddd;
border-top: none;
display: none;
}
.nav-right ul li .fore-wrap2 {
/* width: 250px; */
padding: 10px 0 10px 10px;
position: absolute;
right: 0;
top: 30px;
background: #fff;
border: 1px solid #ddd;
border-top: none;
display: none;
z-index: 999999;
}
/* 当鼠标悬停时，li的样式 */
.nav-right ul .nav-right-fore:hover {
background-color: #fff;
border: 1px solid #ddd;
border-bottom: none;
}
/* 当鼠标悬停时弹出隐藏框 */
.nav-right ul .nav-right-fore:hover .fore-wrap {
display: block;
}
/* 当鼠标悬停时弹出隐藏框 */
.nav-right ul .nav-right-fore:hover .fore-wrap2 {
display: block;
}
/* 分别给不同li下面的隐藏框设置其样式 */
.fore1 {
/* padding: 10px 0 10px 15px; */
display: flex;
justify-content: space-around;
}
.fore-wrap .fore1 .fore1-l {
width: 60px;
/* margin-left: -10px; */
}
.fore-wrap .fore1 .fore1-l img {
width: 60px;
height: 60px;
border-radius: 30px;
}
.fore-wrap .fore1 .fore1-r {
padding-left: 15px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.plus {
padding: 0 3px;
height: 18px;
line-height: 18px;
background-color: #d7d4cb;
font-size: 12px;
border-radius: 2px;
color: white;
font-weight: bold;
margin: 4px 2px;
}
.fore-wrap .fore1 .fore1-r-top {
width: 178px;
}
.fore-wrap .fore1 .fore1-r-top .plus {
float: left;
}
.fore-wrap .fore1 .fore1-r-top .tui {
float: right;
padding-right: 8px;
}
/* 设置分割线样式 */
.fore1-split {
margin-left: -10px;
padding-top: 10px;
width: 260px;
height: 0;
border-bottom: 1px solid #ddd;
}
.fore1-bottom {
padding-right: 10px;
margin-top: 20px;
display: flex;
justify-content: space-between;
/* align-items: flex-start; */
}
.fore1-icon {
height: 56px;
line-height: 56px;
}
.fore1-icon img {
width: 12px;
height: 12px;
}
.fore1-c img {
width: 56px;
height: 56px;
}
.fore-wrap .fore1-txt a {
/* margin-left: 5px; */
padding-left: 14px;
padding-top: 2px;
}
#use {
padding: 2px 1px;
background-color: rgb(206, 170, 98);
font-weight: normal;
margin-left: 12px;
}
/* 隐藏框的布局均采用弹性布局 ，给父级标签添加flex*/
.fore-a {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.right-fore3 .fore-wrap .fore3-a {
width: 280px;
}
/* 设置隐藏框内部内容样式 */
.right-fore3 .fore-wrap .fore3-a .myjd {
width: 140px;
height: 24px;
text-indent: 5px;
line-height: 24px;
}
/* split为分割线 */
.fore3-split {
width: 290px;
height: 0;
margin-left: -10px;
padding: 5 0px;
border-bottom: 1px solid #eeeeef;
}
.fore4-a {
width: 140px;
}
.fore4-a .enterprice-pro {
width: 60px;
height: 24px;
line-height: 24px;
}
.fore4-a div:last-child {
width: 90px;
}
.fore5-a {
width: 150px;
}
.fore5-a .custmor {
width: 70px;
height: 24px;
text-indent: 5px;
line-height: 24px;
}
.fore5-a p {
width: 140px;
color: black;
font-weight: bold;
height: 24px;
line-height: 24px;
}
.fore5-split {
width: 160px;
height: 0;
margin-left: -10px;
padding-top: 20 0px;
border-bottom: 1px solid #eeeeef;
}
.right-fore6 .fore-wrap2 .fore6-a-wrap {
display: flex;
/* width: 988px; */
/* flex-wrap: wrap; */
justify-content: flex-start;
/* align-items: flex-start; */
}
.right-fore6 .fore-wrap2 .fore-a2 {
height: 170px;
}
.fore6-a p {
color: black;
font-size: 16px;
font-weight: bold;
width: 202px;
padding-bottom: 10px;
}
.fore6-a1 {
width: 301px;
height: 90px;
margin-left: 10px;
}
.fore6-a1 .characteristic-theme,
.industry-channel,
.live,
.more {
width: 100px;
height: 24px;
line-height: 24px;
}
.fore6-a2 {
width: 200px;
}
.fore6-split {
height: 180px;
width: 0;
margin-right: 16px;
border-left: 1px solid #eeeeef;
}
.fore7-a-wrap {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
/* align-items: space-aroud; */
}
.fore7-a {
width: 190px;
height: 110px;
line-height: 110px;
}
.fore7-a .fore7-l {
width: 76px;
height: 76px;
line-height: 76px;
border: 1px solid #ddd;
}
.fore7-a .fore7-l img {
width: 74px;
height: 74px;
margin: 1px;
}
.fore7-a .fore7-r {
width: 100px;
height: 24px;
line-height: 24px;
padding-left: 6px;
}
.fore7-a .fore7-r a {
color: rgb(102, 102, 102);
font-size: 12px;
}
.fore7-a .fore7-r img {
height: 25px;
}
.fore7-text {
color: rgb(241, 2, 20);
/* padding-bottom: 1px; */
margin-bottom: 5px;
}
.fore7-split {
width: 200px;
height: 0;
margin-left: -10px;
/* padding: 5px 0 ; */
border-bottom: 1px solid #eeeeef;
}
/* 给头部所有的超链接设置样式 */
header li a:link {
color: #999;
text-decoration: none;
}
header li a:visited {
color: #999;
text-decoration: none;
}
header li a:hover {
color: #fa2c19;
text-decoration: none;
}
/* 中间部分框架 */
.section-wrap {
width: 990px;
margin: 0 auto;
}
/* logo和搜索框部分框架 */
.section-wrap .first {
width: 990px;
height: 87px;
line-height: 87px;
padding: 20px 0 0;
/* border: 1px solid black; */
}
/* logo样式 */
.section-wrap .first .first-logo {
width: 277px;
height: 50px;
float: left;
}
/* 搜索框样式 */
.section-wrap .first .first-search {
height: 24px;
border: 2px solid #c91623;
float: right;
margin-top: 24px;
background: #c91623;
}
/* 搜索框中文字框样式 */
.section-wrap .first .first-search .itxt {
border: 0;
background-color: #fff;
height: 18px;
line-height: 18px;
width: 260px;
padding: 3px 5px;
display: inline-block;
float: left;
}
/* 搜索按钮样式 */
.section-wrap .first .first-search .button {
display: inline-block;
vertical-align: top;
width: 48px;
height: 24px;
background: #c91623;
text-align: center;
color: #fff;
font-weight: 700;
border: 0;
}
/* 解决第一部分父级塌陷 */
.first::after {
content: "";
display: block;
clear: 0;
visibility: hidden;
}
/* 第二部分框架 */
.section-wrap .second {
width: 990px;
margin: 0 auto;
height: 40px;
margin-top: 10px;
}
/* 第二部分通过浮动布局 */
.section-wrap .second .second-l {
float: left;
width: 109px;
}
.section-wrap .second .second-l a {
text-decoration: none;
font-size: 16px;
}
.section-wrap .second .second-l a em {
color: #e2231a;
}
.section-wrap .second .second-l .number {
color: #e2231a;
font-size: 14px;
margin-left: 5px;
}
.second-r {
float: right;
margin-bottom: 10px;
padding-left: 122px;
}
.second-r .cart-store {
float: left;
line-height: 26px;
}
.second-r .cart-location {
float: left;
height: 26px;
line-height: 26px;
border: 1px solid #cecbce;
padding: 0 4px 0 4px;
}
/* 商品部分框架 */
.third {
width: 990px;
margin: 0 auto;
font-size: 12px;
}
/* 商品标题部分样式 */
.third .cart-thead {
height: 32px;
line-height: 32px;
margin: 0 0 10px;
padding: 5px 0;
background: #f3f3f3;
border: 1px solid #e9e9e9;
border-top: 0;
}
/* 选择按钮部分左浮动 */
.cart-thead .column {
float: left;
}
/* 给标题按钮部分设置样式 */
.cart-thead .t-checkbox {
height: 18px;
line-height: 18px;
padding-top: 7px;
width: 122px;
padding-left: 11px;
}
.cart-thead .t-checkbox .cart-checkbox {
float: left;
margin-right: 5px;
}
/* 为所有的按钮设置样式 */
.cart-thead .t-checkbox .cart-checkbox .jdcheckbox {
float: none;
vertical-align: middle;
margin: 0 3px 0 0;
padding: 0;
}
/* 不同标题设置样式 */
.t-goods {
width: 208px;
}
.t-props {
width: 140px;
height: 32px;
padding: 0 10px 0 20px;
}
.t-price {
width: 120px;
padding-right: 50px;
text-align: right;
}
.t-quantity {
width: 80px;
text-align: center;
}
.t-sum {
width: 100px;
padding-right: 40px;
text-align: right;
}
.t-action {
width: 75px;
}
/* 给商品部分设置样式 */
.cart-body {
margin-bottom: 20px;
}
/* 店铺部分 */
.cart-body .shop {
width: 990px;
height: 30px;
line-height: 30px;
padding-left: 11px;
}
/* 给商品前的所有按钮设置样式 */
.cart-body .shop .cart-checkbox {
float: left;
width: 16px;
height: 30px;
line-height: 30px;
margin: 0 5px 0 0;
}
/* 店铺框架 */
.cart-body .shop-txt {
float: left;
margin-left: 10px;
width: 42%;
}
/* 店铺名 */
.cart-body .shop-txt .shop-name {
display: inline-block;
max-width: 260px;
vertical-align: middle;
height: 30px;
line-height: 30px;
font-weight: 700;
}
/* 咨询背景 */
.shop-txt .shop-im {
cursor: pointer;
width: 20px;
height: 20px;
background-image: url("../img/shop.png");
background-size: cover;
display: inline-block;
vertical-align: middle;
position: relative;
top: -1px;
}
/* 店铺超链接样式 */
.shop-txt a:link {
color: #666;
text-decoration: none;
}
.shop-txt a:visited {
color: #666;
text-decoration: none;
}
.shop-txt a:hover {
color: #c91623;
text-decoration: none;
}
/* 商品列表上的边框 */
.cart-body .cart-item-list {
border: 1px solid #f1f1f1;
border-top: 2px solid #aaa;
background: #fff;
}
/* 商品列表 */
.item-item {
position: relative;
border-top: 1px solid #c5c5c5;
line-height: 20px;
background: #fff;
padding: 0 0 1px 40px;
clear: both;
}
/* 商品内容 */
.item-form {
display: block;
}
/* 商品下的空白 */
.block-b {
margin-bottom: 10px;
}
/* 给所有标题下的内容设置左浮动 */
.item-form .base {
float: left;
padding: 15px 0 10px;
}
/* 解决表单部分父级塌陷问题 */
.item-form::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 给不同标题下的商品内容设置不同的样式 */
.item-form .p-checkbox {
width: 30px;
min-height: 10px;
margin-left: 10px;
position: absolute;
left: 0;
top: 0;
}
.item-form .p-goods {
width: 300px;
}
.item-form .p-goods .goods-item {
display: block;
}
/* 商品图片样式 */
.item-form .p-goods .goods-item .p-img {
position: relative;
float: left;
width: 80px;
height: 80px;
border: 1px solid #eee;
margin-right: 10px;
background: #fff;
text-align: center;
padding: 0;
}
/* 用户所选择的款式部分 */
.item-form .p-props {
width: 130px;
min-height: 10px;
line-height: 20px;
overflow: hidden;
padding: 15px 0 0 20px;
}
/* 商品单价 */
.item-form .p-price {
width: 150px;
position: relative;
padding-right: 40px;
text-align: right;
}
/* 商品数量 */
.item-form .p-quantity {
width: 84px;
}
/* 商品总价 */
.item-form .p-sum {
width: 100px;
padding-right: 40px;
text-align: right;
}
/* 商品操作 */
.item-form .p-ops {
width: 75px;
}
/* 商品名称 */
.p-name {
height: 40px;
line-height: 20px;
overflow: hidden;
}
.item-form .p-goods .p-txt .p-name a {
color: #333;
text-decoration: none;
}
.item-form .p-goods .p-txt .p-name a:link,
:visited {
color: #333;
text-decoration: none;
}
.item-form .p-goods .p-txt .p-name a:hover {
color: #c91623;
}
/* 商品介绍，设置溢出内容隐藏，当鼠标悬停时弹出全部内容 */
.props-txt {
width: 130px;
overflow: hidden;
/* 提示用户存在隐藏溢出内容 */
text-overflow: ellipsis;
cursor: default;
}
/* 商品数量框内的数字 */
.p-price-num {
color: #333;
}
/* 商品数量部分框架 */
.item-form .p-quantity .quantity {
width: 80px;
border: 0;
overflow: hidden;
}
/* 库存提示 */
.inventory {
color: #aaa;
}
.ac {
text-align: center;
}
/* 商品数量部分的加减按钮样式 */
.quantity button {
border-width: 1px;
background: #f1f1f1;
width: 17px;
height: 20px;
line-height: 16px;
vertical-align: middle;
position: static;
float: left;
text-align: center;
box-sizing: border-box;
border: 1px solid #cbcbcb;
padding: 0;
cursor: pointer;
}
/* 商品数字框 */
.quantity input {
border-width: 1px 0;
width: 46px;
float: left;
text-align: center;
box-sizing: border-box;
height: 20px;
color: #232326;
border: 1px solid #cbcbcb;
background: #fff;
vertical-align: middle;
padding: 0;
}
.p-sum {
display: block;
color: #333;
}
.p-ops-item {
display: block;
}
.item-form .p-ops a {
color: #333;
text-decoration: none;
}
.item-form .p-ops a:link,
:visited {
color: #333;
text-decoration: none;
}
.item-form .p-ops a:hover {
color: #c91623;
}
footer{
position: fixed;
width: 100%;
top: auto;
bottom: 0px;
}
footer .cart-bottom{
width: 100%;
border: 1px solid #f0f0f0;
background:#fff ;
}
footer .cart-bottom .bottom-wrap{
position: relative;
height: 52px;
width: 988px;
/* border: 1px solid #f0f0f0; */
background:#fff ;
margin: 0 auto;
}
.cart-bottom .bottom-wrap .left{
height: 50px;
width: 363px;
}
.cart-bottom .bottom-wrap .right{
position: absolute;
height: 52px;
right: 0;
top: -1px;
width: 670px;
max-width: 670px;
}
.cart-bottom .bottom-wrap .left .select-all{
float: left;
height: 50px;
line-height: 50px;
padding: 0 0 0 9px;
font-size: 12px;
}
.operation{
float: left;
height: 50px;
line-height: 50px;
}
.operation a{
float: left;
margin-left: 10px;
color: #666;
font-size: 12px;
}
.operation a {
color: #333;
text-decoration: none;
}
.operation a:link,
:visited {
color: #333;
text-decoration: none;
}
.operation a:hover {
color: #c91623;
}
.combine{
float: right;
width: 670px;
font-size: 12px;
}
.btn-area{
float: right;
height: 50px;
}
.price-sum{
position: relative;
float: right;
height: 50px;
width: auto;
margin: 7px 20px 0 10px;
}
.submit-btn{
padding:10px 20px;
height: 52px;
line-height: 52px;
color: #fff;
text-align: center;
font-size: 18px;
font-family: Microsoft YaHei;
background: #e54346;
cursor: pointer;
text-decoration: none;
}
.price-show{
float: right;
}
.amount-sum{
float: right;
color: #999;
line-height: 20px;
cursor: pointer;
}
.txt{
width: 50px;
text-align: right;
color: #999;
display: inline-block;
}
.price em{
font-size: 16px;
color: #e2231a;
font-family: Verdana;
font-weight: 700;
}
.price-tips{
vertical-align: text-bottom;
display: inline-block;
height: 18px;
width: 12px;
margin-left: 5px;
position: relative;
}
.price-tipsbox{
right: -85px;
display: none;
position: absolute;
top: -42px;
line-height: 1;
box-shadow: 1px 3px 15px -1px hsla(0, 0%, 48.6%, .5);
padding: 10px 15px;
background: #fff;
border-color: #ddd;
}
.tips-main{
color: #666;
}
.tips-main-triangle{
position: absolute;
left: 50px;
top: 32px;
width: 18px;
height: 10px;
background-image: url("../img/price-triangle.png");
background-repeat: no-repeat;
background-position: 0 0;
overflow: hidden;
}
.price-tips img:hover .price-tipsbox{
display: block;
}
.amount-sum em{
color: #e2231a;
font-weight: 700;
font-family: verdana;
margin: 0 3px;
}
.amount-sum b{
display: inline-block;
width: 9px;
height: 5px;
background: url("../img/up.png") -45px -91px ;
background-size: cover;
overflow: hidden;
vertical-align: middle;
margin: -5px 0 0 5px;
/* transition: all .2s ease-in 0s; */
}
.amount-sum b.up{
background-position: -45px -91px;
}
扫一扫
3341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
