品优购项目--购物车结算页面

效果图

HTML部分

	
	
	
	
	
	


	

		

			

				

					
品优购欢迎您！
					

						请登录
						免费注册
					
				
			
			

				

					
我的订单
					


					
我的品优购
					


					
品优购会员
					


					
企业采购
					


					
关注品优购
					


					
客户服务
					


					
网站导航
				
			
		
	
	
	

		

			

				

					品优购
				
			
			购物车
			

				
				搜索
			
		
	

	

		

			
全部商品  11
			

				

					
全选
					
商品
					
单价(元)
					
数量
					
小计(元)
					
操作
				
			

			

				

					
					
传智自营
					运费: ￥6.00 还差￥99.00免运费
				

				

					

						

							

								

									
									
								
								

									
苹果(Apple)MD463FE/A 
MAC Thunderbolt雷电接口 至千兆以太网转

									购买礼品包装
								
								

									尺码:Thunderbolt至千兆...
								
									
248.00
								

									

										
-
										
1
										
+
									
									
有货
								
								
248.00
								

									删除 

									移到我的关注
								
							
						
						

							

								

									
									
								
								

									
Apple Macbook Air 13.3 英寸笔记本电脑 
银色(Corei5) 处理器/8GB内存

									购买礼品包装
								
								

									颜色MrcBook爱人
 尺寸:13.3英寸
								
								
8488.00
								

									

										
-
										
1
										
+
									
									
有货
								
								
8488.00
								

									删除 

									移到我的关注
								
								

									
换购
									活动商品购满2888.00元,即可加价换购商品1件 >
									查看换购品
									去凑单 >
								
								

									
[赠品]圣迪威(Sendio)MacBook13.3寸屏幕保...x1
									
[赠品]圣迪威(Sendio)MacBook13.3清洁套装...x1
								
							
						
						

							

								

									
									
								
								

									
半岛铁盒移动电源A2200 
白色2200mah

									购买礼品包装
								
								

									型号:A2200
								
									
19.00
								

									

										
-
										
1
										
+
									
									
有货
								
								
19.00
								

									删除 

									移到我的关注
								
							
						
						

							

								

									
									
								
								

									
苹果(Apple)MD463FE/A 
MAC Thunderbolt雷电接口 至千兆以太网转

									购买礼品包装
								
								

									尺码:Thunderbolt至千兆...
								
									
248.00
								

									

										
-
										
1
										
+
									
									
有货
								
								
248.00
								

									删除 

									移到我的关注
								
							
						
						

							

								

									
									
								
								

									
苹果(Apple) iPhone6(a1586)16g 
金色移动联通

									购买礼品包装
								
								

									颜色:金色..
								
									
3799.00
								

									

										
-
										
1
										
+
									
									
有货
								
								
3799.00
								

									删除 

									移到我的关注
								
							
						
					
				
			

			

				

					
					神州数码专营店
				

				

					

						

							

								

									
									
								
								

									
DELL 戴尔Ins 15MR-75 28SS15英寸
银色(Corei5) 处理器/8GB内存

									购买礼品包装
								
								

									颜色:银色
 尺寸:13.3英寸
								
								
8488.00
								

									

										
-
										
1
										
+
									
									
有货
								
								
8488.00
								

									删除 

									移到我的关注
								
								

									
换购
									活动商品购满2888.00元,即可加价换购商品1件 >
									查看换购品
									去凑单 >
								
								

									
[赠品]圣迪威(Sendio)MacBook13.3寸屏幕保...x1
									
[赠品]圣迪威(Sendio)MacBook13.3清洁套装...x1
								
							
						
					
				
			

			

				

					全选  
					删除选中商品
					移到我的关注
					清除下柜商品

				

				

					结算
				

				

					
已选择0件商品 总价(不含运费) : ￥16283.00
					
已节省: -￥20.00
				
			

			

				

					已删除商品，您可以重新购买或加关注：
				
	
				

					圣迪威（Sendio）MacBook13.3清洁套...
					8488.00
					1
					
						重新购买
						移到我的关注
					
				
	
			

			

				

					

						
猜你喜欢
						
特惠换购
					
				
					
				

					

						

							
								
								
飞科(FLYCO)FS7805鼻毛修剪器 电动鼻毛机 修鼻毛机
								
¥25.00
								加入购物车
							
						
						

							
								
								
飞科(FLYCO)FS7805鼻毛修剪器 电动鼻毛机 修鼻毛机
								
¥25.00
								加入购物车
							
						
						

							
								
								
飞科(FLYCO)FS7805鼻毛修剪器 电动鼻毛机 修鼻毛机
								
¥25.00
								加入购物车
							
						
						

							
								
								
