制作京东购物车，包含html js css完整代码

制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价

整体页面

购物车布局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">&nbsp;</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样式

/* 商品部分框架 */
.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;
}

制作京东购物车，包含html js css完整代码

【Web】单点登录(SingleSignOn，SSO) Keycloak OAuth 2.0 OpenID Connect JWT (JSON Web Token) SAML CAS

JSON基础知识与实践：轻松理解并应用JSON格式

自定义属于你的脚手架并发布到NPM仓库

npm i 下包报错存在的问题和解决情况

npm error code EUNSUPPORTEDPROTOCOL 解决

Vue ElementUI技巧分享：自定义表单项label的文字提示

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

程序员总结分析：为什么要用原生 JavaScript 代替 jQuery？

JQuery和JS的区别有哪些？

使用阿里云的oss对象存储服务实现图片上传(前端vue后端java详解)

前端哥

【Web】单点登录(SingleSignOn，SSO) Keycloak OAuth 2.0 OpenID Connect JWT (JSON Web Token) SAML CAS

使用YOLOv8预测图像时生成相应的json文件

全球最快的 JSON 文件查询工具

sublime text的json快捷键

【漏洞复现】海康威视综合安防管理平台 iSecure Center applyCT fastjson 远程代码执行

在VScode下配置C/C 环境(tasks.json、launch.json、c_cpp_properties.json)

JSON基础知识与实践：轻松理解并应用JSON格式

使用Excel转JSON加载项快速将单元格转换为JSON的教程

自定义属于你的脚手架并发布到NPM仓库

【输入npm install express出现的报错】

1
JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

2
在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

3
成为优秀的TS体操高手之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

4
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

5
html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

6
jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000

7
基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

8
VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000

9
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

10
HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000