【软件应用开发】购物车前端样式页面设计

已于 2022-05-26 11:25:28 修改
阅读量2.3k 收藏 29
点赞数 3
分类专栏： 程序设计与开发 文章标签： 前端
于 2022-05-21 20:20:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47936614/article/details/124902759
版权

仿照淘宝购物车，设计购物车样式页面
功能：使用JavaScript实现商品数量和单价的计算

页面效果：
在这里插入图片描述
cart.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝购物车</title>
		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
		<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="content">
			<!-- 页面头header -->
			<div id="J_Header" class="header tb-header">
				<!-- 淘宝网logo -->
				<h1 id="logo" class="cart-logo">
					<div class="shop-cart">
						<img src="images/Taobao.png">购物车
					</div>
				</h1>
				<!-- 搜索框 -->
				<div id="J_Search" class="search" role="search">
					<div class="search-triggers">
						<ul id="J_SearchTab" class="ks-switchable-nav">
							<li class="J_SearchTab selected"><a>宝贝</a></li>
							<li class="J_SearchTab"><a>天猫</a></li>
							<li class="J_SearchTab"><a>店铺</a></li>
						</ul>
						<s><s></s></s>
					</div>
					<div class="search-panel search-hp-panel ks-switchable-content">
						<form action="#" name="search" id="J_TSearchForm" target="_top" class>
							<div class="search-button"><button class="btn-search" type="submit">搜索</button></div>
							<div class="search-panel-fields search-hp-fields search-common-panel">
								<div class="search-combobox search-combobox-hover search-combobox-focused" id="ks-component">
									<div class="search-combobox-input-wrap">
										<input class="search-combobox-input" id="q" aria-label="请输入搜索文字">
									</div>
								</div>
								<i id="J_SearchIcon" style="display: inline;"></i>
							</div>
						</form>
					</div>
				</div>
			</div>
			<br><br>
			<!-- 页面中间 -->
			<div class="cart-layout-TB">
				<!-- banner -->
				<div id="J_Cart" class="cart">
					<div></div>
					<!-- 商品列表 -->
					<div id="J_CartMain" class="cart-main">
						<!-- 标识行：单价 数量 金额 操作 -->
						<div class="cart-table-th">
							<div class="wp">
								<div class="th th-chk">
									<div class="select-all J_SelectAll">
										<div class="cart-checkbox">
											<input type="checkbox" class="J_CheckBoxShop" name="select-all" onclick="selectAll();">
											<label for="J_SelectAllCbx1">勾选购物车内所有商品</label>
										</div>&nbsp;&nbsp;全选</div>
								</div>
								<div class="th th-item"><div class="td-inner">商品信息</div></div>
								<div class="th th-info"><div class="td-inner">&nbsp;</div></div>
								<div class="th th-price"><div class="td-inner">单价</div></div>
								<div class="th th-amount"><div class="td-inner">数量</div></div>
								<div class="th th-sum"><div class="td-inner">金额</div></div>
								<div class="th th-op"><div class="td-inner">操作</div></div>
							</div>
						</div>
						<!-- 具体商品行 -->
						<div id="J_OrderList">
							<div id="J_OrderHolder" style="height: auto;">
								<div id="J_Order" class="J_Order clearfix order-body">
									<!-- 店铺 -->
									<div class="JItemHead shop clearfix">
										<div class="shop-info">
											<div class="cart-checkbox">
												<input type="checkbox" class="J_CheckBoxShop" name="orders" onclick="selectOrders();">
											</div>
											&nbsp;&nbsp;
											<img class="icon-B" src="images/T0.png" alt="">
											店铺：<a href="#" target="_blank" class="J_MakePoint">荣耀官方旗舰店</a>
											<span class="ww-light ww-small" dat-icon="small" data-nick="荣耀官方旗舰店" data-display="inline">
												<a href="#" target="_blank" class="ww-inline ww-online"><span>旺旺在线</span></a>
											</span>
										</div>
									</div>
									<!-- 具体商品信息行 -->
									<div class="order-content">
										<div class="item-list" id="J_BundleList">
											<div id="J_Bundle" class="bundle bundle-last">
												<!-- 商品1 -->
												<div id="J_ItemHolder_1" class="item-holder">
													<div id="J_Item_1" class="J_ItemBody item-body clearfix item-normal  first-item">
														<ul class="item-content clearfix">
															<li class="td td-chk">
																<div class="td-inner">
																	<div style="height: 82px;position: relative;">
																		<div class="cart-checkbox">
																			<input type="checkbox" class="J_CheckBoxItem" name="select">
																		</div>
																	</div>
																</div>
															</li>
															<li class="td td-item">
																<div class="td-inner">
																	<div class="item-pic J_ItemPic">
																		<a href="" target="_blank" data-title="【5.18直降300】华为旗下荣耀笔记本Pro 16.1英寸 锐龙R5-3550H 笔记本电脑轻薄便携商务本学生MagicBook Pro" class="J_MakePoint J_GoldReport" >
																			<img src="images/item1.jpg" alt="" class="itempic J_ItemImg">
																		</a>
																	</div>
																	<div class="item-info">
																		<div class="item-basic-info">
																			<a href="" target="_blank" title="【5.18直降300】华为旗下荣耀笔记本Pro 16.1英寸 锐龙R5-3550H 笔记本电脑轻薄便携商务本学生MagicBook Pro" 
																			class="item-title J_GoldReport J_MakePoint" data-point="tbcart.8.11">【5.18直降300】华为旗下荣耀笔记本Pro 16.1英寸 锐龙R5-3550H 笔记本电脑轻薄便携商务本学生MagicBook Pro</a>
																		</div>
																		<div class="item-other-info">
																			<div class="item-icon-list">
																				<div class="item-icons J_ItemIcons  item-icons-fixed ">
																					<span class="item-icon item-icon-0" title="支持信用卡支付">
																						<img src="images/xcard.png" alt="">
																					</span>
																					<a href="" target="_blank" class="item-icon item-icon-1 J_MakePoint" title="消费者保障服务，卖家承诺7天退换">
																						<img src="images/7tian.png" alt="">
																					</a>
																					<a href="" target="_blank" class="item-icon item-icon-2 J_MakePoint" title="消费者保障服务，卖家承诺如实描述">
																						<img src="images/baozhang.png" alt="">
																					</a>
																				</div>
																			</div>
																			<div class="item-tips"></div>
																		</div>
																	</div>
																</div>
															</li>
															<li class="td td-info">
																<div class="item-props item-props-can">
																	<p class="sku-line" tabindex="0">套餐类型：官方标配</p>
																	<p class="sku-line" tabindex="0">硬盘容量：512G固态硬盘</p>
																	<p class="sku-line" tabindex="0">颜色分类：冰河银R5+16GB+512GB+集显+非触屏</p>
																	<p class="sku-line" tabindex="0">内存容量：16G</p>
																</div>
															</li>
															<li class="td td-price">
																<div class="td-inner">
																	<div class="item-price price-promo-">
																		<div class="price-content">
																			<div class="price-line">
																				<em class="price-original">￥5199.00</em>
																			</div>
																			<div class="price-line">
																				<em class="J_Price price-now" tabindex="0">￥4599.00</em>
																				<input type="hidden" value="4599.00" id="price1" /><!--单价1--> 
																			</div>
																		</div>
																	</div>
																</div>
															</li>
															<li class="td td-amount">
																<div class="td-inner">
																	<div class="amount-wrapper amount-has-error">
																		<div class="item-amount ">
																			<a href="#" class="J_Minus no-minus" onclick="numDec1()">-</a>
																			<input id="quantity1" type="text" value="1" class="text text-amount J_ItemAmount" >
																			<a href="#" class="J_Plus plus" onclick="numAdd1()">+</a>
																		</div>
																	</div>
																</div>
															</li>
															<li class="td td-sum">
																<div class="td-inner">
																	<em tabindex="0" class="J_ItemSum number">￥</em>
																	<em id="total_price1" tabindex="1" class="J_ItemSum number">4599.00</em>
																	<div class="J_ItemLottery"></div>
																</div>
															</li>
															<li class="td td-op">
																<div class="td-inner">
																	<a title="移入收藏夹" class="btn-fav J_Fav J_MakePoint" href="#" style="text-align: center;">移入收藏夹</a>
																	<a href="#" class="J_Del J_MakePoint" style="text-align: center;">删除</a>
																</div>
															</li>
														</ul>
													</div>
												</div>
												<!-- 商品2 -->
												<div id="J_ItemHolder_2" class="item-holder">
													<div id="J_Item_2" class="J_ItemBody item-body clearfix item-normal last-item">
														<ul class="item-content">
															<li class="td td-chk">
																<div class="td-inner">
																	<div style="height: 82px;position: relative;">
																		<div class="cart-checkbox">
																			<input type="checkbox" class="J_CheckBoxItem" name="select">
																		</div>
																	</div>
																</div>
															</li>
															<li class="td td-item">
																<div class="td-inner">
																	<div class="item-pic J_ItemPic">
																		<a href="" target="_blank" data-title="【限时6期免息】华为旗下荣耀30S麒麟820双模5G全网通3倍光学变焦拍照上网手机Pro学生商务时尚手机官方" class="J_MakePoint J_GoldReport" >
																			<img src="images/item2.jpg" alt="" class="itempic J_ItemImg">
																		</a>
																	</div>
																	<div class="item-info"></div>
																	<div class="item-info">
																		<div class="item-basic-info">
																			<a href="" target="_blank" title="【限时6期免息】华为旗下荣耀30S麒麟820双模5G全网通3倍光学变焦拍照上网手机Pro学生商务时尚手机官方" 
																			class="item-title J_GoldReport J_MakePoint" data-point="tbcart.8.11">【限时6期免息】华为旗下荣耀30S麒麟820双模5G全网通3倍光学变焦拍照上网手机Pro学生商务时尚手机官方</a>
																		</div>
																		<div class="item-other-info">
																			<div class="item-icon-list">
																				<div class="item-icons J_ItemIcons  item-icons-fixed ">
																					<span class="item-icon item-icon-0" title="支持信用卡支付">
																						<img src="images/xcard.png" alt="">
																					</span>
																					<a href="" target="_blank" class="item-icon item-icon-1 J_MakePoint" title="消费者保障服务，卖家承诺7天退换">
																						<img src="images/7tian.png" alt="">
																					</a>
																					<a href="" target="_blank" class="item-icon item-icon-2 J_MakePoint" title="消费者保障服务，卖家承诺如实描述">
																						<img src="images/baozhang.png" alt="">
																					</a>
																				</div>
																			</div>
																			<div class="item-tips"></div>
																		</div>
																	</div>
																</div>
															</li>
															<li class="td td-info">
																<div class="item-props item-props-can">
																	<p class="sku-line" tabindex="0">网络类型：SA\NSA双模(5G)</p>
																	<p class="sku-line" tabindex="0">机身颜色：蝶羽翠</p>
																	<p class="sku-line" tabindex="0">套餐类型：官方标配</p>
																	<p class="sku-line" tabindex="0">存储容量：8+256G</p>
																</div>
															</li>
															<li class="td td-price">
																<div class="td-inner">
																	<div class="item-price price-promo-">
																		<div class="price-content">
																			<div class="price-line">
																				<em class="price-original">￥2999.00</em>
																			</div>
																			<div class="price-line">
																				<em class="J_Price price-now" tabindex="0">￥2699.00</em>
																				<input type="hidden" id="price2" value="2699.00" /><!-- 单价2 -->
																			</div>
																		</div>
																	</div>
																</div>
															</li>
															<li class="td td-amount">
																<div class="td-inner">
																	<div class="amount-wrapper amount-has-error">
																		<div class="item-amount ">
																			<a href="#" class="J_Minus no-minus" onclick="numDec2()">-</a>
																			<input id="quantity2" type="text" value="1" class="text text-amount J_ItemAmount" data-now="1" >
																			<a href="#" class="J_Plus plus" onclick="numAdd2()">+</a>
																		</div>
																	</div>
																</div>
															</li>
															<li class="td td-sum">
																<div class="td-inner">
																	<em tabindex="0" class="J_ItemSum number">￥</em>
																	<em id="total_price2" tabindex="1" class="J_ItemSum number">2699.00</em>
																	<div class="J_ItemLottery"></div>
																</div>
															</li>
															<li class="td td-op">
																<div class="td-inner">
																	<a title="移入收藏夹" class="btn-fav J_Fav J_MakePoint" href="#" style="text-align: center;">移入收藏夹</a>
																	<a href="#" class="J_Del J_MakePoint" style="text-align: center;">删除</a>
																</div>
															</li>
														</ul>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 管理结算 -->
					<div id="J_FloatBarHolder" class="float-bar-holder">
						<div id="J_FloatBar" class="float-bar clearfix default" style="position: static;">
							<div class="float-bar-wrapper">
								<div class="float-bar-right">
									<div class="price-sum">
										<span class="txt">合计（不含运费）：</span>
										<strong class="price">
											￥<em id="J_Total"><span class="total-symbol">&nbsp;</span>0.00</em>
										</strong>
									</div>
									<div class="btn-area">
										<a href="#" id="J_Go" class="submit-btn">
											<span onclick="setTotal()">结&nbsp;算</span>
											<b></b>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