飞科(FLYCO)FS7805鼻毛修剪器 电动鼻毛机 修鼻毛机
								
¥25.00
								加入购物车
							
						
					
					
<
					
>
				
			
		
	

	

		

			
			

				

					

						
						

							
正品保障
							
正品保障,提供发票
						
					
					

						
						

							
极速物流
							
极速物流,极速送达
						
					
					

						
						

							
无忧售后
							
7天无理由退换货
						
					
					

						
						

							
特色服务
							
私人订制家电套餐
						
					
					

						
						

							
帮助中心
							
您的购物指南
						
					
				
			

			

				

					
购物指南
					
购物流程
					
会员介绍
					
生活旅行/团购
					
常见问题
					
大家电
					
联系客服
				
				

					
配送方式
					
上门自提
					
211限时达
					
配送服务查询
					
配送费收取标准
					
海外配送
				
				

					
支付方式
					
货到付款
					
在线支付
					
分期付款
					
邮局汇款
					
公司转账
				
				

					
售后服务
					
售后政策
					
价格保护
					
退款说明
					
返修/退换货
					
取消订单
				
				

					
特色服务
					
夺宝岛
					
DIY装机
					
延保服务
					
品优购E卡
					
品优购通信
				

				

					

						
帮助中心
						

							
							
品优购客户端 
						
					
				
			

			

				

			 		关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  手机品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact U
			 	
			 	

			 		地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn  

          			京ICP备08001421号京公网安备110108007702
			 	
			
		
	

CSS部分

