品优购项目--购物车结算页面
效果图
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品优购购物车结算</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/shoppingcar-settlement.css">
</head>
<body>
<div class="shoutcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您!</li>
<li>
<a href="#">请登录</a>
<a href="#" class="style-red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li><div class="spacer"></div></li>
<li><a href="#">我的品优购</a><i class="icomoon"></i></li>
<li><div class="spacer"></div></li>
<li><a href="#">品优购会员</a></li>
<li><div class="spacer"></div></li>
<li><a href="#">企业采购</a></li>
<li><div class="spacer"></div></li>
<li><a href="#">关注品优购</a><i class="icomoon"></i></li>
<li><div class="spacer"></div></li>
<li><a href="#">客户服务</a><i class="icomoon"></i></li>
<li><div class="spacer"></div></li>
<li><a href="#">网站导航</a><i class="icomoon"></i></li>
</ul>
</div>
</div>
</div>
<div class="header">
<div class="w">
<div class="logo fl">
<h1>
<a href="index.html" title="品优购">品优购</a>
</h1>
</div>
<span>购物车</span>
<div class="set_inp">
<input type="text" placeholder="自营">
<button>搜索</button>
</div>
</div>
</div>
<div class="main clearfix">
<div class="w">
<h2>全部商品 11</h2>
<div class="sellhd">
<ul>
<li><input type="checkbox" checked="checked">全选</li>
<li>商品</li>
<li>单价(元)</li>
<li>数量</li>
<li>小计(元)</li>
<li>操作</li>
</ul>
</div>
<div class="box">
<div class="boxhd">
<input type="checkbox">
<div class="czzy">传智自营</div>
<span>运费: ¥6.00 <em>还差¥99.00免运费</em></span>
</div>
<div class="boxbd">
<ul>
<li class="short">
<ul>
<li>
<input type="checkbox">
<img src="img/setimg/01.gif" alt="">
</li>
<li class="sho-pro">
<p>苹果(Apple)MD463FE/A <br>MAC Thunderbolt雷电接口 至千兆以太网转<br></p>
<i></i><span>购买礼品包装</span>
</li>
<li>
尺码:Thunderbolt至千兆...
</li>
<li>248.00</li>
<li>
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="youhuo">有货</div>
</li>
<li>248.00</li>
<li>
<a href="#">删除</a> <br>
<a href="#">移到我的关注</a>
</li>
</ul>
</li>
<li class="short special">
<ul>
<li>
<input type="checkbox">
<img src="img/setimg/02.gif" alt="">
</li>
<li class="sho-pro">
<p>Apple Macbook Air 13.3 英寸笔记本电脑 <br>银色(Corei5) 处理器/8GB内存<br></p>
<i></i><span>购买礼品包装</span>
</li>
<li>
颜色MrcBook爱人<br> 尺寸:13.3英寸
</li>
<li>8488.00</li>
<li>
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="youhuo">有货</div>
</li>
<li>8488.00</li>
<li>
<a href="#">删除</a> <br>
<a href="#">移到我的关注</a>
</li>
<li class="shotop">
<h4>换购</h4>
<span>活动商品购满2888.00元,即可加价换购商品1件 ></span>
<a href="#" class="shotop-a">查看换购品</a>
<a href="#">去凑单 ></a>
</li>
<li>
<p>[赠品]圣迪威(Sendio)MacBook13.3寸屏幕保...x1</p>
<p>[赠品]圣迪威(Sendio)MacBook13.3清洁套装...x1</p>
</li>
</ul>
</li>
<li class="short">
<ul>
<li>
<input type="checkbox">
<img src="img/setimg/03.gif" alt="">
</li>
<li class="sho-pro">
<p>半岛铁盒移动电源A2200 <br>白色2200mah<br></p>
<i></i><span>购买礼品包装</span>
</li>
<li>
型号:A2200
</li>
<li>19.00</li>
<li>
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="youhuo">有货</div>
</li>
<li>19.00</li>
<li>
<a href="#">删除</a> <br>
<a href="#">移到我的关注</a>
</li>
</ul>
</li>
<li class="short">
<ul>
<li>
<input type="checkbox">
<img src="img/setimg/01.gif" alt="">
</li>
<li class="sho-pro">
<p>苹果(Apple)MD463FE/A <br>MAC Thunderbolt雷电接口 至千兆以太网转<br></p>
<i></i><span>购买礼品包装</span>
</li>
<li>
尺码:Thunderbolt至千兆...
</li>
<li>248.00</li>
<li>
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="youhuo">有货</div>
</li>
<li>248.00</li>
<li>
<a href="#">删除</a> <br>
<a href="#">移到我的关注</a>
</li>
</ul>
</li>
<li class="short">
<ul>
<li>
<input type="checkbox">
<img src="img/setimg/04.gif" alt="">
</li>
<li class="sho-pro">
<p>苹果(Apple) iPhone6(a1586)16g <br>金色移动联通<br></p>
<i></i><span>购买礼品包装</span>
</li>
<li>
颜色:金色..
</li>
<li>3799.00</li>
<li>
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="youhuo">有货</div>
</li>
<li>3799.00</li>
<li>
<a href="#">删除</a> <br>
<a href="#">移到我的关注</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="box">
<div class="boxhd">
<input type="checkbox">
神州数码专营店
</div>
<div class="boxbd">
<ul>
<li class="short special">
<ul>
<li>
<input type="checkbox">
<img src="img/setimg/05.gif" alt="">
</li>
<li class="sho-pro">
<p>DELL 戴尔Ins 15MR-75 28SS15英寸<br>银色(Corei5) 处理器/8GB内存<br></p>
<i></i><span>购买礼品包装</span>
</li>
<li>
颜色:银色<br> 尺寸:13.3英寸
</li>
<li>8488.00</li>
<li>
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="youhuo">有货</div>
</li>
<li>8488.00</li>
<li>
<a href="#">删除</a> <br>
<a href="#">移到我的关注</a>
</li>
<li class="shotop">
<h4>换购</h4>
<span>活动商品购满2888.00元,即可加价换购商品1件 ></span>
<a href="#" class="shotop-a">查看换购品</a>
<a href="#">去凑单 ></a>
</li>
<li>
<p>[赠品]圣迪威(Sendio)MacBook13.3寸屏幕保...x1</p>
<p>[赠品]圣迪威(Sendio)MacBook13.3清洁套装...x1</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="lastset">
<div class="lastset-l fl">
<input type="checkbox">全选
<a href="#">删除选中商品</a>
<a href="#">移到我的关注</a>
<a href="#">清除下柜商品</a>
</div>
<div class="lastset-r fr">
<a href="#">结算</a>
</div>
<div class="lastset-m fr">
<p>已选择0件商品 总价(不含运费) : <em>¥16283.00</em></p>
<p>已节省: -¥20.00</p>
</div>
</div>
<div class="delete">
<div class="delete-t">
已删除商品,您可以重新购买或加关注:
</div>
<div class="delete-b">
<span>圣迪威(Sendio)MacBook13.3清洁套...</span>
<span>8488.00</span>
<span>1</span>
<span>
<a href="#">重新购买</a>
<a href="#">移到我的关注</a>
</span>
</div>
</div>
<div class="recommend">
<div class="rcd-hd">
<ul>
<li><a href="#">猜你喜欢</a></li>
<li><a href="#">特惠换购</a></li>
</ul>
</div>
<div class="rcd-bd">
<ul>
<li>
<a href="#">
<img src="uploads/rcd-bd.gif" alt="">
<h4>飞科(FLYCO)FS7805鼻毛修剪器 电动鼻毛机 修鼻毛机</h4>
<p>¥25.00</p>
<button><i></i>加入购物车</button>
</a>
</li>
<li>
<a href="#">
<img src="uploads/rcd-bd.gif" alt="">
<h4>飞科(FLYCO)FS7805鼻毛修剪器 电动鼻毛机 修鼻毛机</h4>
<p>¥25.00</p>
<button><i></i>加入购物车</button>
</a>
</li>
<li>
<a href="#">
<img src="uploads/rcd-bd.gif" alt="">
<h4>飞科(FLYCO)FS7805鼻毛修剪器 电动鼻毛机 修鼻毛机</h4>
<p>¥25.00</p>
<button><i></i>加入购物车</button>
</a>
</li>
<li>
<a href="#">
<img src="uploads/rcd-bd.gif" alt="">
<h4>飞科(FLYCO)FS7805鼻毛修剪器 电动鼻毛机 修鼻毛机</h4>
<p>¥25.00</p>
<button><i></i>加入购物车</button>
</a>
</li>
</ul>
<div class="rcd-arl"><</div>
<div class="rcd-arr">></div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li class="fl">
<i class="mod_service_icon mod_service_zheng fl"></i>
<div class="mod_service_tit fl">
<h5>正品保障</h5>
<p>正品保障,提供发票</p>
</div>
</li>
<li class="fl">
<i class="mod_service_icon mod_service_ji fl"></i>
<div class="mod_service_tit fl">
<h5>极速物流</h5>
<p>极速物流,极速送达</p>
</div>
</li>
<li class="fl">
<i class="mod_service_icon mod_service_wu fl"></i>
<div class="mod_service_tit fl">
<h5>无忧售后</h5>
<p>7天无理由退换货</p>
</div>
</li>
<li class="fl">
<i class="mod_service_icon mod_service_te fl"></i>
<div class="mod_service_tit fl">
<h5>特色服务</h5>
<p>私人订制家电套餐</p>
</div>
</li>
<li class="fl">
<i class="mod_service_icon mod_service_bang fl"></i>
<div class="mod_service_tit fl">
<h5>帮助中心</h5>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl class="mod_help_item fl">
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_item fl">
<dt>配送方式</dt>
<dd><a href="#">上门自提</a></dd>
<dd><a href="#">211限时达</a></dd>
<dd><a href="#">配送服务查询</a></dd>
<dd><a href="#">配送费收取标准</a></dd>
<dd><a href="#">海外配送</a></dd>
</dl>
<dl class="mod_help_item fl">
<dt>支付方式</dt>
<dd><a href="#">货到付款</a></dd>
<dd><a href="#">在线支付</a></dd>
<dd><a href="#">分期付款</a></dd>
<dd><a href="#">邮局汇款</a></dd>
<dd><a href="#">公司转账</a></dd>
</dl>
<dl class="mod_help_item fl">
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">价格保护</a></dd>
<dd><a href="#">退款说明</a></dd>
<dd><a href="#">返修/退换货</a></dd>
<dd><a href="#">取消订单</a></dd>
</dl>
<dl class="mod_help_item fl">
<dt>特色服务</dt>
<dd><a href="#">夺宝岛</a></dd>
<dd><a href="#">DIY装机</a></dd>
<dd><a href="#">延保服务</a></dd>
<dd><a href="#">品优购E卡</a></dd>
<dd><a href="#">品优购通信</a></dd>
</dl>
<div class="mod_help_item mod_help_app fr">
<dl>
<dt>帮助中心</dt>
<dd>
<img src="img/app.png" alt="">
<p>品优购客户端 </p>
</dd>
</dl>
</div>
</div>
<div class="mod_copyright">
<p class="mod_copyright_links">
关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
</p>
<p class="mod_copyright_info">
地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
</body>
</html>
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;
}