cart.css

body, button, input, select {
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

h1,h2,h3,h4,h5,h6{
	font-size: 100%;
}

body, button, form, h1, h2, h3, h4, h5, h6,input, li, p, td, th, ul {
    margin: 0;
    padding: 0;
}

button, input, select {
    font-size: 100%;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#content {
    clear: both;
}
#content, .header, .float-bar, .wp {
    width: 990px;
    margin: 0 auto;
}

.cl:after, .clearfix:after {
    content: '\0020';
    display: block;
    height: 0;
    clear: both;
}

.header {
    padding: 20px 0 40px;
    position: relative;
    height: 35px;
}

h1 {
    display: block;
	font-family: 'microsoft yahei';
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	font-weight: bold; 
}
#logo{
	float: left;
}

.tb-header .search {
    float: right;
	padding: 0;
}

.tb-header .search-triggers {
    position: relative;
    z-index: 1000;
}

.tb-header .search-triggers .ks-switchable-nav {
    width: 74px;
    position: absolute;
    z-index: 1;
    left: 3px;
    top: 3px;
    height: 29px;
    border-right: 1px solid #e5e5e5;
    border-left: 1px solid #f5f5f5;
}
.tb-header .search-triggers ul {
    overflow: hidden;
	zoom: 1;
}

ul {
    list-style: none;
}

