1 项目login登录页制作
1.1 项目登录页代码
1.1.1 项目login.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人登录</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/register.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="w login-hd">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt=""></a>
</div>
</div>
<div class="login-md">
<div class="w">
<div class="login-md-fr">
<div class="login-md-top">
<div class="top-left">扫描登陆</div>
<div class="top-right">账户登录</div>
</div>
<div class="jianyi">
公共场所不建议自动登录，以免账号丢失
</div>
<div class="login-main">
<ul>
<li>
<span class="main-icon-person"><img src="images/icon1.png" alt=""></span>
<input type="text" value="" placeholder="邮箱/用户名/手机号">
</li>
<li>
<span class="main-icon-lock"><img src="images/icon2.png" alt=""></span>
<input type="password" value="" placeholder="请输入密码">
</li>
</ul>
</div>
<div class="bottom">
<input type="checkbox" name="" id="">
<span>自动登录</span>
<span class="bottom-wangji"><a href="#">忘记密码?</a></span>
</div>
<div class="bottom-login">
<input type="submit" value="登 录" class="btm">
</div>
<div class="login-items">
<ul>
<li>
<a href="https://im.qq.com/index" class="login-item1"><img src="images/regetype1.png" alt=""></a>
</li>
<li>
<a href="https://weibo.com/login.php" class="login-item2"><img src="images/regetype2.png" alt=""></a>
</li>
<li>
<a href="https://www.alipay.com/" class="login-item3"><img src="images/regetype3.png" alt=""></a>
</li>
<li>
<a href="https://wx.qq.com/" class="login-item4"><img src="images/regetype4.png" alt=""></a>
</li>
<li class="login-item5">
<a href="register.html">立即注册</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="w">
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a> | <a href="#">手机优品铺</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">优品铺社区</a> | <a href="#">优品铺公益</a> | <a href="#">English Site</a> | <a href="#">Contact U</a>
</div>
<div class="copyright">
地址：陕西省西安市长安区西安财经大学 邮编：710100 电话：151-2973-6662 传真：000-00000000 邮箱: wangggyy2001@163.com <br />
京ICP备08001421号京公网安备110108007702
</div>
</div>
</div>
</body>
</html>
1.1.2 项目login.css代码
.login-hd {
height: 84px;
}
.login-md {
height: 486px;
background: url(../images/login.jpg) no-repeat center;
background-color: #7f00ff;
}
.login-md-fr {
display: inline-block;
width: 379px;
height: 362px;
background-color: #fff;
margin-left: 700px;
margin-top: 62px;
padding:22px 37px 16px 37px;
}
.top-left,
.top-right {
display: inline-block;
width: 144px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 18px;
}
.top-left {
border-right: 1px solid #ededed;
color: #666;
}
.top-right {
color: #c81623;
}
.jianyi {
width: 302px;
height: 26px;
line-height: 26px;
padding-left: 9px;
color: #666;
background-color: #fffdee;
border: 1px solid #f5eecf;
margin: 18px 0 10px;
}
.login-main ul li {
width: 302px;
height: 36px;
border: 1px solid #bbbaba;
margin-bottom: 20px;
}
.main-icon-person,
.main-icon-lock {
float: left;
vertical-align: middle;
}
.login-main ul li input {
display: inline-block;
height: 34px;
width: 263px;
line-height: 34px;
padding-left: 10px;
font-size: 14px;
color: #b3b3b3;
}
.bottom {
display:block;
width: 303px;
height: 14px;
margin-bottom: 20px;
}
.bottom input {
display: inline-block;
width: 12px;
height: 12px;
vertical-align: middle;
}
.bottom span {
font-size: 12px;
color: #b3b3b3;
vertical-align: middle;
}
.bottom .bottom-wangji {
float: right;
color: #333;
padding-right: 5px;
}
.btm {
width: 303px;
height: 40px;
background-color: #c81623;
font-size: 16px;
color: #fff;
line-height: 40px;
margin-bottom: 32px;
}
.login-items ul {
width: 303px;
height: 32px;
}
.login-item1,
.login-item2,
.login-item3,
.login-item4 {
float: left;
margin-right: 15px;
}
.login-item5 {
float: right;
margin-top: 4px;
margin-right: 5px;
}
.login-item5 a {
font-size: 14px;
color: #1474af;
}在这里插入代码片
2 项目details产品详情页制作
2.1 项目产品详情页代码
2.1.1 项目details.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品详情-正品低价、品质保障！</title>
<meta name="description"content="小王优品铺-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！" />
<meta name="keywords" content="网上购物，网上商城手机，笔记本，电脑，MP3，CD，VCD，DV，相机，数码，配件，手表存储卡，京东" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/details.css">
</head>
<body>
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>小王优品铺欢迎您！ </li>
<li>
<a href="#">请登录</a> <a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="arrow-icon">我的优品铺</li>
<li></li>
<li>优品铺会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arrow-icon">关注优品铺</li>
<li></li>
<li class="arrow-icon">客户服务</li>
<li></li>
<li class="arrow-icon">网站导航</li>
</ul>
</div>
</div>
</section>
<header class="header w">
<div class="logo">
<h1>
<a href="#index.html" title="小王优品铺">小王优品铺</a>
</h1>
</div>
<div class="search">
<input type="search" name="" id="" placeholder="语言开发">
<button>搜索</button>
</div>
<div class="hotwords">
<a href="" class="style_red">优惠购首发</a>
<a href="">亿元优惠</a>
<a href="">9.9元团购</a>
<a href="">每满99减30</a>
<a href="">办公用品</a>
<a href="">电脑</a>
<a href="">通信</a>
</div>
<div class="shopcar">
我的购物车
<i class="count">8</i>
</div>
</header>
<nav class="nav">
<div class="w">
<div class="dropdown">
<div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li><a href="list.html">家用电器</a></li>
<li><a href="list.html">手机</a>、<a href="list.html">数码</a>、<a href="list.html">通信</a></li>
<li><a href="list.html">电脑</a>、<a href="list.html">办公</a></li>
<li><a href="list.html">家居</a>、<a href="list.html">家具</a>、<a href="list.html">家装</a>、<a href="list.html">厨具</a></li>
<li><a href="list.html">男装</a>、<a href="list.html">女装</a>、<a href="list.html">童装</a>、<a href="list.html">内衣</a></li>
<li><a href="list.html">个护化妆</a>、<a href="list.html">清洁用品</a>、<a href="list.html">宠物</a></li>
<li><a href="list.html">鞋靴</a>、<a href="list.html">箱包</a>、<a href="list.html">珠宝</a>、<a href="list.html">奢侈品</a></li>
<li><a href="list.html">运动户外</a>、<a href="list.html">钟表</a></li>
<li><a href="list.html">汽车</a>、<a href="list.html">汽车用品</a></li>
<li><a href="list.html">母婴</a>、<a href="list.html">玩具乐器</a></li>
<li><a href="list.html">食品</a>、<a href="list.html">酒类</a>、<a href="list.html">生鲜</a>、<a href="list.html">特产</a></li>
<li><a href="list.html">医药保健</a></li>
<li><a href="list.html">图书</a>、<a href="list.html">音像</a>、<a href="list.html">电子书</a></li>
<li><a href="list.html">彩票</a>、<a href="list.html">旅行</a>、<a href="list.html">充值</a>、<a href="list.html">票务</a></li>
<li><a href="list.html">理财</a>、<a href="list.html">众筹</a>、<a href="list.html">白条</a>、<a href="list.html">保险</a></li>
</ul>
</div>
</div>
<div class="navitems">
<ul>
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆</a></li>
<li><a href="#">小王超市</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">有趣</a></li>
</ul>
</div>
</div>
</nav>
<div class="w things">
<div class="details-top">
<div class="top1">
<a href="#">手机、数码、通讯</a>
<a href="#">手机</a>
<a href="#">Apple苹果</a>
<a href="#">iphone 6S plus系类</a>
</div>
<div class="top2">
<img src="upload/details-top1.png" alt="" class="img1">
<ul>
<li></li>
<li><img src="upload/details-top2.png" alt=""></li>
<li><img src="upload/details-top3.png" alt=""></li>
<li><img src="upload/details-top4.png" alt=""></li>
<li><img src="upload/details-top5.png" alt=""></li>
<li><img src="upload/details-top6.png" alt=""></li>
<li></li>
</ul>
<p>
<i>商品编号：0468256644</i>
<i>分享</i>
<i>关注 5000</i>
<input type="checkbox" name="" id="">
<i>对比</i>
</p>
</div>
<div class="top3">
<h2>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h2>
<p>推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
<div class="price">
<dl class="price1">
<dd class="dd1">价       格</dd>
<dt class="dt1">
<span class="jiangjia">￥<i>5299.00</i>降价通知</span>
<span class="pingjia">累计评价<i>612188</i></span>
</dt>
</dl>
<dl class="price2">
<dd class="dd2">促       销</dd>
<dt class="dt2">
<span><i>加价购</i>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品 详情 》</span>
</dt>
</dl>
</div>
<dl class="zhichi">
<dd class="dd3">支       持</dd>
<dt class="dt3">以旧换新，闲置手机回收    4G套餐超值抢    礼品购</dt>
</dl>
<dl class="peisong">
<dd class="dd4">配  送  至</dd>
<dt class="dt4">
<i class="i1"><em>北京海淀区中关</em>有货    支持    99元免运费    | 货到付款    | 211限时达</i>
<i class="i2">由自营发货，并提供售后服务。11:00前完成下单，预计<em>今天（08月10日）送达</em></i>
</dt>
</dl>
<div class="specification">
<dl class="color">
<dd class="dd5">选择颜色</dd>
<dt class="dt5">
<a href="#">金 色</a>
<a href="#">银 色</a>
<a href="#">黑 色</a>
<a href="#">玫瑰金</a>
</dt>
</dl>
<dl class="version">
<dd class="dd6">选择版本</dd>
<dt class="dt6">
<a href="#">公开版</a>
<a href="#">移动4G</a>
</dt>
</dl>
<dl class="capacity">
<dd class="dd7">选择容量</dd>
<dt class="dt7">
<a href="#">16G</a>
<a href="#">64G</a>
<a href="#">128G</a>
</dt>
</dl>
<dl class="manner">
<dd class="dd8">购买方式</dd>
<dt class="dt8">
<a href="#">官方标配</a>
<a href="#">移动优惠购</a>
<a href="#">电信优惠购</a>
</dt>
</dl>
<dl class="suit">
<dd class="dd9">套       装</dd>
<dt class="dt9">
<a href="#">保护套装</a>
<a href="#">充电套装</a>
</dt>
</dl>
</div>
<div class="number">
<div class="number1">
<div class="number1-fl">1</div>
<div class="number1-fr">
<div class="fr1"><a href="#">+</a></div>
<div class="fr2"><a href="#">-</a></div>
</div>
</div>
<div class="number2">
<button>加入购物车</button>
</div>
</div>
</div>
</div>
<div class="details-middle">
<div class="middle1">
<span class="category">相关分类</span>
<span class="recommend">推荐品牌</span>
<div class="type">
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">手机壳</a></li>
<li><a href="#">内存卡</a></li>
<li><a href="#">iphone配件</a></li>
<li><a href="#">贴膜</a></li>
<li><a href="#">手机耳机</a></li>
<li><a href="#">移动电源</a></li>
<li><a href="#">平板电脑</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">蓝牙耳机</a></li>
</ul>
</div>
<div class="wenzi">购买了此商品的用户还买了</div>
<div class="commodity">
<ul>
<li>
<a href="#">
<img src="upload/details-middle1.png" alt="">
<p>羽博 10000mah 双USB Y7移动充电宝</p>
</a>
<span>￥49</span>
<button>加入购物车</button>
</li>
<li>
<a href="#">
<img src="upload/details-middle2.png" alt="">
<p>蓝孩 苹果iPhone6S 抗蓝光防爆钢化膜</p>
</a>
<span>￥19</span>
<button>加入购物车</button>
</li>
<li>
<a href="#">
<img src="upload/details-middle3.png" alt="">
<p>半岛铁盒 移动电源</p>
</a>
<span>￥29</span>
<button>加入购物车</button>
</li>
<li>
<a href="#">
<img src="upload/details-middle1.png" alt="">
<p>羽博 10000mah 双USB Y7移动充电宝</p>
</a>
<span>￥49</span>
<button>加入购物车</button>
</li>
<li>
<a href="#">
<img src="upload/details-middle2.png" alt="">
<p>蓝孩 苹果iPhone6S 抗蓝光防爆钢化膜</p>
</a>
<span>￥19</span>
<button>加入购物车</button>
</li>
<li>
<a href="#">
<img src="upload/details-middle3.png" alt="">
<p>半岛铁盒 移动电源</p>
</a>
<span>￥29</span>
<button>加入购物车</button>
</li>
</ul>
</div>
</div>
<div class="middle2">
<div class="collocation">
<div class="box1"><a href="#">选择搭配</a></div>
<div class="box2">
<div class="box2-fl">
<span><a href="#">精品</a></span>
<span><a href="#">iphone配件</a></span>
<span><a href="#">蓝牙耳机</a></span>
<span><a href="#">自拍杆</a></span>
<span><a href="#">数据线</a></span>
<span><a href="#">其他手机配件</a></span>
<span><a href="#">U盘</a></span>
<ul>
<li>
<a href="#"><img src="upload/details-middle4.png" alt=""></a>
<div class="price">￥5299.00</div>
</li>
<li class="jiahao">+</li>
<li>
<a href="#"><img src="upload/details-middle5.png" alt=""></a>
<div class="wenzi">Feless费勒斯VR眼镜</div>
<input type="checkbox" name="" id="">
<p>￥39.00</p>
</li>
<li>
<a href="#"><img src="upload/details-middle6.png" alt=""></a>
<div class="wenzi">ROCK洛克VR眼镜虚拟眼镜</div>
<input type="checkbox" name="" id="">
<p>￥76.00</p>
</li>
<li>
<a href="#"><img src="upload/details-middle7.png" alt=""></a>
<div class="wenzi">Faseyes爱易思电动牙刷</div>
<input type="checkbox" name="" id="">
<p>￥76.00</p>
</li>
<li>
<a href="#"><img src="upload/details-middle8.png" alt=""></a>
<div class="wenzi">Faseyes爱易思懒人手机支架</div>
<input type="checkbox" name="" id="">
<p>￥76.00</p>
<div class="kuohao"> > </div>
</li>
</ul>
</div>
<div class="box2-fr">
<p>已选购0件搭配</p>
<h4>套餐价:</h4>
<span><i>￥</i>5299.00</span>
<button>加入购物车</button>
</div>
</div>
</div>
<div class="introduce">
<div class="box1">
<a href="#">商品介绍</a>
<a href="#">规格与包装</a>
<a href="#">售后保障</a>
<a href="#">商品评价(50000)</a>
<a href="#">手机社区</a>
</div>
<div class="box2">
<p>分辨率：1920*1080(FHD)</p>
<p>后置摄像头：1200万像素</p>
<p>前置摄像头：500万像素</p>
<p>核 数：其他</p>
<p>频 率：以官网信息为准</p>
<p>品牌： Apple 关注</p>
<p>商品名称：APPLEiPhone 6s Plus</p>
<p>商品编号：1861098</p>
<p>商品毛重：0.51kg</p>
<p>商品产地：中国大陆</p>
<p>热点：指纹识别，Apple Pay，金属机身，拍照神器</p>
<p>系统：苹果（IOS）</p>
<p>像素：1000-1600万</p>
<p>机身内存：64GB</p><a href="#"></a>
<a href="#">查看更多参数 </a>
</div>
</div>
<div class="img">
<img src="upload/details-middle9.png" alt="">
<img src="upload/details-middle10.png" alt="">
<img src="upload/details-middle11.png" alt="">
</div>
</div>
</div>
<div class="detailes-bottom">
<div class="bottom1">猜你喜欢</div>
<div class="bottom2">
<ul>
<li>
<a href="#">
<img src="upload/details-bottom1.png" alt="">
<p>DELL戴尔Ins 15MR-75 28SS 15英寸 银色 笔记</p>
<div class="price">￥3699</div>
</a>
<span>已有<i>6</i>人评价</span>
</li>
<li>
<a href="#">
<img src="upload/details-bottom2.png" alt="">
<p>Apple/苹果 iPhone 6s /6 s Plus 16G 64G 128G</p>
<div class="price">￥4398</div>
</a>
<span>已有<i>6</i>人评价</span>
</li>
<li>
<a href="#">
<img src="upload/details-bottom3.png" alt="">
<p>JBL OnBeat Rumble 无线蓝牙派对多媒体音响</p>
<div class="price">￥1898</div>
</a>
<span>已有<i>700</i>人评价</span>
</li>
<li>
<a href="#">
<img src="upload/details-bottom4.png" alt="">
<p>EXCO宜适酷 全屏钢化玻璃膜For iPhone6s/6 plus</p>
<div class="price">￥59</div>
</a>
<span>已有<i>700</i>人评价</span>
</li>
<li>
<a href="#">
<img src="upload/details-bottom5.png" alt="">
<p>Apple 苹果 iPhone 6 (A1 586) 16G 金色 移动联通</p>
<div class="price">￥3799</div>
</a>
<span>已有<i>6</i>人评价</span>
</li>
<li>
<a href="#">
<img src="upload/details-bottom6.png" alt="">
<p>半岛铁盒移动电源A2200白色 2200mAh</p>
<div class="price">￥19</div>
</a>
<span>已有<i>700</i>人评价</span>
</li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>急速物流</h4>
<p>急速物流，急速送达</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>无忧售后</h4>
<p>七天无理由退换货</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>特色服务</h4>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl>
<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>
<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>
<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>
<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>
<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>
<dl>
<dt>帮助中心</dt>
<dd>
<img src="images/wx_cz.jpg" alt="">
小王优品铺官方客服
</dd>
</dl>
</div>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a> | <a href="#">手机优品铺</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">优品铺社区</a> | <a href="#">优品铺公益</a> | <a href="#">English Site</a> | <a href="#">Contact U</a>
</div>
<div class="copyright">
地址：陕西省西安市长安区西安财经大学 邮编：710100 电话：151-2973-6662 传真：000-00000000 邮箱: wangggyy2001@163.com <br />
京ICP备08001421号京公网安备110108007702
</div>
</div>
</div>
</footer>
</body>
</html>
2.1.2 项目details.css代码
.nav .w .dropdown .dd {
display: none;
}
.details-top {
height: 607px;
}
.details-top .top1 {
margin-top: 25px;
height: 13px;
line-height: 13px;
font-size: 12px;
}
.details-top .top1 a {
color: #333;
}
.details-top .top1 a::after {
content: '\e9ed';
font-family: "iconfont";
margin: 0 20px;
}
.details-top .top2 {
float: left;
width: 400px;
height: 575px;
margin-top: 20px;
}
.details-top .top2 .img1 {
border: 1px solid #ededed;
}
.details-top .top2 ul {
width: 400px;
height: 57px;
margin: 60px 0 40px;
}
.details-top .top2 ul li {
float: left;
background-color: #f1f1f1;
}
.details-top .top2 ul li:first-child,
.details-top .top2 ul li:last-child {
width: 60px;
height: 56px;
line-height: 56px;
font-family: "iconfont";
font-size: 40px;
text-align: center;
color: #dddddd;
}
.details-top .top2 ul li:first-child::before {
content: '\e9ec';
}
.details-top .top2 ul li:last-child::after {
content: '\e9ed';
}
.details-top .top2 p i {
margin-right: 26px;
font-size: 12px;
color: #666;
}
.details-top .top2 p i:nth-child(2)::before,
.details-top .top2 p i:nth-child(3)::before {
font-family: "iconfont";
margin-right: 5px;
color: #c81623;
}
.details-top .top2 p i:nth-child(2)::before {
content: '\eed3';
}
.details-top .top2 p i:nth-child(3)::before {
content: '\eea1';
}
.details-top .top3 {
float: right;
width: 719px;
height: 568px;
margin-top: 1px;
}
.details-top .top3 h2 {
font-size: 16px;
color: #333;
}
.details-top .top3 p {
font-size: 12px;
color: #e12228;
margin: 12px 0 12px;
}
.details-top .top3 dd {
display: inline-block;
font-size: 12px;
color: #666;
width: 50px;
height: 12px;
line-height: 12px;
margin-right: 10px;
}
.details-top .top3 dt {
display: inline-block;
font-size: 12px;
color: #999999;
}
.details-top .top3 .price {
width: 718px;
height: 112px;
background-color: #fee9eb;
margin-left: 1px;
padding: 10px 0 0 9px;
}
.details-top .top3 .price .price1 {
position: relative;
}
.details-top .top3 .price .price1 .jiangjia {
color: #c81623;
}
.details-top .top3 .price .price1 .jiangjia i {
font-size: 24px;
font-weight: 700;
margin: 0 3px;
color: #e12228;
}
.details-top .top3 .price .price1 .pingjia {
position: absolute;
top: 15px;
right: 10px;
}
.details-top .top3 .price .price1 .pingjia i {
color: #1474af;
}
.details-top .top3 .price .price2 .dd2 {
position: relative;
top: -28px;
left: 0;
}
.details-top .top3 .price .price2 span {
display: inline-block;
width: 560px;
line-height: 28px;
}
.details-top .top3 .price .price2 i {
display: inline-block;
width: 40px;
height: 22px;
color: #ffffff;
background-color: #c81623;
margin-right: 8px;
line-height: 22px;
text-align: center;
}
.zhichi,
.peisong {
padding: 4px 0 3px 10px;
}
.peisong .dd4 {
position: relative;
top: -28px;
left: 0;
}
.peisong .dt4 i {
display: block;
}
.peisong .dt4 .i1::after,
.peisong .dt4 .i1 em::after {
content: '\e9e8';
font-family: "iconfont";
margin: 0 10px;
}
.peisong .dt4 .i2 {
margin-top: 9px;
}
.peisong .dt4 .i2 em {
font-weight: 700;
}
.specification {
width: 545px;
margin: 5px 0 5px 10px;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
}
.color,
.version,
.capacity,
.manner,
.suit {
margin: 5px 0;
}
.specification a {
display: inline-block;
width: 82px;
height: 43px;
line-height: 43px;
text-align: center;
background-color: #f7f7f7;
color: #333;
border: 1px solid #ededed;
}
.number .number1,
.number .number2 {
float: left;
}
.number .number1 .number1-fl,
.number .number1 .number1-fr {
float: left;
}
.number .number1 {
width: 52px;
height: 46px;
border: 1px solid #cccccc;
margin-left: 11px;
}
.number1-fl {
width: 33px;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 25px;
color: #000;
}
.number1-fr {
width: 16px;
height: 44px;
border-left: 1px solid #cccccc;
}
.number1-fr .fr1,
.number1-fr .fr2 {
width: 16px;
height: 22px;
line-height: 22px;
text-align: center;
background-color: #f1f1f1;
}
.number1-fr .fr1 {
border-bottom: 1px solid #cccccc;
}
.number1-fr .fr1 a,
.number1-fr .fr2 a {
width: 16px;
height: 22px;
font-size: 18px;
color: #666666;
}
.number2 button {
width: 142px;
height: 46px;
background-color: #c81623;
margin-left: 10px;
font-size: 18px;
color: #ffffff;
}
.details-middle {
height: 2385px;
margin: 30px 0 20px;
}
.middle1 {
float: left;
width: 210px;
height: 2385px;
border: 1px solid #dddddd;
}
.category,
.recommend {
float: left;
display: block;
width: 104px;
height: 33px;
line-height: 33px;
text-align: center;
font-size: 12px;
}
.category {
background-color: #fff;
color:#c81623;
}
.recommend {
background-color: #f1f1f1;
color: #333;
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.middle1 .type ul {
padding: 0 11px;
}
.middle1 .type ul li {
float: left;
width: 92px;
height: 29px;
line-height: 29px;
text-align: left;
border-bottom: 1px dashed #ededed;
font-size: 12px;
color: #333;
}
.middle1 .type ul li:nth-child(9),
.middle1 .type ul li:nth-child(10) {
border: none;
}
.middle1 .wenzi {
display: inline-block;
padding-left: 11px;
height: 37px;
line-height: 37px;
font-size: 14px;
color: #333;
}
.middle1 .commodity ul {
margin-left: 10px;
}
.middle1 .commodity ul li {
width: 190px;
border-top: 1px solid #e5e5e5;
}
.middle1 .commodity ul li p {
font-size: 12px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.middle1 .commodity ul li span {
display: block;
font-size: 12px;
font-weight: 700;
color: #333;
margin:17px 0 2px ;
}
.middle1 .commodity ul li button {
width: 90px;
height: 28px;
line-height: 28px;
background-color: #f7f7f7;
margin:0 50px 20px;
font-size: 14px;
border: 1px solid #dddddd;
}
.middle2 {
float: right;
width: 981px;
height: 2385px;
}
.middle2 .collocation {
height: 303px;
border: 1px solid #dddddd;
}
.middle2 .collocation .box1 {
height: 41px;
border-bottom: 1px solid #dddddd;
background-color: #f1f1f1;
}
.middle2 .collocation .box1 a {
display: inline-block;
background-color: #c81623;
font-size: 12px;
width: 120px;
height: 41px;
line-height: 41px;
text-align: center;
color: #fff;
}
.middle2 .collocation .box2 .box2-fl {
float: left;
width: 809px;
height: 260px;
}
.middle2 .collocation .box2 .box2-fl span {
display: inline-block;
margin: 12px 15px 26px;
}
.middle2 .collocation .box2 .box2-fl ul {
margin-left: 17px;
}
.middle2 .collocation .box2 .box2-fl ul li {
float: left;
}
.middle2 .collocation .box2 .box2-fl ul li .price {
display: block;
width: 130px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
font-weight: 700;
color: #e12228;
}
.middle2 .collocation .box2 .box2-fl ul .jiahao {
display: block;
width: 35px;
height: 130px;
line-height: 130px;
text-align: center;
font-size: 16px;
font-weight: 700;
margin-right: 10px;
}
.middle2 .collocation .box2 .box2-fl ul li .wenzi{
display: block;
width: 109px;
margin: 9px 0 5px 7px;
color: #333;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.middle2 .collocation .box2 .box2-fl ul li input {
display: inline-block;
}
.middle2 .collocation .box2 .box2-fl ul li p {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: #e12228;
}
.middle2 .collocation .box2 .box2-fl ul li:last-child {
position: relative;
}
.middle2 .collocation .box2 .box2-fl ul li .kuohao {
position: absolute;
top: 42px;
right: -1px;
display: block;
width: 20px;
height: 50px;
line-height: 50px;
padding-left: 2px;
background-color: #dddddd;
font-size: 25px;
font-weight: 700;
color: #fdfdfd;
}
.middle2 .collocation .box2 .box2-fr {
float: left;
width: 170px;
height: 260px;
padding: 46px 0 0 16px;
border-left: 1px solid #dddddd;
}
.middle2 .collocation .box2 .box2-fr p {
font-size: 12px;
color: #333;
}
.middle2 .collocation .box2 .box2-fr h4 {
font-size: 12px;
color: #333;
font-weight: 700;
margin: 18px 0 10px;
}
.middle2 .collocation .box2 .box2-fr span {
font-style: 24px;
color: #e12228;
font-weight: 700;
}
.middle2 .collocation .box2 .box2-fr span i {
font-style: 16px;
}
.middle2 .collocation .box2 .box2-fr button {
display: inline-block;
width: 142px;
height: 46px;
line-height: 46px;
text-align: center;
background-color: #c81623;
color: #fff;
font-size: 18px;
margin-top: 47px;
margin-right: 10px;
}
.middle2 .introduce {
height: 372px;
border-bottom: 1px solid #dddddd;
margin-top: 21px;
}
.middle2 .introduce .box1 {
height: 41px;
border: 1px solid #dddddd;
background-color: #f1f1f1;
}
.middle2 .introduce .box1 a {
display: inline-block;
font-size: 12px;
width: 120px;
height: 41px;
line-height: 41px;
text-align: center;
color: #333;
}
.middle2 .introduce .box1 a:first-child {
background-color: #c81623;
color: #fff;
}
.middle2 .introduce .box1 a:hover {
background-color: #c81623;
color: #fff;
}
.middle2 .introduce .box2 {
position: relative;
width: 980px;
height: 330px;
padding: 22px 0 18px 20px;
font-size: 12px;
line-height: 21px;
color: #666;
}
.middle2 .introduce .box2 a {
position: absolute;
bottom: 20px;
right: 25px;
height: 17px;
line-height: 17px;
color: #333;
font-size: 12px;
font-weight: 700;
}
.middle2 .introduce .box2 a::after {
content: '\e9e8';
font-family: "iconfont";
}
.detailes-bottom {
height: 338px;
border: 1px solid #ededed;
margin-bottom: 20px;
}
.bottom1 {
height: 39px;
line-height: 39px;
border-bottom: 1px solid #ededed;
background-color: #f1f1f1;
font-size: 16px;
padding-left: 10px;
}
.bottom2 ul li {
float: left;
width: 16.666%;
}
.bottom2 ul li p {
display: inline-block;
width: 139px;
font-size: 10px;
margin: 14px 34px 11px ;
line-height: 20px;
color: #333;
}
.bottom2 ul li .price {
margin-left: 34px;
margin-bottom:22px;
font-size: 16px;
color: #cc0000;
}
.bottom2 ul li span {
margin-left: 28px;
font-size: 10px;
color: #999999;
}
.bottom2 ul li span i {
color: #0777ce;
}
3 项目settlement购物车结算页制作
3.1 项目购物车结算页代码
3.1.1 项目settlement.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车结算</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/settlement.css">
</head>
<body>
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>小王优品铺欢迎您！ </li>
<li>
<a href="#">请登录</a> <a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="arrow-icon">我的优品铺</li>
<li></li>
<li>优品铺会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arrow-icon">关注优品铺</li>
<li></li>
<li class="arrow-icon">客户服务</li>
<li></li>
<li class="arrow-icon">网站导航</li>
</ul>
</div>
</div>
</section>
<div class="w">
<header>
<div class="header-fl">
<a href="index.html"><img src="images/logo.png" alt=""></a>
<span>购物车</span>
</div>
<div class="header-fr">
<input type="search" name="" id="" placeholder="自营">
<button>搜索</button>
</div>
</header>
<div class="settlement">
<h2>全部商品 11</h2>
<div class="select">
<ul>
<li><input type="checkbox" name="" id="" checked="checked">全选</li>
<li>商品</li>
<li>单价（元）</li>
<li>数量</li>
<li>小计（元）</li>
<li>操作</li>
</ul>
</div>
<div class="box-hd">
<div class="box-hd-fl">
<input type="checkbox" name="" id="">
<span>小王自营店</span>
</div>
<div class="box-hd-fr">运费:￥6.00 <em>还差￥99.00免运费</em></div>
</div>
<div class="box-bd">
<ul>
<li class="goods1">
<ul>
<li>
<input type="checkbox" name="" id="">
<img src="upload/settlement-goods1.png" alt="">
</li>
<li>
<p>苹果（Apple）MD463FE/A MAC<br />Thunderbolt雷电接口 至千兆以太网转</p>
<span>购买礼品包装</span>
</li>
<li class="chima">
尺码：Thunderbolt至千兆以太网转
</li>
<li>￥248.00</li>
<li class="yh">
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="yh4">有货</div>
</li>
<li>￥248.00</li>
<li class="action">
<a href="#">删除</a><br />
<a href="#">移到我的关注</a>
</li>
</ul>
</li>
<li class="goods2">
<div class="huangou">
<i>换购</i>
<p>活动商品购满2888.00元，即可加价换购商品1件</p>
<span><a href="#">查看换购品</a></span>
<p><a href="#">去凑单</a></p>
</div>
<ul>
<li>
<input type="checkbox" name="" id="">
<img src="upload/settlement-goods2.png" alt="">
</li>
<li>
<p>Apple Macbook Air 13.3英寸笔记本电脑<br />银色（Corei5）处理器/8GB内存</p>
</li>
<li class="chima">
颜色MzcBook爱人<br />尺寸：13.3英寸
</li>
<li>￥8488.00</li>
<li class="yh">
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="yh4">有货</div>
</li>
<li>￥8488.00</li>
<li class="action">
<a href="#">删除</a><br />
<a href="#">移到我的关注</a>
</li>
</ul>
<div class="zengpin">
<p><em>[赠品]圣迪威（Sendio）MacBook13.3寸屏幕保护包</em>X1</p>
<p><em>[赠品]圣迪威（Sendio）MacBook13.3清洁套装用品</em>X1</p>
</div>
</li>
<li class="goods3">
<ul>
<li>
<input type="checkbox" name="" id="">
<img src="upload/settlement-goods3.png" alt="">
</li>
<li>
<p>半岛铁盒移动电源A2200<br />白色2200mah</p>
<span>购买礼品包装</span>
</li>
<li class="chima">
型号：A2200
</li>
<li>￥19.00</li>
<li class="yh">
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="yh4">有货</div>
</li>
<li>￥19.00</li>
<li class="action">
<a href="#">删除</a><br />
<a href="#">移到我的关注</a>
</li>
</ul>
</li>
<li class="goods1">
<ul>
<li>
<input type="checkbox" name="" id="">
<img src="upload/settlement-goods1.png" alt="">
</li>
<li>
<p>苹果（Apple）MD463FE/A MAC<br />Thunderbolt雷电接口 至千兆以太网转</p>
<span>购买礼品包装</span>
</li>
<li class="chima">
尺码：Thunderbolt至千兆以太网转
</li>
<li>￥248.00</li>
<li class="yh">
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="yh4">有货</div>
</li>
<li>￥248.00</li>
<li class="action">
<a href="#">删除</a><br />
<a href="#">移到我的关注</a>
</li>
</ul>
</li>
<li class="goods4">
<ul>
<li>
<input type="checkbox" name="" id="">
<img src="upload/settlement-goods4.png" alt="">
</li>
<li>
<p>苹果（Apple）iPhone6(a1586)<br />16g 金色移动联通</p>
<span>购买礼品包装</span>
</li>
<li class="chima">
颜色：金色
</li>
<li>￥3799.00</li>
<li class="yh">
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="yh4">有货</div>
</li>
<li>￥3799.00</li>
<li class="action">
<a href="#">删除</a><br />
<a href="#">移到我的关注</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="box-hd2">
<input type="checkbox" name="" id="">
<span>神州数码专营店</span>
</div>
<div class="box-bd2">
<ul>
<li class="goods5">
<div class="huangou">
<i>换购</i>
<p>活动商品购满2888.00元，即可加价换购商品1件</p>
<span><a href="#">查看换购品</a></span>
<p><a href="#">去凑单</a></p>
</div>
<ul>
<li>
<input type="checkbox" name="" id="">
<img src="upload/settlement-goods5.png" alt="">
</li>
<li>
<p>DELL 戴尔Ins 15MR-75 28SS15英寸<br />银色（Corei5）处理器/8GB内存</p>
</li>
<li class="chima">
颜色:银色<br />尺寸：13.3英寸
</li>
<li>￥3699.00</li>
<li class="yh">
<div class="youhuo">
<div class="yh1">-</div>
<div class="yh2">1</div>
<div class="yh3">+</div>
</div>
<div class="yh4">有货</div>
</li>
<li>￥3699.00</li>
<li class="action">
<a href="#">删除</a><br />
<a href="#">移到我的关注</a>
</li>
</ul>
<div class="zengpin">
<p><em>[赠品]圣迪威（Sendio）MacBook13.3寸屏幕保护包</em>X1</p>
<p><em>[赠品]圣迪威（Sendio）MacBook13.3清洁套装用品</em>X1</p>
</div>
</li>
</ul>
</div>
<div class="lastset">
<div class="lastset-l">
<input type="checkbox" name="" id="">全选
<a href="#">删除选中的商品</a>
<a href="#">移到我的关注</a>
<a href="#">清除下架商品</a>
</div>
<div class="lastset-r">
<a href="#">结 算</a>
</div>
<div class="lastset-m">
<p>已选择0件商品 总价（不含运费） : <em>￥16283.00</em></p>
<p>已节省 : -￥20.00</p>
</div>
</div>
<div class="delete">
<div class="delete-hd">
已删除商品，您可以重新购买或加关注：
</div>
<div class="delete-bd">
<span>圣迪威（Sendio）MacBook13.3清洁套装用品</span>
<span>￥8488.00</span>
<span>1</span>
<span>
<a href="#">重新购买</a>
<a href="#">移到我的关注</a>
</span>
</div>
</div>
<div class="guess">
<div class="guess-hd">
<ul>
<li><a href="#">猜你喜欢</a></li>
<li><a href="#">特惠换购</a></li>
</ul>
</div>
<div class="guess-bd">
<div class="guess-bdl"> < </div>
<ul>
<li>
<a href="#">
<img src="upload/settlement-guess1.png" alt="">
<h4>飞科（FLYCO）FS7805鼻毛修剪器 电动鼻毛器 修鼻毛机</h4>
<p>￥25.00</p>
<button><i></i>加入购物车</button>
</a>
</li>
<li>
<a href="#">
<img src="upload/settlement-guess2.png" alt="">
<h4>飞科（FLYCO）FS7805鼻毛修剪器 电动鼻毛器 修鼻毛机</h4>
<p>￥29.00</p>
<button><i></i>加入购物车</button>
</a>
</li>
<li>
<a href="#">
<img src="upload/settlement-guess3.png" alt="">
<h4>飞科（FLYCO）FH6218大功率电吹风机2000W负离子</h4>
<p>￥69.00</p>
<button><i></i>加入购物车</button>
</a>
</li>
<li>
<a href="#">
<img src="upload/settlement-guess4.png" alt="">
<h4>飞科（FLYCO）FC5808专业电动理发器成人儿童电推剪</h4>
<p>￥59.00</p>
<button><i></i>加入购物车</button>
</a>
</li>
</ul>
<div class="guess-bdr"> > </div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>急速物流</h4>
<p>急速物流，急速送达</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>无忧售后</h4>
<p>七天无理由退换货</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>特色服务</h4>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl>
<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>
<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>
<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>
<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>
<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>
<dl>
<dt>帮助中心</dt>
<dd>
<img src="images/wx_cz.jpg" alt="">
小王优品铺官方客服
</dd>
</dl>
</div>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a> | <a href="#">手机优品铺</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">优品铺社区</a> | <a href="#">优品铺公益</a> | <a href="#">English Site</a> | <a href="#">Contact U</a>
</div>
<div class="copyright">
地址：陕西省西安市长安区西安财经大学 邮编：710100 电话：151-2973-6662 传真：000-00000000 邮箱: wangggyy2001@163.com <br />
京ICP备08001421号京公网安备110108007702
</div>
</div>
</div>
</footer>
</body>
</html>
3.1.2 项目settlement.css代码
.w header {
height: 65px;
}
.header-fl {
float: left;
}
.header-fl span {
font-size: 19px;
color: #333;
margin-left: 10px;
}
.header-fr {
float: right;
width: 538px;
height: 36px;
border: 2px solid #b1191a;
line-height: 36px;
margin-top: 15px;
}
.header-fr input {
float: left;
width: 454px;
height: 32px;
padding-left: 10px;
}
.header-fr button {
float: left;
width: 80px;
height: 32px;
background-color: #b1191a;
font-size: 16px;
color: #fff;
}
.w .settlement h2 {
margin: 20px 0;
font-size: 16px;
color: #c81623;
font-weight: 400;
}
.settlement .select {
height: 36px;
line-height: 36px;
background-color: #f5f5f5;
color: #666666;
border: 1px solid #dddddd;
}
.settlement .select ul {
padding-left: 5px;
}
.settlement .select ul li {
float: left;
padding-right: 100px;
}
.settlement .select ul li:first-child {
margin-right: 70px;
}
.settlement .select ul li:nth-child(2) {
margin-right: 240px;
}
.settlement .select ul li:nth-child(4) {
margin-right: 14px;
}
.settlement .select ul li input {
margin-right: 5px;
margin-top: -3px;
vertical-align: middle;
}
.box-hd,
.box-hd2 {
height: 30px;
line-height: 30px;
border-bottom: 1px solid #dddddd;
}
.settlement .box-hd-fl {
float: left;
height: 30px;
margin-left: 6px;
}
.settlement .box-hd-fl input {
vertical-align: middle;
margin-top: -3px;
}
.settlement .box-hd-fl span {
font-size: 12px;
color: #ffffff;
background-color: #c81623;
margin-left: 2px;
}
.settlement .box-hd-fr {
float: right;
font-size: 12px;
color: #666666;
}
.settlement .box-hd-fr em {
color: #c81623;
}
.box-bd {
height: 653px;
border: 1px solid #dddddd;
margin: 20px 0;
}
.goods1,
.goods2,
.goods3 {
border-bottom: 1px solid #dddddd;
}
.goods1 {
height: 110px;
}
.goods1 ul,
.goods2 ul,
.goods3 ul,
.goods4 ul,
.goods5 ul {
padding-top: 13px;
padding-left: 6px;
}
.goods1 ul li,
.goods2 ul li,
.goods3 ul li,
.goods4 ul li,
.goods5 ul li {
float: left;
font-size: 12px;
margin-right: 5px;
}
.goods1 ul input,
.goods2 ul input,
.goods3 ul input,
.goods4 ul input,
.goods5 ul input {
vertical-align: top;
}
.goods1 ul img,
.goods2 ul img,
.goods3 ul img,
.goods4 ul img,
.goods5 ul img {
border: 1px solid #ededed;
margin: 0 10px 0 17px;
}
.goods1 ul p,
.goods2 ul p,
.goods3 ul p,
.goods4 ul p,
.goods5 ul p {
color: #333;
line-height: 22px;
margin-bottom: 7px;
}
.goods1 ul span {
color: #999;
}
.goods1 ul span::before {
content: '\eead';
font-family: "iconfont";
margin-right: 5px;
color: #c81623;
}
.goods1 ul .chima {
width: 154px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 75px;
margin-top: 1px;
}
.goods1 .yh {
margin: 0 73px;
text-align: center;
}
.youhuo {
width: 97px;
height: 30px;
line-height: 30px;
border: 1px solid #dddddd;
font-size: 18px;
color: #333;
}
.youhuo div {
float: left;
}
.youhuo .yh1 {
width: 27px;
}
.youhuo .yh2 {
width: 39px;
font-size: 16px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
.yh3 {
width: 27px;
color: #cc353e;
}
.yh4 {
color: #999999;
font-size: 12px;
}
.action {
margin-left: 105px;
}
.action a {
color: #666666;
}
.goods2 {
height: 202px;
}
.goods2 .huangou,
.goods5 .huangou {
height: 22px;
line-height: 22px;
margin: 10px 0 15px 6px;
font-size: 12px;
}
.goods2 .huangou i,
.goods5 .huangou i {
float: left;
width: 46px;
height: 20px;
line-height: 18px;
text-align: center;
color: #c81623;
border: 1px solid #c81623;
margin-top: 1px;
}
.goods2 .huangou p,
.goods5 .huangou p {
float: left;
margin: 0 20px;
color: #666;
}
.goods2 .huangou p::after,
.goods5 .huangou p::after {
font-family: "iconfont";
content: '\e9ed';
margin-left: 3px;
}
.goods2 .huangou span
.goods5 .huangou span {
float: left;
width: 70px;
height: 20px;
line-height: 20px;
text-align: center;
background-color: #c81623;
margin-top: 1px;
}
.goods2 .huangou span a,
.goods5 .huangou span a {
color: #ffffff;
}
.goods2 ul,
.goods5 ul {
height: 100px;
}
.goods2 ul .chima,
.goods5 ul .chima {
width: 90px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 122px;
margin-top: 2px;
}
.goods2 .yh,
.goods5 .yh {
margin: 0 73px 0 66px;
text-align: center;
}
.goods2 .zengpin,
.goods5 .zengpin {
margin: 15px 0 0 62px;
}
.goods2 .zengpin p,
.goods5 .zengpin p {
font-size: 12px;
color: #666666;
}
.goods2 .zengpin p em,
.goods5 .zengpin p em {
display: inline-block;
color: #999999;
width: 270px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 20px;
vertical-align: middle;
margin-top: -4px;
}
.goods3 {
height: 110px;
background-color: #feedef;
}
.goods3 ul span {
color: #999;
}
.goods3 ul span::before {
content: '\eead';
font-family: "iconfont";
margin-right: 5px;
color: #c81623;
}
.goods3 ul .chima {
margin: 1px 190px 0 40px;
}
.goods3 .yh {
margin: 0 73px 0 80px;
text-align: center;
}
.goods4 {
height: 110px;
}
.goods4 ul span {
color: #999;
}
.goods4 ul span::before {
content: '\eead';
font-family: "iconfont";
margin-right: 5px;
color: #c81623;
}
.goods4 ul .chima {
margin: 1px 168px 0 35px;
}
.goods4 .yh {
margin: 0 73px 0 67px;
text-align: center;
}
.box-hd2 {
margin-left: 6px;
}
.settlement .box-hd2 input {
vertical-align: middle;
margin-top: -3px;
}
.settlement .box-hd2 span {
font-size: 12px;
color: #333333;
margin-left: 2px;
}
.box-bd2 {
height: 202px;
border: 1px solid #dddddd;
margin: 20px 0;
}
.lastset {
height: 56px;
line-height: 54px;
text-align: center;
border: 1px solid #dddddd;
padding-left: 6px;
font-size: 12px;
color: #666666;
}
.lastset-l {
float: left;
width: 350px;
color: #666666;
}
.lastset-l input {
vertical-align: middle;
margin-right: 10px;
margin-top: -3px;
}
.lastset-l a {
color: #666666;
margin-left: 20px;
}
.lastset-r {
float: right;
width: 109px;
height: 54px;
line-height: 54px;
background-color: #e60012;
}
.lastset-r a {
display: inline-block;
font-size: 16px;
color: #fefefe;
}
.lastset-m {
float: right;
width: 321px;
height: 54px;
line-height: 17px;
padding-top: 10px;
}
.lastset-m em {
font-size: 16px;
color: #e60012;
}
.lastset-m p:nth-child(2) {
margin-left: 109px;
}
.delete {
height: 65px;
line-height: 20px;
font-size: 12px;
margin: 20px 0;
}
.delete-hd {
color: #333;
margin-bottom: 20px;
margin-left: 5px;
}
.delete-bd {
height: 32px;
line-height: 32px;
background-color: #fffdee;
padding-left: 15px;
}
.delete-bd span {
float: left;
}
.delete-bd span:first-child {
width: 225px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.delete-bd span:nth-child(2) {
margin-left: 350px;
}
.delete-bd span:nth-child(3) {
margin-left: 150px;
}
.delete-bd span:last-child {
float: right;
}
.delete-bd span:last-child a {
margin-right: 20px;
}
.guess {
height: 391px;
}
.guess-hd {
height: 41px;
line-height: 41px;
background-color: #f1f1f1;
font-size: 12px;
border: 1px solid #dddddd;
}
.guess-hd ul li {
float: left;
width: 87px;
height: 39px;
text-align: center;
}
.guess-hd ul li a {
color: #333333;
}
.guess-hd ul li:first-child {
background-color: #c81623;
}
.guess-hd ul li:first-child a {
color: #ffffff;
}
.guess-bd {
position: relative;
height: 350px;
padding: 20px 105px;
}
.guess-bd ul {
width: 987px;
height: 305px;
border: 1px dashed #cacaca;
}
.guess-bd ul li {
float: left;
width: 25%;
height: 305px;
text-align: center;
border-right: 1px dashed #cacaca;
}
.guess-bd ul li:last-child {
border: none;
}
.guess-bd ul li h4 {
font-size: 12px;
margin: 10px 20px;
font-weight: 400;
text-align: left;
color: #333;
}
.guess-bd ul li p {
margin-bottom: 10px;
color: #e50012;
}
.guess-bd ul li button {
width: 125px;
height: 30px;
border: 1px solid #ccc;
border-radius: 2px;
background-color: #fff;
color: #666;
}
.guess-bd ul li button i::after {
content: '\eeba';
font-family: "iconfont";
margin-right: 3px;
}
.guess-bdl,
.guess-bdr {
position: absolute;
top: 140px;
width: 20px;
height: 50px;
line-height: 50px;
background-color: #ddd;
color: #ffffff;
font-size: 30px;
}
.guess-bdl {
left: 0px;
}
.guess-bdr {
right: 0;
}
4 项目submit提交订单页制作
4.1 项目提交订单页代码
4.1.1 项目submit.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>提交订单</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/settlement.css">
<link rel="stylesheet" href="css/submit.css">
</head>
<body>
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>小王优品铺欢迎您！ </li>
<li>
<a href="login.html">请登录</a> <a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="arrow-icon">我的优品铺</li>
<li></li>
<li>优品铺会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arrow-icon">关注优品铺</li>
<li></li>
<li class="arrow-icon">客户服务</li>
<li></li>
<li class="arrow-icon">网站导航</li>
</ul>
</div>
</div>
</section>
<div class="w">
<header>
<div class="header-fl">
<a href="index.html"><img src="images/logo.png" alt=""></a>
<span>购物车</span>
</div>
<div class="header-fr">
<input type="search" name="" id="" placeholder="自营">
<button>搜索</button>
</div>
</header>
<div class="main">
<h5>填写并核对订单信息</h5>
<div class="box-submit">
<ul>
<li class="information">
<h4>收件人信息</h4>
<p><em>张某某 北京</em>张谋谋 北京市海淀区三环内 中关村软件园9号楼 159****3201</p>
<span>更多地址</span>
<div class="add"><a href="#">新增收货地址</a></div>
</li>
<li class="address">
<p><em>匹配自提点</em>时代思远书店 中关村软件园9号楼时代思远书店</p>
</li>
<li class="pay">
<h4>支付方式</h4>
<div class="pay1">货到付款</div>
<div class="pay2">微信付款</div>
<div class="pay3">在线支付</div>
<span>更多>></span>
</li>
<li class="list">
<h4>送货清单</h4>
<div class="list-bd">
<div class="list-bd1">
<h4>配送方式：</h4>
<p><em>天天快递</em>配送时间：预计8月10日（周三）09:00-15:00送达</p>
<div class="revise"><a href="#">修改</a></div>
</div>
<div class="list-bd2">
<h4>配送方式：</h4>
<ul>
<li><img src="upload/submit.png" alt=""></li>
<li>
<p>Apple iPhone 6s (A1700) 64G 玫瑰金色 移动联通电信4G手机<br />硅胶透明防摔软壳 本色系列</p>
<span>7天无理由退货</span>
</li>
<li>￥5399.00</li>
<li>×1</li>
<li>有货</li>
</ul>
</div>
</div>
</li>
<li class="invoice">
<h4>发票信息</h4>
<p>普通发票（电子） 个人 明细 <a href="#">修改</a></p>
<h4>使用优惠/抵用</h4>
</li>
</ul>
</div>
<div class="total1"><em>1</em>件商品，总商品金额： ￥5388.00</div>
<div class="total2">返现： -￥0.00</div>
<div class="total3">运费： <em>￥5388.00</em></div>
<div class="lastset">
<p>应付金额： <em>￥5388.00</em></p>
<p>寄送至：北京市海淀区三环内 中关村软件园9号楼 收货人：某某某 159****3201</p>
</div>
<button class="last-btn"><a href="#">提交订单</a></button>
</div>
</div>
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>急速物流</h4>
<p>急速物流，急速送达</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>无忧售后</h4>
<p>七天无理由退换货</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>特色服务</h4>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl>
<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>
<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>
<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>
<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>
<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>
<dl>
<dt>帮助中心</dt>
<dd>
<img src="images/wx_cz.jpg" alt="">
小王优品铺官方客服
</dd>
</dl>
</div>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a> | <a href="#">手机优品铺</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">优品铺社区</a> | <a href="#">优品铺公益</a> | <a href="#">English Site</a> | <a href="#">Contact U</a>
</div>
<div class="copyright">
地址：陕西省西安市长安区西安财经大学 邮编：710100 电话：151-2973-6662 传真：000-00000000 邮箱: wangggyy2001@163.com <br />
京ICP备08001421号京公网安备110108007702
</div>
</div>
</div>
</footer>
</body>
</html>
4.1.2 项目submit.css代码
.w .main {
height: 1054px;
margin: 25px 0 35px;
}
.main h5 {
font-size: 16px;
color: #666;
font-weight: 400;
}
.main .box-submit {
height: 788px;
margin: 20px 0;
border: 1px solid #dddddd;
}
.main .box-submit ul {
width: 1148px;
height: 766px;
margin-top: 20px;
margin-left: 25px;
}
.main .box-submit ul li {
padding-top: 20px;
padding-left: 25px;
border-bottom: 1px solid #dddddd;
font-size: 12px;
color: #666;
}
.main .box-submit ul li:last-child {
border: none;
}
.main .box-submit ul li h4 {
font-size: 14px;
color: #333;
}
.main .box-submit ul .information {
position: relative;
height: 136px;
}
.main .box-submit ul .information p em {
display: inline-block;
width: 144px;
height: 30px;
line-height: 30px;
text-align: center;
border: 2px solid #c81623;
margin:19px 10px 20px 20px;
}
.main .box-submit ul .information span {
margin-left: 20px;
}
.main .box-submit ul .information span::after {
content: '\e9e8';
font-family: "iconfont";
margin-left: 5px;
}
.main .box-submit ul .information .add a {
position: absolute;
top: 20px;
right: 25px;
color: #1474af;
}
.main .box-submit ul .address {
height: 71px;
}
.main .box-submit ul .address p em {
display: inline-block;
width: 144px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #ddd;
margin: 0 20px;
}
.main .box-submit ul .pay {
height: 105px;
}
.main .box-submit ul .pay div {
display: inline-block;
width: 98px;
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 20px;
}
.main .box-submit ul .pay1,
.main .box-submit ul .pay2 {
float: left;
border: 1px solid #dddddd;
}
.main .box-submit ul .pay1 {
margin-left: 30px;
}
.main .box-submit ul .pay3 {
margin:0 26px 0 10px;
border: 2px solid #c81623;
}
.main .box-submit ul .list {
height: 333px;
}
.main .box-submit ul .list .list-bd {
height: 255px;
margin-top: 20px;
}
.main .box-submit ul .list .list-bd h4 {
font-size: 12px;
color: #666666;
}
.main .box-submit ul .list .list-bd .list-bd1 {
position: relative;
height: 101px;
background-color: #f4f4f4;
padding-top: 20px;
padding-left: 25px;
}
.main .box-submit ul .list .list-bd .list-bd1 p em {
display: inline-block;
width: 144px;
height: 30px;
line-height: 30px;
text-align: center;
border: 2px solid #c81623;
margin:18px 50px 0 18px;
}
.main .box-submit ul .list .list-bd .list-bd1 .revise a {
position: absolute;
top: 60px;
right: 35px;
color: #1474af;
}
.main .box-submit ul .list .list-bd .list-bd2 {
height: 155px;
background-color: #feedef;
padding-top: 20px;
padding-left: 25px;
}
.main .box-submit ul .list .list-bd .list-bd2 ul {
width: 1072px;
height: 82px;
margin-top: 18px;
margin-left: 18px;
}
.main .box-submit ul .list .list-bd .list-bd2 ul li {
float: left;
border: none;
padding: 0;
}
.main .box-submit ul .list .list-bd .list-bd2 ul img {
margin-top: 1px;
}
.main .box-submit ul .list .list-bd .list-bd2 ul li:nth-child(2) {
margin: 0 320px 0 113px;
}
.main .box-submit ul .list .list-bd .list-bd2 ul li p {
color: #666;
margin-bottom: 26px;
}
.main .box-submit ul .list .list-bd .list-bd2 ul li span {
color: #c81623;
}
.main .box-submit ul .list .list-bd .list-bd2 ul li:nth-child(3) {
font-size: 14px;
color: #e12228;
}
.main .box-submit ul .list .list-bd .list-bd2 ul li:nth-child(4) {
margin: 0 55px 0 55px;
}
.main .box-submit ul .invoice {
height: 120px;
}
.main .box-submit ul .invoice p {
margin: 20px 0 15px 30px;
}
.main .box-submit ul .invoice p a {
color: #1474af;
}
.main .box-submit ul .invoice h4:last-child::after {
content: '\e9e8';
font-family: "iconfont";
margin-left: 5px;
}
.total1,
.total2,
.total3 {
text-align: right;
margin-right: 33px;
}
.total1 em,
.total3 em {
color: #e60012;
}
.lastset {
height: 72px;
border: 1px solid #dddddd;
background-color: #f4f4f4;
margin: 15px 0 15px 0;
text-align: right;
padding: 18px 31px 0 0;
}
.lastset p {
line-height: 18px;
font-size: 12px;
}
.lastset p:first-child {
color: #666;
}
.lastset p:first-child em {
font-size: 16px;
color:#e60012;
font-weight: 700;
}
.lastset p:nth-child(2) {
color: #999;
}
.last-btn {
float: right;
margin-right: 31px;
width: 142px;
height: 46px;
line-height: 46px;
background-color: #df3033;
text-align: center;
font-size: 18px;
}
.last-btn a {
color: #ffffff;
}
4814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
