abstract：在线预览地址：http://www.pursuer.top/xiaomi1/cart.htmlhtml：小米商城 在线预览地址：http://www.pursuer.top/xiaomi1/cart.html
html：
小米商城
我的购物车
温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
我是某某某
- 个人中心
- 评价晒单
- 我的喜欢
- 小米账户
- 退出登录
全选商品名称单价数量小计操作
小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB3199元3199元
小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB3199元3199元
小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB3199元3199元
共3件商品,已选择0件
买购物车中商品的人还买了
©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号
违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
探索黑科技，小米为发烧而生！
css:
/*公共样式*/
*{padding:0;margin:0;font-family:Helvetica; }
a{text-decoration: none;cursor:pointer;color:#373737;}
li{list-style:none;}
.clear{clear: both;}
/*头部样式*/
.header{width:100%;height:100px;background-color:#fff;border-bottom:2px solid #ff6a00;}
.menu{width:1226px;height:100px;margin:0 auto;}
.menu .left{float: left;padding:26px 0;line-height:48px;}
.menu .left img{float: left;width: 48px;height: 48px;}
.menu .left h2{float: left;margin-left: 30px;font-weight:100;color: #373737;font-size: 28px;}
.menu .left p{float: left;margin-left: 20px;font-size: 12px;}
.menu .right{float: right;padding:26px 0;line-height:48px;font-size: 12px;color: #757575; }
.menu .right .user{width:120px;height:48px;float:left;position: relative;}
.menu .right .user span:hover{color:#ff6a00;}
.menu .right .user i{margin-left:30px;}
.menu .right .user ul{display: none;width:120px;padding:8px 0;box-shadow: 0 0 4px 2px #eee;background: #fff;z-index: 999;position: absolute;}
.menu .right .user:hover ul{display: block;}
.menu .right .user ul li{width: 100%;height: 30px;line-height: 30px;text-align: center;}
.menu .right .user ul li:hover{color: #ff6a00;background: #f5f5f5;}
.menu .right .order{height:48px;float:left;}
.menu .right .order a{color:#757575;}
/*主体样式*/
.container{background: #f5f5f5;padding: 30px 0 60px;}
.main{width:1226px;margin:0 auto;}
/*购物列表*/
.container .cart{width: 1226px;box-shadow: 0 0 4px 2px #eee;float: left;margin-bottom: 50px;background: #fff;}
.container .cart .cart_list_title{width:1226px;height: 70px;background:#fff;line-height: 70px;text-align: center;font-size: 14px;}
.container .cart .select{width: 110px;height: 70px;text-align: center;float: left;}
.container .cart .select i{width: 13px;height: 13px;border:1px solid #e0e0e0;color:#fff;line-height: 13px;text-align: center;font-size: 10px;margin-right:12px;}
.container .cart .select .checked{background: #ff6a00;color: #fff;}
.container .cart .shop_img{width: 120px;height: 70px;float: left;text-align: left;}
.container .cart .shop_img img{height: 70px;}
.container .cart .shop_name{width: 380px;height: 70px;float: left;text-align: left;text-overflow: ellipsis;/*多余文本隐藏*/white-space: nowrap;/*文本省略点点点*/overflow: hidden;}
.container .cart .shop_price{width:160px;height: 70px;float: left;text-align: center;}
.container .cart .shop_num{width:150px;height: 70px;float: left;text-align: center;}
.container .cart .shop_total_price{width:200px;height: 70px;float: left;text-align: center;}
.container .cart .operation{width:106px;height: 70px;float: left;text-align: center;}
.container .cart .cart_list_item{width:1226px;height: 70px;background:#fff;line-height: 70px;text-align: center;font-size: 15px;padding: 17px 0;border-top:1px solid #e0e0e0;}
.container .cart .shop_num .num{width: 148px;height:38px;border:1px solid #e0e0e0;float: left;margin-top: 16px;}
.container .cart .shop_num .num .minus,.container .cart .shop_num .num .plus,.container .cart .shop_num .num .num-value{
width: 38px;height: 38px;line-height: 40px;border:none;float: left;font-size: 20px;color:#757575;background: #fff;}
.container .cart .shop_num .num .minus:hover,.container .cart .shop_num .num .plus:hover{background: #e0e0e0;}
.container .cart .shop_num .num .num-value{width: 72px;text-align: center;font-size: 14px;}
.container .cart .cart_list_item .shop_total_price{color: #ff6a00;}
.container .cart .operation i{width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius: 50%;font-size: 14px;color: #757575;}
.container .cart .operation i:hover{background: #f07474;color:#fff;}
.container .cart .cart_list_total{background:#fff;height:50px;line-height:50px;font-size: 14px;}
.container .cart .cart_list_total .left{float: left;}
.container .cart .cart_list_total .left a{margin: 0 20px 0 30px;}
.container .cart .cart_list_total .left .text{padding:0 19px;border-left: 1px solid #e0e0e0;}
.container .cart .cart_list_total .right{width: 330px;float:right;}
.container .cart .cart_list_total .right span{color: #ff6a00;}
.container .cart .cart_list_total .right button{width: 200px;height: 54px;border: none;background: #ff6a00;color: #fff;float: right;cursor: pointer;}
/*手机专区*/
.move{box-shadow:0 0 6px 0px #eee}
.move:hover{box-shadow:0 0 6px 0px #ddd;margin-top: -10px;transition:0.2s;-moz-transition:0.2s; /* Firefox 4 */-webkit-transition:0.2s; /* Safari 和 Chrome */-o-transition:0.2s; /* Opera */}
.mainPhone{margin:0 auto;}
.mainPhone_tit{height:20px;margin: 10px 0;color: #888;border-bottom:1px solid #ddd;position: relative;margin-bottom:60px;}
.mainPhone_tit .tit{height:40px;width:340px;background:#f5f5f5;text-align:center;margin:0 auto;font-weight:100;position: absolute;margin: 0 auto;margin-left: 50%;left:-170px;}
.mainPhone_l{width:234px;height:614px;float:left;}
.mainPhone_l .ad{width:234px;height:300px;}
.mainPhone_r{width:992px;height:614px;float:right;cursor: pointer;position: relative;}
.mainPhone_r .p span{background:#ff0000;color:#fff;padding:2px;font-size:12px;position: absolute;margin-left:95px;}
.mainPhone_r .p img{display:block;width:160px;margin:20px auto;}
.mainPhone_r .p .title{color:#ccc;font-size: 14px;text-align: center;}
.mainPhone_r .p .title:hover a{color:#ff6a00;}
.mainPhone_r .p .trait{color:#bbb;font-size: 12px;text-align: center;margin:10px;}
.mainPhone_r .p .price{color:#ff6a00;font-size: 14px;text-align: center;}
.mainPhone_r .p{width:234px;height:300px;background:#fff;float:left;margin-left: 14px;position: relative;}
/*底部样式*/
.foot{width:1226px;margin:0 auto;}
.foot_top{height:80px;margin:0 auto;text-align: center;border-bottom: 1px solid #e0e0e0;}
.foot_top a{color:#616161;font-size: 16px;line-height: 80px;}
.foot_top i{font-size:20px;line-height: 80px;margin-right:10px;}
.foot_top a:hover{color:#ff6700;}
.foot_top span{color:#616161;margin:0 50px;}
.foot_middle{height:114px;margin:40px 0;}
.foot_middle .nav{height: 114px;width: 160px;float: left;}
.foot_middle .nav .tit{font-size: 14px;margin-bottom: 26px;color: #424242;}
.foot_middle .nav .list{font-size: 12px;margin:10px 0;color:#555;display: block;}
.foot_middle .nav .list:hover{color:#ff6700;}
.foot_middle .nav_r{height:114px;width:265px;float: left;border-left: 1px solid #e0e0e0;}
.foot_middle .nav_r span{text-align: center;color: #ff6700;display: block;}
.foot_middle .nav_r #tel{width: 118px;height: 28px;border:1px solid #ff6700;margin:20px auto 0;color:#ff6700;text-align: center;line-height:30px;font-size:14px;}
.foot_middle .nav_r #tel a{color:#ff6a00;}
.foot_middle .nav_r #tel:hover{background: #ff6700;color:#fff;}
.foot_middle .nav_r #tel:hover a{color:#fff;}
.foot_middle .nav_r #tel i{margin-right: 10px;}
.foot_bottom{height:84px;}
.foot_bottom .foot_bottom_l{width:56px;height: 57px;float: left;margin-right: 16px;}
.foot_bottom .foot_bottom_m{width:640px;height: 57px;float: left;}
.foot_bottom .foot_bottom_m .up{width: 640px;height: 19px;margin-bottom:6px;color: #555;font-size: 12px;}
.foot_bottom .foot_bottom_m .up a{color: #555;}
.foot_bottom .foot_bottom_m .up a:hover{color: #ff6700;}
.foot_bottom .foot_bottom_m .up span{margin:0 0 0 2px;}
.foot_bottom .foot_bottom_m .down{width: 640px;height: 31px;font-size: 10px;}
.foot_bottom .foot_bottom_m .down span a{color: #757575;}
.foot_bottom .foot_bottom_m .down span a:hover{color: #ff6700;}
.foot_bottom .foot_bottom_m .down span{color:#555;}
.foot_bottom .foot_bottom_r{width:455px;height:57px;float:right;}
.foot_bottom .foot_bottom_r img{width: 83px;height: 28px;float:left;margin-left:8px;}
.slogan{font-size: 24px;text-align: center;color: #ccc;padding-bottom:20px;}
js:$(function(){
// 移动变色
$('.fa-check').mouseover(function(){
if($(this).attr('class')!='.fa-check checked'){
$(this).css('color','#ff6700');
}
})
$('.fa-check').mouseout(function(){
$(this).css('color','#fff');
})
// 普通选择
$('.fa-check').click(function(){
var cla = $(this).attr('class');
if(cla !='fa fa-check checked'){
$(this).attr('class','fa fa-check checked');
}else{
$(this).attr('class','fa fa-check');
}
})
})
Correcting teacher：天蓬老师Correction time：2019-09-29 19:32:08
Teacher's summary：完成的不错, 写得很长时间吧, 加油