.tb-header .search-triggers li.selected {
    display: block;
}

.tb-header .search-triggers li.selected a {
    background: #f5f5f5;
    border-radius: 0;
    border: 0 none;
    color: #6b6b6b;
    font-weight: 400;
    font-size: 12px;
    padding: 0;
}
.tb-header .search-triggers li {
    display: none;
    width: 100%;
    position: relative;
	zoom: 1;
    float: left;
}
.tb-header .search-triggers li a {
    height: 100%;
    width: 100%;
    text-indent: 15px;
    text-align: left;
    line-height: 29px;
    float: left;
}
a {
	color: #3c3c3c;
    text-decoration: none;
}

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

.tb-header .search-triggers s {
    line-height: 0;
    border-width: 4px;
    border-color: #666 transparent transparent;
    border-style: solid dashed dashed;
    height: 0;
    position: absolute;
    top: 16px;
    font-size: 0;
    left: 60px;
    z-index: 10;
}

.tb-header .search-triggers s s {
    border-width: 3px;
    border-color: #f6f6f6 transparent transparent;
    top: -4px;
    left: -3px;
    position: absolute;
}
.tb-header .search-triggers s {
    line-height: 0;
    border-width: 4px;
    border-color: #666 transparent transparent;
    border-style: solid dashed dashed;
    height: 0;
    position: absolute;
    top: 16px;
    font-size: 0;
    left: 60px;
    z-index: 10;
}
.tb-header .search-panel {
    width: 515px;
	position: relative;
	zoom: 1;
}
form {
    display: block;
}

