cart.html
<!DOCTYPE html>
<html>
<head>
<title>小米商城</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="../img/footlogo.png" />
<link rel="stylesheet" href="../css/cart.css">
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
<script src="../js/jquery_3.3.1_min.js"></script>
<script src="../js/cart.js"></script>
</head>
<body>
<!-- 购物车头部 -->
<div>
<div>
<div>
<a href=""></a>
<h1>我的购物车</h1>
<h6>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</h6>
</div>
<div>
<div>
<div>
<a href="javascript:void(0)">我是某某某</a>
<ul>
<li>个人中心</li>
<li>评价晒单</li>
<li>我的喜欢</li>
<li>小米账户</li>
<li>退出登录</li>
</ul>
</div>
<i class="fa fa-angle-down fa-1x"></i>
</div>
<div><a href="order.html">我的订单</a></div>
</div>
</div>
</div>
<!-- 购物车躯干部分 -->
<div>
<!--购物车-->
<div>
<div class="list list-title">
<div class="select select-all"><i class="fa fa-check" id="check-all"></i>全选</div>
<div></div>
<div style="font-size:14px; ">商品名称</div>
<div>单价</div>
<div>数量</div>
<divstyle="color:#424242;">小计</div>
<div>操作</div>
</div>
<div class="list list-item">
<div><i class="fa fa-check"></i></div>
<div><img src="../img/phone1.png" alt=""></div>
<div> 小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB </div>
<div>3199元</div>
<div>
<div>
<button>-</button>
<input type="text" value="1">
<button>+</button>
</div>
</div>
<div>3199元</div>
<div><i class="fa fa-times"></i></div>
</div>
<div class="list list-item">
<div><i class="fa fa-check"></i></div>
<div><img src="../img/phone2.png" alt=""></div>
<div> 小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB </div>
<div>3199元</div>
<div>
<div>
<button>-</button>
<input type="text" value="1">
<button>+</button>
</div>
</div>
<div>3199元</div>
<div><i class="fa fa-times"></i></div>
</div>
<div class="list list-item">
<div><i class="fa fa-check"></i></div>
<div><img src="../img/phone3.png" alt=""></div>
<div> 小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB </div>
<div>3199元</div>
<div>
<div>
<button>-</button>
<input type="text" value="1">
<button>+</button>
</div>
</div>
<div>3199元</div>
<div><i class="fa fa-times"></i></div>
</div>
<div class="list list-total">
<div>
<span><a href="">继续购物</a></span>
<span>共 <span>0</span> 件商品，已选择 <span>0</span> 件</span>
</div>
<div>
<div>合计: <span>0</span> 元</div>
<a href="./close.html"><button>去结算</button></a>
</div>
</div>
</div>
<!--其他商品推荐-->
<div style="margin-top: 60px;">
<p>买购物车中商品的人还买了</p>
</div>
<div>
<div>
<div style="background: url(../img/手机AD.jpg);"></div>
<div>
<div style="margin-right: 12.7px;">
<img src="../img/手机1.jpg">
<h3><a href="">小米5X 4G+64GB</a></h3>
<p>光学变焦双摄，拍人更美</p>
<p><span style="color: #f60;">1499 元</span></p>
</div>
<div style="margin-right: 12.7px;">
<span>享八折</span>
<img src="../img/手机2.jpg">
<h3><a href="">小米5X 4G+64GB</a></h3>
<p>光学变焦双摄，拍人更美</p>
<p><span style="color: #f60;">1499 元</span></p>
</div>
<div style="margin-right: 12.7px;">
<img src="../img/手机3.jpg">
<h3><a href="">小米5X 4G+64GB</a></h3>
<p>光学变焦双摄，拍人更美</p>
<p><span style="color: #f60;">1499 元</span></p>
</div>
<div>
<span>享八折</span>
<img src="../img/手机4.jpg">
<h3><a href="">小米5X 4G+64GB</a></h3>
<p>光学变焦双摄，拍人更美</p>
<p><span style="color: #f60;">1499 元</span></p>
</div>
<div style="margin-right: 12.7px; margin-top:12.7px; ">
<img src="../img/手机5.jpg">
<h3><a href="">小米5X 4G+64GB</a></h3>
<p>光学变焦双摄，拍人更美</p>
<p><span style="color: #f60;">1499 元</span></p>
</div>
<div style="margin-right: 12.7px; margin-top:12.7px;">
<img src="../img/手机6.jpg">
<h3><a href="">小米5X 4G+64GB</a></h3>
<p>光学变焦双摄，拍人更美</p>
<p><span style="color: #f60;">1499 元</span></p>
</div>
<div style="margin-right: 12.7px; margin-top:12.7px;">
<img src="../img/手机7.jpg">
<h3><a href="">小米5X 4G+64GB</a></h3>
<p>光学变焦双摄，拍人更美</p>
<p><span style="color: #f60;">1499 元</span></p>
</div>
<div style=" margin-top:12.7px;">
<img src="../img/手机8.jpg">
<h3><a href="">小米5X 4G+64GB</a></h3>
<p>光学变焦双摄，拍人更美</p>
<p><span style="color: #f60;">1499 元</span></p>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div>
<div>
<div>
<div>
<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
<a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span>
<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
<a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
</div>
<span></span>
<div>
<div>
<dl>
<dt>帮助中心</dt>
<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>
</dl>
<dl>
<dt>线下门店</dt>
<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>
</dl>
<dl>
<dt>关注我们</dt>
<dd><a href="">新浪微博</a></dd>
<dd><a href="">官网微博</a></dd>
<dd><a href="">联系我们</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="">F码通道</a></dd>
<dd><a href="">礼物码</a></dd>
<dd><a href="">防伪查询</a></dd>
</dl>
<div>
<p>Feir-520-1314</p>
<p>周一至周日 8:00-18:00<br>(仅收市话费)</p>
<button><span class="fa fa-commenting "></span> 联系客服</button>
</div>
</div>
</div>
<div></div>
</div>
<div>
<div style="margin-right: 15px;">
<img src="../img/footlogo.png" alt="">
</div>
<div style="margin-right:50px;">
<div>
<ul>
<li>小米商城<span></span></li>
<li>MIUI<span></span></li>
<li>米家<span></span></li>
<li>米聊<span></span></li>
<li>多看<span></span></li>
<li>游戏<span></span></li>
<li>路由器<span></span></li>
<li>米粉卡<span></span></li>
<li>政企服务<span></span></li>
<li>小米天猫店<span></span></li>
<li>隐私政策<span></span></li>
<li>问题反馈<span></span></li>
<li>Select Region</li>
</ul>
</div>
<div>
<a href="">©mi.com</a>
<a href="">京ICP证110507号</a>
<a href="">京ICP备10046444号</a>
<a href="">京公网安备11010802020134号</a>
<a href="">京网文[2014]0059-0009号</a>
<br>
违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</div>
</div>
<div>
<img src="../img/footericon1.png" alt="" style="margin-right: 10px;">
<img src="../img/footericon2.png" alt="" style="margin-right: 10px;">
<img src="../img/footericon3.png" alt="" style="margin-right: 10px;">
<img src="../img/footericon4.png" alt="" style="margin-right: 10px;">
<img src="../img/footericon5.png" alt="">
</div>
<div>
探索黑科技，小米为发烧而生！
</div>
</div>
</div>
</div>
</body>
</html>
cart.css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #cfc;
cursor: pointer;
}
/*头部, 躯干宽度设定*/
.head, .trunk{
width: 100%
}
/*头部边框, 高度设定*/
.head{
height: 80px;
border-bottom: 2px solid #f60;
}
/*躯干背景颜色和溢出设定*/
.trunk{
background-color: #f5f5f5;
overflow: hidden;
}
/*内容总宽度, 居中设定*/
.head>.content, .trunk>.cart, .trunk>.recommend{
width: 1226px;
margin: 0 auto;
}
.cart{
padding-top: 38px;
}
.head .cont-l{
float: left;
}
.head .cont-r{
float: right;
}
.head .logo, .head .title, .head .notice, .head .userinfo, .head .orderDetail{
float: left;
margin-top: 26px;
}
.head .logo{
width: 48px;
height: 48px;
margin-right: 45px;
background: url('../img/footlogo.png') center center;
}
.head .title{
font-size: 28px;
line-height: 48px;
margin-right: 15px;
font-weight: 400;
color: #ccc;
}
.head .notice{
font-size: 12px;
line-height: 48px;
margin-top: 32px;
font-weight: 400;
color: #757575;
}
.head .userinfo{
width: 120px;
line-height: 48px;
margin-top: 28px;
font-size: 12px;
color: #757575;
position: relative;
}
.head .orderDetail{
line-height: 48px;
margin-top: 28px;
font-size: 12px;
color: #aaa;
}
.userinfo .username a, .head .orderDetail a{
color: #aaa;
}
.userinfo .username ul {
position: absolute;
width: 120px;
padding: 7px 0;
display: none;
background-color: #fff;
margin-left: -10px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15)
}
.userinfo .username li {
height: 30px;
width: 100%;
color: #757575;
line-height: 30px;
}
.userinfo:hover ul {
display: block;
}
.userinfo .username li:hover {
color: #ff6700;
background-color: #f5f5f5;
}
.userinfo i {
position: absolute;
top: 20px;
right: 20px;
}
.userinfo:hover a, .userinfo:hover i {
color: #ff6700;
}
.cart>.list {
background-color: #fff;
overflow: hidden;
}
.list div {
float: left;
}
.cart .select {
width: 110px;
text-align: center;
}
.cart .select i {
font-size: 13px;
display: inline-block;
height: 15px;
width: 15px;
line-height: 15px;
background-color: #fff;
color: rgba(0, 0, 0, 0);
border: 1px solid #e0e0e0;
margin: 0 15px 0 24px;
cursor: pointer;
}
/*.cart .select i:hover{color:#757575}*/
.cart .select .checked {
color: #fff;
background-color: #ff6700;
border: 1px solid #ff6700;
}
.cart .good-img {
width: 120px;
cursor: pointer;
}
.cart .good-img img {
width: 60px;
height: 60px;
margin-top: 15px;
}
.cart .good-name {
width: 380px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
font-size: 17px;
color: #424242;
}
.cart .good-price {
width: 75px;
padding-right: 84px;
text-align: right;
}
.cart .good-num {
width: 150px;
text-align: center;
}
.good-num .num-input {
padding: 0;
margin-top: 24px;
width: 150px;
height: 40px;
border: 1px solid #e0e0e0;
padding-top: 1px;
text-align: center;
display: inline-block;
}
.num-input button {
width: 38px;
height: 38px;
text-align: center;
color: #757575;
background-color: #fff;
font-size: 20px;
}
.num-input button:hover {
background-color: #ddd
}
.num-input .minus{
float: left;
display: inline-block;
}
.num-input .num-value {
float: left;
width: 72px;
height: 38px;
text-align: center;
font-size: 16px;
display: inline-block;
}
.num-input .plus{
float: right;
display: inline-block;
}
.cart .good-total-price {
width: 120px;
padding-right: 81px;
text-align: right;
color: #FF6A00;
}
.cart .operation {
width: 80px;
padding-right: 26px;
text-align: center;
}
.cart .operation i {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
color: #757575;
line-height: 20px;
font-size: 12px;
}
.cart .operation i:hover {
background-color: #F07474;
color: #fff;
cursor: pointer;
}
.list-title div {
height: 70px;
line-height: 70px;
font-size: 14px;
}
.list-item div {
height: 86px;
padding: 15px 0;
line-height: 86px;
border-top: 1px solid #e0e0e0;
}
.list-total {
margin: 20px 0px;
height: 50px;
line-height: 50px;
font-size: 14px;
}
.list-total .list-total-left {
float: left;
}
.list-total .list-total-right {
float: right;
}
.list-total-left .notice {
margin-left: 32px;
font-size: 12px;
background-color: #fff;
color: #424242;
}
.list-total-left .notice a {
color: #424242;
font-size: 14px;
}
.list-total-left .statistics {
margin-left: 16px;
padding-left: 16px;
font-size: 12px;
border-left: 1px solid #eee;
color: #424242;
font-size: 14px;
}
.statistics span {
color: #FF6A00;
}
.list-total-right .total-price {
float: left;
font-size: 14px;
color: #ff6700
}
.list-total-right .total-price .sum-price {
font-size: 24px;
}
.list-total-right .submit-cart {
float: right;
height: 50px;
width: 200px;
background-color: #ff6700;
color: #fff;
font-size: 18px;
margin-left: 60px;
}
/*商品推荐*/
.recommend{
position: relative;
border-top: 1px solid #ccc;
height: 40px;
}
.recommend p{
font-size: 31px;
color: #757575;
background: #F5F5F5;
width: 460px;
height: 40px;
position: absolute;
top: -20px;
left: 380px;
text-align: center;
}
.content{
margin-left: 346px;
}
.contPhone{
height: 615px;
margin: 10px auto;
}
.contP_l{
height: 615px;
width: 235px;
background: #ccffe6;
float: left;
margin-right: 20px;
}
.contP_r{
height: 614px;
width: 980px;
float: left;
}
.contP_r div{
width: 235px;
height: 300px;
background: #fff;
float: left;
text-align: center;
position: relative;
}
.contP_r a{
color: #0bf;
}
.contP_r a:hover{
color: #ccc;
}
.bottomImg{
width: 160px;
height: 160px;
margin: 20px 37px 18px;
}
.bottomTitle{
font-size: 14px;
margin: 3px 0;
font-weight: 300;
}
.bottomDesc{
font-size: 12px;
color: #aaa;
margin: 10px 0 15px;
}
.bottomPrice{
font-size: 13px;
}
.bottomFlagRed{
width: 64px;
height: 18px;
line-height: 18px;
font-size: 12px;
background: red;
text-align: center;
color: #fff;
position: absolute;
left: 90px;
}
/*网页底部*/
.foot{
width: 1226px;
height: 300px;
margin: 10px auto;
}
.foot-top_li_1{
width: 1226px;
height: 80px;
line-height: 80px;
text-align: center;
}
.foot-top_li_1 a{
font-size: 16px;
color: #616161;
font-weight: 300;
}
.foot-top_li_1 a:hover{
color: #ff6700;
}
.foot-top_li_1 a i{
font-size: 20px;
color: #616161;
margin-right: 10px;
}
.foot-top_li_1 span{
font-size: 20px;
color: #616161;
border-left: 1px solid #e0e0e0;
margin: 0 56px;
}
.separate{
width: 1226px;
border-bottom: 1px solid #e0e0e0;
display: block;
}
.foot-top_li_2{
width: 1226px;
height: 100px;
margin: 40px 0;
}
.foot-top_li_a dl{
float: left;
display: block;
width: 160px;
}
.foot-top_li_a dt{
font-size: 14px;
line-height: 14px;
color: #424242;
margi