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

效果图

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;}

品优购项目--购物车结算页面相关推荐

「学习笔记」品优购项目-上（页面公共部分）
「学习笔记」品优购项目-上品优购项目-上目标品优购项目规划网站制作流程品优购项目介绍品优购项目的学习目的开发工具以及技术栈开发工具技术栈品优购项目搭建工作创建的文件夹如下(称为项 ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
品优购项目的制作——知识分享
目录前言一.首页 1.基本的布局 2.版心部分 3.主要内容模块二.注册页面三.产品列表页面四.产品详情页面总结前言品优购项目是一个需要糅杂大量HTML5+CSS3知识点的网站项目,一 ...
独家首发java品优购项目课程，20天课程，430个知识点！视频+资料全部免费领！
千呼万唤始出来黑马程序员终于将"品优购"项目课程全部免费公开啦~ 划重点原价1690元现在免费领! 此次公开的是全部课程视频+资料资源! 不用在网上东拼西凑的找"品 ...
CSS 8 品优购项目
目录 1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 1.3品优购项目的学习目的 1.4开发工具以及技术栈小总结 1.5品优购项目搭建工作. 1.5.1创建文件夹 1.5.2创建 ...
14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页电商-分类列表页电商-注册页一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...
品优购项目——黑马程序员pink老师/完整源代码/项目讲解/内容补充完善
话不多说先看效果图,源代码在文末首页产品页:根据此前京东抢购案例补充完善注册页文章目录品优购项目规划 1. 网站制作流程 2. 品优购项目整体介绍 3. 开发工具以及技术栈 4. 品优购项目 ...
品优购项目学习---基本概述(简略)
做项目期间看不懂的可以查阅标记有注的这些部分的内容一定会有你的需要的答案哦如果没有那小卓这边建议可以直接私信小卓小卓一定尽力提供最优解释哈等第二遍做的时候进行梳理注: CS ...
Web前端开发——品优购项目(上)
品优购项目介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成 PC 端首页.列表页.注册页面的制作主页列表页注册页品优购项目的学习目的电商类网站比较综合,里面需要大量的布局技 ...

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

品优购项目--购物车结算页面相关推荐

最新文章

热门文章