.tb-header .search-panel .search-button {
    position: relative;
    z-index: 1;
    float: right;
    background: #fff;
}
.tb-header .search-panel button {
    cursor: pointer;
    border: 0;
    font-size: 18px;
    text-indent: -999em;
    float: left;
    width: 73px;
    height: 33px;
}
.tb-header .search-hp-panel button.btn-search {
    background-position: -553px -76px;
    height: 35px;
    width: 93px;
}

.tb-header div.search-hp-panel button.btn-search, 
.tb-header div.search-hp-panel button.btn-search-hover, 
.tb-header div.search-hp-panel button.btn-search:hover {
    background: url(../images/sousuo.png);
    background-image: -webkit-image-set(url(../images/sousuo.png) 1x,url(../images/ss2.png) 2x);
    background-repeat: no-repeat;
    background-position: 0 -204px;
}

button {
	border-radius: 0;
    -webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    box-sizing: border-box;
}
.tb-header .search-panel-focused .search-panel-fields, .tb-header .search-common-panel {
    background: #f50;
}
.tb-header .search-hp-fields {
    height: 35px;
}
.tb-header .search-panel-fields {
    position: relative;
	zoom: 1;
    overflow: hidden;
}
.tb-header .search-hp-fields .search-combobox {
    margin-left: 79px;
    height: 29px;
}
.tb-header .search-hp-fields .search-combobox-input-wrap {
    height: 29px;
}
.tb-header .search-combobox {
    margin-right: 0;
    margin-top: 3px;
    background: #fff;
}
.search-combobox {
    font-size: 12px;
}
.search-combobox-input-wrap {
    vertical-align: middle;
    position: relative;
}
.tb-header .search-combobox-input-wrap {
    position: relative;
    overflow: hidden;
    height: 100%;
}
.tb-header .search-hp-fields .search-combobox input {
    margin-left: 0;
    text-indent: 10px;
}
.tb-header .search-panel-fields .search-combobox input {
    left: 0;
    top: 0;
}
.tb-header .search-hp-fields input {
    padding: 5px 0;
}
.tb-header .search-panel-fields input {
    width: 100%;
    outline: 0;
    font-size: 14px;
    position: absolute;
    height: 18px;
    line-height: 18px;
    border: 0 none;
    border-top: 1px solid #f5f5f5;
    z-index: 2;
}
.search-combobox-input {
    vertical-align: middle;
    background-color: #fff;
    color: #000;
    overflow-y: visible;
}
.tb-header .search-panel .search-common-panel i {
    z-index: 2;
    position: absolute;
    top: 13px;
    left: 86px;
    width: 12px;
    height: 12px;
    background-position: -380px -20px;
    background-image: url(../images/suosoui.png);
    background-repeat: no-repeat;
}

