菜单 搜索
首页 前端知识 制作京东购物车，包含html js css完整代码

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

2024-07-02 23:07:45 前端知识 前端哥 711 470 我要收藏

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

整体页面

购物车布局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;
}

转载请注明出处或者链接地址：https://www.qianduange.cn//article/13785.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

爱心

2024-06-27 17:06:24

表白 function showLoveMessage() { var popup = document.createElement('div'); popup.style.position = 'fixed'; popup.style.top = '50%'; popup.style.left = '50%'; popup.style.transform = 'translate(-50%, -50%)'; popup.style.padding = '

2024-07-06 15:07:16

读魏书生的心得体会

2024-07-03 14:07:10

jQuery 选择器

2024-05-12 00:05:34

jQuery框架实现元素显示及隐藏动画【附案例分析】

2024-07-02 23:07:50

猴子也能学会的jQuery第一期——什么是jQuery

2024-07-02 23:07:41

Vue ts项目中封装echarts组件

2024-07-02 23:07:40

echarts添加水印背景，以及鼠标经过水印区域不显示tooltip的问题

2024-07-02 23:07:38

Vue puppeteer插件安装问题解决方案

2024-07-02 23:07:34

Vue中public/assets目录区别

2024-07-02 23:07:29

大家推荐的文章
1

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

2024-06-17 09:06:541000
2

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

2024-06-10 11:06:351000
3

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

2024-06-06 10:06:201000
4

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

2024-06-04 10:06:181000
5

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

2024-06-07 00:06:411000
6

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

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

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

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！