.header {
	height: 80px;
}
.header span {
	float: left;
	font-size: 20px;
	margin-top: 15px;
}
.set_inp {
	float: right;
 	width: 540px;
 	height: 36px;
 }
 .set_inp input {
 	float: left;
 	padding-left: 15px;
 	width: 443px;
 	height: 32px;
 	border: 2px solid #B1191A;
 }
 .set_inp button {
 	float: left;
	width: 74px;
	height: 36px;
	background-color: #B1191A;
	color: #fff;
 }
 .main h2 {
 	height: 40px;
 	font-size: 16px;
 	color: #C71523;
 }
 .sellhd {
 	height: 34px;
 	line-height: 34px;
 	border: 1px solid #DDDDDD;
 	background-color: #F5F5F5;
 }
 .sellhd li {
 	float: left;
 	font-size: 12px;
 	color: #656565;
 }
 .sellhd input {
 	vertical-align: middle;
 	margin-left: 5px;
 	margin-right: 10px;
 }
 .sellhd li:nth-child(2) {
 	margin-left: 210px;
 }
 .sellhd li:nth-child(3) {
 	margin-left: 340px;
 }
 .sellhd li:nth-child(4),
 .sellhd li:nth-child(5),
 .sellhd li:last-child {
 	margin-left: 110px;
 }
 .boxhd {
 	height: 30px;
 	line-height: 30px;
 	padding-top: 15px;
 	border-bottom: 2px solid #DDDDDD;
 	margin-bottom: 20px;
 }
 .boxhd input {
 	float: left;
 	margin: 7px 7px 0 5px;
 }
 .czzy {
 	float: left;
 	width: 55px;
 	height: 18px;
 	background-color: #C71523;
 	color: #fff;
 	font-size: 12px;
 	text-align: center;
 	line-height: 18px;
 	margin-top: 5px;
 }
 .boxhd span {
 	float: right;
 	font-size: 12px;
 	color: #656565;
 }
 .boxhd span em {
 	color: #C71523;
 }
 .short {
 	position: relative;
 	height: 108px;
 	border: 1px solid #DDDDDD;
 }
 .short img {
 	border: 1px solid #EDEDED;
 	margin: 0 10px 0 18px;
 }
 .short input {
 	vertical-align: top;
 }
 .short li {
 	position: absolute;
 	top: 14px;
 	left: 0;
 	font-size: 12px;
 }
 .short li:first-child {
 	left: 5px;
 }
 .short li:nth-child(2) {
 	left: 125px;
 }
 .short li:nth-child(3) {
 	left: 380px;
 }
 .short li:nth-child(4) {
 	left: 620px;
 }
 .short li:nth-child(5) {
 	left: 750px;
 }
 .short li:nth-child(6) {
 	left: 930px;
 }
 .short li:nth-child(7) {
 	left: 1090px;
 }
 .sho-pro i {
 	float: left;
 	margin-right: 7px;
 	margin-top: 5px;
 	height: 17px;
 	width: 18px;
 	background: url(../img/setimg/001.gif) no-repeat;
 }
 .sho-pro span {
 	float: left;
 	color: #999;
 	margin-top: 5px;
 }
 .boxbd .special {
 	height: 200px;
 }
 .boxbd .special li:first-child,
 .boxbd .special li:nth-child(2),
 .boxbd .special li:nth-child(3) {
 	
 	top: 50px;
 }
 .boxbd .special li:nth-child(9) {
 	top: 155px;
 	left: 60px;
 	color: #999;
 }
 .short:hover {
 	background-color: #FEEDEF;
 }
 .shotop {
 	margin-left: 5px;
 }
 .shotop h4 {
 	float: left;
 	width: 43px;
 	height: 18px;
 	border: 1px solid #C71523;
 	color: #C71523;
 	text-align: center;
 	line-height: 18px;
 }
 .shotop span {
 	float: left;
 	margin: 0 15px;
 }
 .shotop-a {
 	float: left;
 	width: 70px;
 	height: 20px;
 	color: #fff;
 	background-color:  #C71523;
 	text-align: center;
 	line-height: 20px;
 	margin-right: 10px;
 } 
 .youhuo {
 	width: 100px;
 	height: 30px;
 	text-align: center;
 	line-height: 30px;
 	color: #999;
 }
 .yh1,
 .yh2, 
 .yh3 {
	height: 28px;
	border: 1px solid #E6E6E6;
 	float: left;
 	margin-left: -1px;
 }
 .yh1 {
 	width: 28px;
 } 
 .yh3 {
 	width: 28px;
 	color: #C71523;
 }
 .yh2 {
 	width: 40px;
 }
 .lastset {
 	margin-top: 20px;
 	height: 50px;
 	border: 1px solid #DDDDDD;
 } 
 .lastset-l {
 	line-height: 50px;
 }
 .lastset-l input {
	margin-left: 5px;
	margin-right: 15px;
	vertical-align: middle;
 }
 .lastset-l a {
 	margin-left: 18px;
 }
  .lastset-m em {
  	font-size: 16px;
  	color: #E50012;
  }
  .lastset-m p:last-child {
  	margin-left: 150px;
  }
  .lastset-r a {
  	display: inline-block;
  	margin-left: 30px;
  	line-height: 50px;
  	text-align: center;
  	font-size: 16px;
  	width: 110px;
 	height: 50px;
 	background-color: #E50012;
 	color: #fff;
  }
  .delete-t {
  	height: 50px;
  	line-height: 50px;
  	font-size: 12px;
  }
  .delete-b {
  	height: 32px;
  	line-height: 32px;
  	background-color: #FFFDED;
  	padding-left: 15px;
  }
  .delete-b span {
  	float: left;
  }
  .delete-b span:nth-child(2) {
  	margin-left: 350px;
  }
  .delete-b span:nth-child(3) {
  	margin-left: 150px;
  }
  .delete-b span:last-child {
  	float: right;
  }
  .delete-b span:last-child a {
  	margin-left: 20px;
  }
  .rcd-hd {
  	height: 38px;
  	border: 1px solid #DDD;
  	margin: 20px auto;
  	background-color: #F1F1F1;
  }
  .rcd-hd a {
  	float: left;
  	width: 87px;
  	height: 38px;
  	font-size: 12px;
  	line-height: 38px;
  	text-align: center;
  }
  .rcd-hd li:first-child a {
  	background-color: #E50012;
  	color: #fff;
  }
  .rcd-bd {
  	height: 267px;
  	padding-left: 41px;
  	position: relative;
  }
  .rcd-bd li a {
  	float: left;
  	width: 246px;
  	height: 305px;
  	border: 1px dashed #DDD;
  	margin-left: -1px;
  	margin-bottom: 25px;
  }
  .rcd-bd img {
  	display: block;
  	width: 81px;
  	height: 165px;
	margin: 20px auto 5px;
  }
  .rcd-bd h4 {
  	font-size: 12px;
  	margin: 0 20px;
  	font-weight: 400;
  }
  .rcd-bd p {
  	margin-bottom: 10px;
  	text-align: center;
  	color: #E50012;
  }
  .rcd-bd button {
  	display: block;
  	width: 120px;
  	height: 35px;
  	border: 1px solid #ccc;
  	background-color: #fff;
  	color: #666;
  	margin: 0 auto;
  }
  .rcd-bd button {
  	font-family: 'icomoon';
  }
  .rcd-arl,
  .rcd-arr {
  	position: absolute;
  	top: 50%;
  	margin-top: -25px;
	width: 20px;
	height: 50px;
	line-height: 50px;
	font-size: 30px;
	background-color: rgba(0,0,0,.3);
	color: #fff;
  }
  .rcd-arl {
  	left: 0;
  }
  .rcd-arr {
  	right: 0;
  }