input [type="hidden" i] {
    display: none;
    -webkit-appearance: initial;
	box-sizing: border-box;
    background-color: initial;
    cursor: default;
    padding: initial;
    border: initial;
}


/* ---------------------------------------------------------------------- */

.cart {
    min-height: 400px;
}
.cart-main {
    min-height: 210px;
}
.cart-table-th {
	font-size: 15px;
	font-weight: bold;
	overflow: hidden;
    height: 50px;
    line-height: 50px;
    color: #000000;
}
.cart-table-th .th-chk {
    text-align: left;
    position: relative;
    height: 50px;
}
.cart-table-th .th {
    float: left;
}
.th-chk, .td-chk {
    width: 45px;
}
.cart-table-th .th-chk .select-all {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
}
.select-all {
    cursor: pointer;
}
.cart-checkbox label {
    position: relative;
    z-index: 1;
    float: left;
    width: 15px;
    height: 15px;
    background-position: 0 0;
    line-height: 200em;
    overflow: hidden;
    cursor: pointer;
}

.cart-table-th .th-chk .cart-checkbox, .cart-table-th .th-chk .s-checkbox {
    margin: -1px 0 0 15px;
}
.select-all .cart-checkbox {
    vertical-align: middle;
}
.cart-checkbox {
    position: relative;
    display: inline-block;
	float: left;
    width: 15px;
    height: 15px;
}

.cart-table-th .th-sum .td-inner, .cart-table-th .th-op .td-inner {
    padding: 0;
}
.th-item, .td-item {
    width: 302px;
}
.cart-table-th .th-item .td-inner {
    padding-left: 91px;
}
.th .td-inner {
    padding: 0 0 0 10px;
}

.th-info, .td-info {
    width: 172px;
    padding-right: 20px;
}

.th-price, .td-price {
    width: 120px;
}
.th-amount, .td-amount {
    width: 120px;
}
.th-sum, .td-sum {
    width: 105px;
}
.th-op, .td-op {
    width: 84px;
    padding: 0 0 0 15px;
}

.order-body {
    margin-bottom: 15px;
}
.shop {
    position: relative;
    height: 38px;
    background: #fff;
    overflow: hidden;
}
.shop-info {
    position: relative;
    z-index: 2;
    line-height: 38px;
    padding-left: 15px;
}
.shop .cart-checkbox {
    margin-top: -2px;
    vertical-align: middle;
}
.cart-checkbox input {
    z-index: 0;
    left: -20px;
    top: -20px;
}
 .shop-icon, .icon-B {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 6px 0 0;
}
.icon-B {
    width: 16px;
    height: 16px;
}
.shop .ww-light {
    margin-left: 15px;
}

.ww-light {
    overflow: hidden;
}
#content .ww-light a {
    background-image: url(../images/alww.gif);
    background-image: -webkit-image-set(url(../images/alww.gif) 1x,url(../images/alwwd.gif) 4x);
}
.ww-small .ww-online {
    background-position: -80px 0;
}
.ww-small .ww-online {
    text-decoration: none!important;
    width: 20px;
    height: 20px;
    zoom: 1;
}
.ww-inline {
    display: inline-block;
    vertical-align: text-bottom;
}
.ww-light a span {
    display: none;
}
.order-content {
    border: 1px solid #ccc;
}
.item-body {
    background: #fcfcfc;
    border-bottom: 1px solid #e7e7e7;
}
.item-content .td-chk {
    position: relative;
    overflow: hidden;
}
.td-inner {
    padding-top: 20px;
}
.td-chk .cart-checkbox, .td-chk .s-checkbox {
    margin: 0 10px 0 0;
    float: right;
}
.item-content .td {
    float: left;
    min-height: 119px;
    overflow: hidden;
}

.item-content .img-loaded {
    background: #fff;
}
.item-content .item-pic {
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    float: left;
    overflow: hidden;
}
.item-content .item-pic a {
    display: table-cell;
    width: 80px;
    height: 80px;
    vertical-align: middle;
    text-align: center;
}
.item-content .item-pic img {
    max-height: 80px;
    max-width: 80px;
    vertical-align: middle;
}
img {
    border: 0;
}
.td-item .item-info {
    margin: -3px 0 0 91px;
    padding-right: 25px;
}
.td-item .item-basic-info {
    min-height: 40px;
}
.item-content .item-title {
    font-size: 12px;
    display: block;
    max-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-icon-list .item-icons {
    margin-bottom: 3px;
}
.item-icon-list .item-icon {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}
.item-icon-list .item-icon img {
    vertical-align: middle;
}

.item-content .item-props {
    padding: 16px 0;
    min-height: 84px;
    border: 1px dashed transparent;
    position: relative;
}
.item-content .sku-line {
    margin: 0 5px 0 15px;
    color: #9c9c9c;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-content .td-price {
    color: #9c9c9c;
}
.item-content .td-price .td-inner {
    padding-top: 12px;
}
.item-content .price-content {
    padding: 8px 0 0 10px;
    line-height: 1;
    width: 74px;
}
.item-content .td-price .price-line {
    padding: 0 0 4px 0;
}
.item-content .price-original {
    color: #9c9c9c;
    text-decoration: line-through;
    font-family: Verdana,Tahoma,arial;
}
address, dfn, em, var {
    font-style: normal;
}

.item-content .td-price .price-line {
    padding: 0 0 4px 0;
}
.item-content .price-now {
    color: #3c3c3c;
    font-weight: 700;
    font-family: Verdana,Tahoma,arial;
}
.item-content .item-amount {
    height: 25px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.services-list .td-amount .number, .item-content .item-amount {
    width: 77px;
}
 .item-content .amount-has-error .item-amount .no-minus,.item-content .amount-has-error .plus{
	 background: #fff0e7;
	 border-color: #ffe1d3;
	 color: #000000;
 }
 .item-content .item-amount .minus, .item-content .item-amount .no-minus {
     left: 0;
 }
 .item-content .item-amount a {
     display: block;
     height: 23px;
     width: 17px;
     border: 1px solid #e5e5e5;
     text-align: center;
     line-height: 23px;
     position: absolute;
     top: 0;
}
.item-content .item-amount a, .item-content .text-amount {
    float: left;
}
.amount-has-error .text-amount {
    border-color: #efbba9;
    color: #6c6c6c;
}
.item-content .text-amount {
    width: 39px;
    height: 15px;
    line-height: 15px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
    padding: 4px 0;
    background-color: #fff;
    background-position: -75px -375px;
    position: absolute;
    z-index: 2;
    left: 18px;
    top: 0;
}
.item-content .item-amount .plus, .item-content .item-amount .no-plus {
    right: 0;
}
.item-content .td-sum {
    color: #f40;
    font-weight: 700;
	margin-top: 20px;
}
.number, .price {
    font-family: Verdana,Tahoma,arial;
}
.item-content .td-op .td-inner {
    padding-top: 17px;
}
.combo-order-op a, .combo-op a, .item-content .td-op .btn-fav, .item-content .td-op .J_Del {
    display: block;
}
.item-content .td-op a {
    padding-bottom: 3px;
}
.item-holder {
    position: relative;
}
.last-item {
    border-bottom: none;
}
.float-bar-holder {
    position: relative;
    height: 50px;
}
.float-bar-wrapper {
    height: 50px;
    overflow: hidden;
}
.float-bar-right, .float-bar-wrapper {
    background: #e5e5e5;
}
.float-bar-right {
    float: right;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
    padding-left: 20px;
}
.float-bar .amount-sum, .float-bar .price-sum {
    height: 48px;
    color: #3c3c3c;
}
.float-bar .amount-sum, .float-bar .price-sum, .float-bar .btn-area {
    float: left;
}
.float-bar .price-sum strong, .float-bar .amount-sum em, .float-bar .price-sum .txt, .float-bar .amount-sum .txt {
    float: left;
}
.float-bar .txt {
    line-height: 48px;
}
.float-bar .price-sum .price {
    color: #f40;s
    font-weight: 400;
    font-size: 18px;
    line-height: 48px;
    font-family: Arial;
    vertical-align: middle;
}
.float-bar .price-sum .price em {
    font-weight: 700;
    font-size: 22px;
    padding: 0 3px;
}

.float-bar .amount-sum em, .float-bar .price-sum .price em {
    color: #f40;
    font-family: tohoma,arial;
}
.float-bar .total-symbol {
    font-size: 14px;
    font-family: verdana;
}

.float-bar .submit-btn {
    display: inline-block;
    width: 120px;
    height: 50px;
	color: #fff;
    line-height: 50px;
    background: #f40;
    text-align: center;
    font-family: 'Lantinghei SC','Microsoft Yahei';
    font-size: 20px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
}

cart.js

/* 全选---所有商品 */
function selectAll() {
	if ($("[name='select-all']").is(':checked')) {
		$("[name='orders']").prop('checked', true);
		$("[name='select']").prop('checked', true);
	} else {
		$("[name='orders']").prop('checked', false);
		$("[name='select']").prop('checked', false);
	}
}

/* 店铺全选---店铺门下的所有商品 */
function selectOrders() {
	if ($("[name='orders']").is(':checked')) {
		$("[name='select']").prop('checked', true);
	} else {
		$("[name='select']").prop('checked', false);
	}
}

/*商品数量+1*/
function numAdd1() {
	var quantity = document.getElementById("quantity1").value;
	var num_add = parseInt(quantity) + 1;
	var price1 = document.getElementById("price1").value;
	if (num_add >= 5) {
		document.getElementById("quantity1").value = 5;
	} else {
		document.getElementById("quantity1").value = num_add;
		var total = price1 * num_add;
		document.getElementById("total_price1").innerHTML = total.toFixed(2);
	}
	setTotal();
}
/*商品数量-1*/
function numDec1() {
	var quantity = document.getElementById("quantity1").value;
	var num_dec = parseInt(quantity) - 1;
	var price1 = document.getElementById("price1").value;
	if (num_dec > 0) {
		document.getElementById("quantity1").value = num_dec;
		var total = price1 * num_dec;
		document.getElementById("total_price1").innerHTML = total.toFixed(2);
	}
	setTotal();
}
/*商品数量+1*/
function numAdd2() {
	var quantity = document.getElementById("quantity2").value;
	var num_add = parseInt(quantity) + 1;
	var price2 = document.getElementById("price2").value;
	if (num_add >= 8) {
		document.getElementById("quantity2").value = 8;
	} else {
		document.getElementById("quantity2").value = num_add;
		var total1 = price2 * num_add;
		document.getElementById("total_price2").innerHTML = total1.toFixed(2);
	}
	setTotal();
}
/*商品数量-1*/
function numDec2() {
	var quantity = document.getElementById("quantity2").value;
	var num_dec = parseInt(quantity) - 1;
	var price2 = document.getElementById("price2").value;
	if (num_dec > 0) {
		document.getElementById("quantity2").value = num_dec;
		var total2 = price2 * num_dec;
		document.getElementById("total_price2").innerHTML = total2.toFixed(2);
	}
	setTotal();
}

//计算总价
function setTotal(){
	var q1 = document.getElementById("quantity1").value;
	var q2 = document.getElementById("quantity2").value;
	var price1 = document.getElementById("price1").value;
	var price2 = document.getElementById("price2").value;
	var total=q1*price1+q2*price2;
	document.getElementById("J_Total").innerHTML = total.toFixed(2);
}

完整代码可参考链接：https://download.csdn.net/download/weixin_47936614/85432343

前台购物车模板
07-04
在原有模板上进行修改，更为清爽、整洁、方便使用，可显示商品图片、名称、状态等，亦可根据自己需求进行修改
购物车静态页面设计
01-16
购物车静态页面设计现在我已经可以实现初步的静态页面，但是页面太过单调，我很期待接下来的页面样式的学习。
Vue.js 购物车示例：从零开始构建
最新发布
weixin_66708577的博客
03-11 622
在前端开发中，购物车功能是电商网站的核心组件之一。通过 Vue.js，我们可以快速构建一个交互式的购物车系统。本文将通过一个简单的示例，展示如何使用 Vue.js 实现一个基本的购物车功能。
购物车前台页面
01-11
这是一个购物车前端的jsp界面，做购物的web项目的同学可以用来提升自己的前台页面，这个可以展示图片，增加商品金额
前端JavaScript购物车模块
ceike的博客
10-03 662
【代码】麦当劳购物车。
jquery购物车前台模板
10-09
jquery前台购物车模板页面，包含地址填写及修改等一系列的东西。
仿照淘宝购物车前端页面设计
05-21
本项目“仿照淘宝购物车前端页面设计”旨在训练开发者如何创建一个类似淘宝购物车的功能性页面，提供用户友好的体验。下面将详细讨论这个项目中涉及的关键知识点。 1. HTML 结构设计： - 商品列表：使用`<ul>`或`...
基于Java和CSS的前端页面设计源码展示
09-25
在当今的互联网时代，前端页面设计对于用户体验至关重要，而Java作为后端开发中广泛使用的语言，其在前端页面设计中的应用同样不可或缺。本项目通过展示一套完整的基于Java和CSS的前端页面设计源码，为前端开发人员...
购物车前端开发（jQuery和bootstrap3）
10-21
Bootstrap 3是一个流行的前端框架，提供了样式和组件，使得页面设计更加一致且响应式。在示例中，Bootstrap的CSS被用来定义表格样式、按钮样式和布局，确保在不同设备上看起来都美观且功能正常。例如，`...
web前端课程设计-农产品购物车
06-24
【标题】"Web前端课程设计-农产品购物车"是一次以实际项目为驱动的前端学习实践，旨在让学生通过构建一个在线农产品购物车系统，掌握Web前端开发的核心技术。这个项目结合了Vue.js这一现代前端框架，以及JavaScript...
电商平台首页设计，基于html+css+js，前端开发模块学习
11-14
电商平台首页设计是电商网站的门面，它直接关系到用户的首印象以及网站的...通过实践这样的项目，学习者可以深入理解前端开发的各个环节，并且能够在实际工作中应用所学知识，设计和开发出既美观又功能强大的电商网站。
前端购物车页面
qq_59527682的博客
11-25 711
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body>.
114. web前端网页制作 购物车网页设计实例 大学生期末大作业 html+css+js
A240307的博客
04-23 2247
大学生期中作业--农产品购物车网页设计实例，应用html+css+js，购物车价格自动计算，菜单可删减，供大家参考。网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
FineUI小技巧（1）简单的购物车页面
weixin_33809981的博客
06-18 216
起因 最初是一位 FineUI 网友对购物车功能的需求，需要根据产品单价和数量来计算所有选中商品的总价。 这个逻辑最好在前台使用JavaScript实现，如果把这个逻辑移动到后台C#实现，则会导致过多的AJAX请求而影响用户体验。   最终效果   准备数据 在生成页面之前，我们需要准备购物车的数据，这里只是简单的用表格来模拟数据： 1 protected DataTab...
电商项目测试实战之购物车页面用例设计【建议收藏】
热门推荐
08-16 1万+
　购物车页面用例设计 　　一、购物车页面 　　二、购物车页面测试范围列表 　　三、购物车页面功能点需求分析 　　四、部分功能点的测试用例设计 　　购物车页面 　　1、验证添加商品到购物车页面合法，添加成功 　　·步骤描述 　　选择不大于20种商品点击加入购物车，再进入我的购物车页面对比选中的商品结果。 　　·测试数据 　　商品种类：1种、19种、20种 　　·预期结果 　　1）购物车页面显示的商品与添加的商品一致 　　2）公共头部购物车角标+1、+19、+20 .
11个简单易用的电商购物车设计案例
m0_45522371的博客
11-11 1649
现在的电子商务网站，不仅需要简洁美观，还要提供良好的用户体验，尤其是在购物车和结算环节。通过使用CSS和JavaScript，我们可以轻松设计出功能丰富且易于使用的购物车界面，吸引用户并提升转化率。本文为你精选了11个优秀的电商界面设计片段，让你能够快速为自己的网站注入更多创意与功能。以上这些示例展示了从简洁到复杂的各种电子商务购物车设计。通过CSS与JavaScript的灵活运用，能够创建符合品牌风格且功能强大的购物车，提升用户体验与转化率。
商品列表搜索查询
thw_m的博客
10-14 577
商品列表搜索查询                               var app = angular.module("myApp",[]);             app.controller("myCtrl",function($scope){                 $scope.products = [{                     id:80,
购物车样式
m0_46678809的博客
11-19 223
【代码】购物车样式。
购物车网站设计与制作
chipingnuo0266的博客
10-09 3240
第一章 绪 论 1.1开发背景 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CS_木成河

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值