html+js部分

关于购物车实现的功能

1、仿京东购物车页面效果实现

2、购物车已有商品展示

3、数量增减

4、小计

5、汇总

6、全选

7、全选并汇总

8、单个商品复选

9、单个商品复选并汇总

10、全选和复选互动

11、删除商品

12、删除商品并汇总

13、删除和全选互动

14、添加商品展示

15、添加商品手动轮播

16、添加商品自动轮播

17、添加商品到购物车

18、添加商品到购物车并汇总

19、添加商品到购物车并重复添加处理

20、添加商品到购物车代码封装

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>我的购物车</title>
       <link rel="stylesheet" type="text/css" href="css/css.css" />
       <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
   </head>
   <body>
       <div id="contain">
           <div id="banner">
               <div class="banner1">
                   <div class="banner2">
                       <ul>
                           <li><img src="img/小房子_03.png"></li>
                           <li><a href="#">京东首页</a></li>
                           <li><i class="fa fa-map-marker" aria-hidden="true"></i></li>
                           <li>
                               <option>广东</option>
                           </li>
                       </ul>
                   </div>
                   <div class="banner3">
                       <ul>
                           <li><a href="#">余生</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
                           <li><span>|</span></li>
                           <li><a href="#">我的订单</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">我的京东</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
                           <li><span>|</span></li>
                           <li><a href="#">京东会员</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">企业采购</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
                           <li><span>|</span>
                           <li>
                           <li><a href="#">客户服务</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
                           <li><span>|</span></li>
                           <li><a href="#">网站导航</a></li>
                           <li><span>|</span>
                           <li>
                           <li><a href="#">手机京东</a></li>
                       </ul>
                   </div>
               </div>
           </div>
           <div id="content">
               <div class="content1">
                   <div class="logo"><img src="img/京东购物车项目.png"><a href="#">购物车</a></div>
                   <div class="from">
                       <input type="text" class="search" value=''>
                       <span class='photo' title="未选择取任何文件">
                           <img src="camera.png" alt="">
                       </span>
                       <button class='button'>
                           <i>搜索</i>
                       </button>
                   </div>
               </div>
               <div class="content2">
                   <div class="dl">
                       <ul>
                           <li class="sanjiao"><img src="img/三角警告_07.png"></li>
                           <li class="denglu">你还没有登录!请登录后购物车的商品将保存到你的账号中</li>
                           <li><button class="dl1"><i>立即登录</i></button></li>
                       </ul>
                   </div>
               </div>
               <div class="content3" id="jd_cart">
                   <div class="jdsp">
                       <div class="allshopping">
                           <ul>
                               <li><em>全部商品</em></li>
                               <li>
                                   <hr class="underscorecharacter" />
                               </li>
                           </ul>
                       </div>
                       <div class="region">
                           <ul>
                               <li>配送至:</li>
                               <li>
                                   <select class="area">
                                       <option>广东省汕头市龙湖区</option>
                                   </select>
                               </li>
                           </ul>
                       </div>
                   </div>
                   <div class="operationbox">
                       <div class="allcheck">
                           <input type="checkbox" checked id="checkAll" />全选
                       </div>
                       <div class="shopping">商品</div>
                       <div class="nullbox"></div>
                       <div class="unitprice">单价</div>
                       <div class="amount">数量</div>
                       <div class="subtotal">小计</div>
                       <div class="system">操作</div>
                   </div>
               </div>
               <div id="content5">
                   <div class="phonebox1">
                       <div class="check"><input type="checkbox" checked id="checkAll" /></div>
                       <div class="phonepicture"><img src="img/手机1.png"></div>
                       <div class="phoneinformation"><a href="#">小米10 Pro 双模5G手机【下单送豪</br> &ensp; 礼】骁龙865 新品游戏手机小米10pro</a></div>
                       <div class="phonechoose" title="珍珠白">珍珠白 8+258GB</br>官方标配</div>
                       <div class="price">￥4699.00</div>
                       <div class="number">
                           <button οnclick="calc(this)">-</button>
                           <span> 1 </span>
                           <button οnclick="calc(this)">+</button>
                       </div>
                       <div class="total">￥4699.00</div>
                       <div class="opreate"><a href="#">删除</a></div>
                   </div>
                   <div class="phonebox1">
                       <div class="check"><input type="checkbox" checked id="checkAll" /></div>
                       <div class="phonepicture"><img src="img/手机2.png"></div>
                       <div class="phoneinformation"><a href="#">小米10 5G游戏手机【至高12期分期0</br>首付】钛银黑 8G+256G</a></div>
                       <div class="phonechoose" title="钛银黑">钛银黑</br>8G+256G</div>
                       <div class="price">￥3788.00</div>
                       <div class="number">
                           <button οnclick="calc(this)">-</button>
                           <span> 1 </span>
                           <button οnclick="calc(this)">+</button>
                       </div>
                       <div class="total">￥3788.00</div>
                       <div class="opreate"><a href="#">删除</a></div>
                   </div>
                   <div class="phonebox1">
                       <div class="check"><input type="checkbox" checked id="checkAll" /></div>
                       <div class="phonepicture"><img src="img/手机3.png"></div>
                       <div class="phoneinformation"><a href="#">Apple 苹果 iphone 11 手机黄色全网通 128GB</a></div>
                       <div class="phonechoose" title="黄色">黄色</br>全网通 128GB</div>
                       <div class="price">￥5489.00</div>
                       <div class="number">
                           <button οnclick="calc(this)">-</button>
                           <span> 1 </span>
                           <button οnclick="calc(this)">+</button>
                       </div>
                       <div class="total">￥5489.00</div>
                       <div class="opreate"><a href="#">删除</a></div>
                   </div>
                   <div class="phonebox1">
                       <div class="check"><input type="checkbox" checked id="checkAll" /></div>
                       <div class="phonepicture"><img src="img/手机4.png"></div>
                       <div class="phoneinformation"><a href="#">Apple 苹果 iphone 11 手机绿色全网通 128GB</a></div>
                       <div class="phonechoose" title="绿色">绿色</br>全网通 128GB</div>
                       <div class="price">￥5399.00</div>
                       <div class="number">
                           <button οnclick="calc(this)">-</button>
                           <span> 1 </span>
                           <button οnclick="calc(this)">+</button>
                       </div>
                       <div class="total">￥5399.00</div>
                       <div class="opreate"><a href="#">删除</a></div>
                   </div>
               </div>
               <div class="Bottombox">
                   <div class="bottombox">
                       <ul>
                           <li><input type="checkbox" checked id="checkAll" />全选</li>
                           <li><a href="#">删除选中商品</a></li>
                           <li><a href="#">移到关注</a></li>
                           <li><a href="#">清理购物车</a></li>
                   </div>
                   <div class="rightbottombox">
                       <div class="select">
                           已选择<span>4</span>件商品<i class="fa fa-angle-down" aria-hidden="true"></i>
                       </div>
                       <div class="bottomprice">
                           总价:<span>￥19375.00</span>
                       </div>
                       <div class="settlement">
                           <button>去结算</button>
                       </div>
                   </div>
               </div>
           </div>
           <div id="guessyoulike">
               <h2 class="guesswhatyoulike">猜你喜欢</h2>
               <hr class="guesswhatyoulike1">

                   </ul>
                   <div class="left">
                       <</div> <div class="right">>
                   </div>
               </div>
           </div>
       </div>
       <div id="footer">
           <div class="footer1">
               <div class="fourzt">
                   <ul>
                       <li><img src="img/多_03.png"></li>
                       <li><i class="ttf">品类齐全,轻松购物</i></li>
                       <li><img src="img/快_03.png"></li>
                       <li><i class="ttf">多仓直发,极速配送</i></li>
                       <li><img src="img/好_03.png"></li>
                       <li><i class="ttf">正品行货,精致服务</i></li>
                       <li><img src="img/ʡ_03.png"></li>
                       <li><i class="ttf">天天低价,畅选无忧</i></li>
                   </ul>
               </div>
               <hr>
               <div class="btbox">
                   <div class="bt1">
                       <h2>购物指南</h2>
                       <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>
                       </ul>
                   </div>
                   <div class="bt2">
                       <h2>配送方式</h2>
                       <ul>
                           <li><a href="#">上门自提</a></li>
                           <li><a href="#">211限时达</a></li>
                           <li><a href="#">配送服务查询</a></li>
                           <li><a href="#">配送费收取标准</a></li>
                           <li><a href="#">海外配送</a></li>
                       </ul>
                   </div>
                   <div class="bt3">
                       <h2>支付方式</h2>
                       <ul>
                           <li><a href="#">货到付款</a></li>
                           <li><a href="#">在线支付</a></li>
                           <li><a href="#">分期付款</a></li>
                           <li><a href="#">公司转账</a></li>

                       </ul>
                   </div>
                   <div class="bt4">
                       <h2>售后服务</h2>
                       <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>
                       </ul>
                   </div>
                   <div class="bt5">
                       <h2>特色服务</h2>
                       <ul>
                           <li><a href="#">夺宝岛</a></li>
                           <li><a href="#">DIY装机</a></li>
                           <li><a href="#">延保服务</a></li>
                           <li><a href="#">京东E卡</a></li>
                           <li><a href="#">京东通信</a></li>
                           <li><a href="#">京东鱼智能</a></li>
                       </ul>
                   </div>
               </div>
               <hr>
               <div class="dxbox">
                   <div class="dbdht">
                       <ul>
                           <li><a href="#">关于我们</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">联系我们</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">联系客服</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">合作招商</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">商家帮助</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">营销中心</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">手机京东</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">友情链接</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">销售联盟</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">京东社区</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">风险监测</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">隐私政策</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">京东公益</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">English Site</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">Media&ensp;&&ensp;IR</a></li>
                       </ul>
                   </div>
                   <div class="dbdht1">
                       <ul>
                           <li><a href="#">京公网安备&ensp;11000002000088号</a></li>
                           <li><span>|</span></li>
                           <li>京ICP证070359号</li>
                           <li><span>|</span></li>
                           <li><a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a></li>
                           <li><span>|</span></li>
                           <li>新出发京零字第大120007号</li>
                       </ul>
                   </div>
                   <div class="dbdht2">
                       <ul>
                           <li>互联网出版许可证编号新出网证(京)字150号</li>
                           <li><span>|</span></li>
                           <li><a href="#">出版物经营许可证</a></li>
                           <li><span>|</span></li>
                           <li><a href="#">网络文化经营许可证京网文[2014]2148-348号</a></li>
                           <li><span>|</span></li>
                           <li>违法和不良信息举报电话：4006561155</li>
                           <li><span>|</span></li>
                       </ul>
                   </div>
                   <div class="dbdht3">
                       <ul>
                           <li>
                               <p>Copyright © 2004-2020京东JD.com版权所有</p>
                           </li>
                           <li><span>|</span></li>
                           <li>消费者维权热线：4006067733 <a href="#">经营证照 </a></li>
                           <li><span>|</span></li>
                           <li> (京)网械平台备字(2018)第00003号 </li>
                           <li><span>|</span></li>
                           <li><a href="#"> 营业执照</a></li>

                       </ul>
                   </div>
                   <div class="dbdht4">
                       <ul>
                           <li><img src="img/国旗_03.png"></li>
                       </ul>
                   </div>
                   <div class="dbdht5">
                       <ul>
                           <li>京东旗下网站： <a href="#">京东钱包</a>
                           <li>
                           <li><span>|</span></li>
                           <li> <a href="#">京东智联云</a></li>
                       </ul>
                   </div>
                   <div class="dbdht6">
                       <ul>
                           <ul>
                               <li><img src="img/网站_03.png"></li>
                               <li class="zt">可信网站</br>信用评价</li>
                               <li><img src="img/网警_03.png"></li>
                               <li class="zt">网络警察</br>提醒你</li>
                               <li><img src="img/诚信_03.png"></li>
                               <li class="zt1">诚信网站</li>
                               <li><img src="img/互联_03.png"></li>
                               <li class="zt">网上有害信</br>息举报专区</li>
                               <li><img src="img/下载_03.png"></li>
                               <li class="zt">网络举报</br>APP下载</li>

                           </ul>
                   </div>
               </div>
           </div>

       </div>
       </div>
   </body>
   <script type="text/javascript">
       //手动轮播
       //获取左右按钮，加单击事件
       var guessyoulike = document.getElementById("guessyoulike");
       var leftDiv = guessyoulike.getElementsByClassName("left")[0];
       var rightDiv = guessyoulike.getElementsByClassName("right")[0];
       var ul = document.getElementById("goodlist");

       //向左移动
       var timer = null;
       leftDiv.onclick = leftMove;

           }, 20); //每隔20秒调用一次函数
       }
       //向右移动
       rightDiv.onclick = rightMove;

       //添加商品到购物车
       //1.自动生成商品列表
       //商品数据
       var goodsArr = [{
               imgUrl: "img/phone.jpg",
               name: "华为(HUAWEI)荣耀9Play3",
               price: "868"
           },
           {
               imgUrl: "img/phone2.jpg",
               name: "天语H5全面屏",
               price: "668"
           },
           {
               imgUrl: "img/phone3.jpg",
               name: "OPPO Find X2手机",
               price: "4999"
           },
           {
               imgUrl: "img/phone4.jpg",
               name: "vivo X50 5G手机",
               price: "3498"
           },
           {
               imgUrl: "img/phone5.jpg",
               name: "三星 Galaxy A90",
               price: "2699"
           },
           {
               imgUrl: "img/phone6.jpg",
               name: "Redmi 10X天玑820",
               price: "1799"
           },
           {
               imgUrl: "img/phone7.jpg",
               name: "vivo S5 8GB+128GB",
               price: "1998"
           },
           {
               imgUrl: "img/phone8.jpg",
               name: "vivo X30 双模5G",
               price: "2998"
           },
       ];
       //把以上商品放入ul列表
       //获取存放的商品ul
       var goodlist = document.getElementById("goodlist");
       //遍历数组通过函数来进行处理
       //创建li
       goodsArr.forEach(function(el, idx) {
           var li = document.createElement("li");
           goodlist.appendChild(li);
           //创建li中的内容
           var htmlStr = "<div><img src='" + el.imgUrl + "'></div>"
           htmlStr += "<div>" + el.name + "</div>";
           htmlStr += "<div>¥" + el.price + "</div>";
           htmlStr += "<div οnclick='addCart(" + idx + ")'><a href='#'>添加到购物车</a></div>";
           li.innerHTML = htmlStr;
       })

       //实现商品到购物车
       function addCart(i) {
           //一.如果添加的商品已经在购物车存在，则在数量上增加即可
           //通过要添加的商品名称与购物车商品名称对比
           //如果有相同的名称，则表示此商品已经添加过
           //(1)获取购物车中所有的商品名称
           //(a)获取content5所有行
           var content5 = document.getElementById("content5");
           var alldiv = content5.children;
           //console.log(alldiv);
           //(b)获取所有商品名称
           var allGoodsNameArr = [];
           for (var k = 0; k < alldiv.length; k++) {
               //console.log(k);
               //console.log(alldiv[k]);
               allGoodsNameArr.push(alldiv[k].children[2].innerText);
               //console.log(alldiv[k].children.length);
           }
           //(2)查找要添加的商品名称是否存在于购物车
           var index = allGoodsNameArr.findIndex(function(v) {
               return v == goodsArr[i].name;
           }); //返回-1,表示在数组中不存在要比较的对象
           if (index != -1) { //如果添加的商品已经存在于购物车中
               //获取已添加商品中所在盒子中的数量加1
               var n = alldiv[index].getElementsByTagName("span")[0].innerText;
               n++;
               alldiv[index].getElementsByTagName("span")[0].innerText = n;
               //更新小计单价*数量
               var price = alldiv[index].getElementsByClassName('price')[0].innerText.substr(1);
               console.log(price);
               alldiv[index].getElementsByClassName('total')[0].innerHTML = "¥" + n * price;

               //更新总计
               total();
               return; //不再执行下面的代码，即购物车中不再添加新行
           }
           var content5 = document.getElementById("content5");
           var newDiv = document.createElement("div");
           var phonebox1 = newDiv.classList.add("phonebox1");
           content5.appendChild(newDiv);
           //二.如果购物车没有此商品，则商品添加此商品到购物车中

}

       //删除
       var content5 = document.getElementById("content5");
       var allA = content5.getElementsByTagName("a"); //拿到所有a
       //console.log(allA);
       for (var i = 1; i < allA.length; i += 2) { //遍历奇数a
           allA[i].onclick = function() {
               this.parentNode.parentNode.remove(); //删除整个盒子
               total(); //重新总计
               //由每一个盒子复选框状态决定全选按钮状态
               //把复选框集合转成数组
               var arr = Array.from(allCheckbox);
               //只要数组中元素的checked值有一个为假，every函数的返回值为假
               checkAll.checked = arr.every(function(v) {
                   return v.checked;
               });
               //删除全部商品后全选按钮不再被选中
               if (allCheckbox.length === 0) {
                   checkAll.checked = false;
               }
           }
       }
       //获取全选按钮复选框
       var checkAll = document.getElementById("checkAll");

       //全选和全不选功能实现
       checkAll.onchange = function() {
           for (var i = 0; i < allCheckbox.length; i++) {
               allCheckbox[i].checked = checkAll.checked;
           }
           total();
       }

//*****************01
function total() {

           //三.总计
           var content5 = document.getElementById("content5");
           var alldiv = content5.children;
           var allCheckbox = content5.getElementsByTagName("input"); //获取盒子中所有的复选框
           //console.log(allCheckbox);
           var total = 0;
           for (var i = 0; i < alldiv.length; i++) {
               //累加复选框选中的盒子进行小计
               if (allCheckbox[i].checked) { //复选框选中状态
                   total += parseFloat(alldiv[i].children[6].innerText.substr(1));
               }
           }
           //console.log(total);
           //找到最后一个总计
           var content = document.getElementById("content");
           var Bottombox = content.getElementsByClassName("Bottombox")[0];
           var rightbottombox = Bottombox.getElementsByClassName("rightbottombox")[0];
           var bottomprice = rightbottombox.getElementsByClassName("bottomprice")[0];
           //console.log(bottomprice);
           bottomprice.innerHTML = "总价" + "¥" + total.toFixed(2);
       }

二.css部分

*{
   margin: 0px;
   padding: 0px;
}
body{
   font-size:15px ;
   font-family: "黑体";
}
ul li{
   list-style: none;
}
ul li a{
   text-decoration: none;
}
#contain{
   width: 1920px;
}
#banner{
   width: 1920px;
   height: 40px;
   background: lightgrey;


}
#content{
   width: 1250px;
   margin: 0px auto;
}
#footer{
   width: 1920px;
   height: 840px;
   background: #EEEEEE;
   display: flex;
   align-items: center;
   justify-content: center;
}
.banner1{
   width: 1250px;
   height: 40px;
   margin: 0px auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.banner2{
   width: 162px;
   height: 25px;


}
.banner3{
   width: 864px;
   height: 25px;

}
.content1{
   width: 1250px;
   height: 140px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.logo{
   width: 270px;
   height: 80px;
   font-size: 25px;

}
.logo a{
   text-decoration: none;
   color: black;
   position: relative;
   bottom: 15px;
}
.from{
   width: 420px;
   height: 34px;
   border: 3px solid #e2231a;
   }
.content2{
   width: 1250px;
   height: 60px;
   background: lightgoldenrodyellow;
   display: flex;
   align-items: center;
   border: 1px solid yellow;

}
.content3{
   width: 1250px;
}
#guessyoulike{
   width:1250px ;
   height: 466px;
   margin: 0px auto;
   margin-top: 20px;
   overflow: scroll;
   position: relative;
}
.footer1{
   width: 1250px;
   height: 760px;

}
.fourzt{
   width: 1110px;
   height: 60px;
   margin: 0px auto;
   margin-top: 20px;
}
.btbox{
   width: 1110px;
   height: 320px;
   margin: 0px auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}
.dxbox{
   width: 1250px;
   height: 300px;

}
.bt1{
width: 105px;
height: 200px;

}
.bt2{
   width: 115px;
   height: 200px;
   margin-left:130px ;
}
.bt3{
   width: 105px;
   height: 200px;

   margin-left:110px ;
}
.bt4{
   width: 105px;
   height: 200px;

   margin-left: 140px;
}
.bt5{
   width: 100px;
   height: 200px;

   margin-left: 145px;
}
.dbdht{
   width: 1250px;
   height: 40px;
}
.dbdht1{
   width: 960px;
   height: 30px;
   margin: 0px auto;
   }
.dbdht2{
   width: 1054px;
   height: 30px;
   margin: 0px auto;
}
.dbdht3{
   width: 980px;
   height: 30px;
   margin: 0px auto;
}
.dbdht4{
   width: 809px;
   height: 30px;
   margin: 0px auto;
}
.dbdht5{
   width: 687px;
   height: 50px;
   margin:0px auto;
}
.banner2 ul li{
   float: left;

}
.banner2 ul li a:hover{
   color: red;
}
.banner2 ul li a{
   color: lightslategrey;
}
.banner2 ul{
   margin-top:5px ;
}
.banner3 ul li{
   float: left;
}
.banner3 ul{
   margin-left: 300px;
   margin-top: 5px;
   color: grey;
}
.banner3 ul li a:hover{
   color: red;
}
.banner3 ul li a{
   color: grey;
}
.search{
width: 365px;
   height: 34px;
   border: 1px solid transparent;
   background: transparent;
   line-height: 34px;
   overflow: hidden;
}
.button{
   width: 58px;
   height: 34px;
   background: #E2231A;
   border: 1px solid transparent;
   outline: none;
cursor: pointer;
   position: absolute;
   top: 93px;
   right: 315px;
}
button:hover{
   background-color:#c81623 ;
}
.dl{
   width: 700px;
   height: 32px;
   margin-left: 50px;
}
.dl1{
   width: 73px;
   height: 30px;
   background: #C81623;
}
.dl1:hover{
   color: red;
}
.dl ul li{
   float: left;
}
.sanjiao{
   margin-top:10px ;
}
.denglu{
   font-size: 20px;
   color: darkorange;

}
.fourzt ul li{
   float: left;
   font-size:20px ;
   color: black;
}
.bt1 ul li a:hover{
   color: red;
}
.bt1 ul li a{
   color:grey ;
   font-size: 16px;
   margin-top: 10px;
}
.bt1 ul li{
   padding-top: 5px;
}
h2{
   color: #777;
}
.bt2 ul li a:hover{
   color: red;
}
.bt2 ul li a{
   color:grey ;
   font-size: 16px;
   margin-top: 10px;
}
.bt2 ul li{
   padding-top: 5px;
}
.bt3 ul li a:hover{
   color: red;
}
.bt3 ul li a{
   color:grey ;
   font-size: 16px;
   margin-top: 10px;
}
.bt3 ul li{
   padding-top: 5px;
}
.bt4 ul li a:hover{
   color: red;
}
.bt4 ul li a{
   color:grey ;
   font-size: 16px;
   margin-top: 10px;
}
.bt4 ul li{
   padding-top: 5px;
}
.bt5 ul li a:hover{
   color: red;
}
.bt5 ul li a{
   color:grey ;
   font-size: 16px;
   margin-top: 10px;
}
.bt5 ul li{
   padding-top: 5px;
}
.dbdht ul li{
   float: left;
   margin-top: 10px;
   margin-left:5px ;
}
.dbdht ul li a:hover{
   color: red;
}
.dbdht ul li a{
   color: grey;
   font-size: 15px;
}
span{
   color: grey;
}
.dbdht1 ul li{
   float: left;
   margin-top:5px ;
   color: grey;
   padding-right: 5px;
}
.dbdht1 ul li a{
   color: grey;
}
.dbdht1 ul li a:hover{
   color: red;
}
.dbdht2 ul li{
   float: left;
   margin-top:5px ;
   color: grey;
   padding-right: 5px;
}
.dbdht2 ul li a{
   color: grey;
}
.dbdht2 ul li a:hover{
   color: red;
}
.dbdht3 ul li{
   float: left;
   padding-right: 5px;
   color: grey;
   margin-top: 5px;
}
.dbdht3 ul li a{
   color: grey;
}
.dbdht3 ul li a:hover{
   color: red;
}
.dbdht3 ul li p{
   margin-top: -2px;
}
.dbdht5 ul li{
   float: left;
   padding-right: 5px;
   color: grey;
   margin-top: 5px;
}
.dbdht5 ul li a{
   color: grey;
}
.dbdht5 ul li a:hover{
   color: red;
}
.dbdht5 ul{
   margin-left:150px;
}
.dbdht6 ul li{
   float: left;
}
.dbdht6 {
   width: 686px;
   height: 50px;
   margin: 0px auto;
}
.zt{
   position: relative;
   bottom: 2px;
   color: dimgrey;
   padding-right: 20px;
}
.zt1{
   position: relative;
   top: 5px;
   color: dimgrey;
   padding-right: 20px;
}
h3{
   margin-top: 10px;
   padding-left:10px ;
   padding-right: 10px;
}
.sp a{
   color: red;
   font-size: 20px;
   text-decoration: none;

}
.sp em{
   font-style:normal ;
   display: block;
   line-height:40px ;
}
.sp1 hr{
   border-bottom:1px solid red ;
   margin-top: 8px;
}
.dq ul li{
   float: left;
   font-size: 18px;

}
.dq1{
   width: 220px;
   height: 27px;
   margin-top: -2px;
   font-size: 17px;

}
.dq2{
   margin-left:16px ;
}
.jdsp{
   width: 1250px;
   height: 53px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.operationbox{
   width: 1250px;
   height: 52px;
   display: flex;
   align-items: center;
   background: lightgrey;
}
.phonebox{
   width: 1250px;
   height: 272px;
   background: #FFFF00;
   display: flex;
   align-items: center;
   border:2px solid ;
   border-color:grey mintcream mintcream mintcream;
}
.phonebox1{
   width: 1250px;
   height: 272px;

   border:2px solid ;
   border-color:grey mintcream mintcream mintcream;
   display: flex;
   align-items: center;

}

.Bottombox{
   width: 1250px;
   height: 69px;
   border: 1px solid white;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.allshopping{
   width: 110px;
   height: 40px;
   font-size: 20px;
   line-height: 40px;
}
.allshopping ul li{
   color: red;
}
.underscorecharacter{
   margin-top:4px ;
   border-color: red;
}
em,i,u{
   font-style: normal;
}
.ttf{
   position: relative;
   top: 5px;
}
.fourzt ul li{
   font-size: 25px;
   color: #000000;
}
.region{
   width: 260px;
   height: 40px;
   font-size: 15px;
   margin-top: 10px;
   line-height: 30px;

}
.region ul li{
   float: left;
}
.area{
   width: 190px;
   height: 31px;
}
.allcheck{
   text-align: center;
   width: 133px;
   height: 32px;
   line-height: 25px;
}
.shopping{
   width: 208px;
   height: 32px;
   line-height: 27px;
   text-align: center;
}
.nullbox{
   width: 300px;
   height: 32px;
}
.unitprice{
   width: 160px;
   height: 32px;
   text-align: right;
   line-height: 25px;
}
.amount{
   width: 140px;
   height: 32px;
   text-align: center;
   line-height: 25px;
}
.subtotal{
   width: 140px;
   height: 32px;
   text-align: right;
   line-height:25px ;
}
.system{
   width: 75px;
   height: 32px;
   line-height: 25px;
   text-align: right;
}
.check{
   width: 16px;
   height: 100px;
   text-align: right;
   margin-left: 40px;
}
.phonepicture{
   width: 142px;
   height: 100px;
   text-align: center;
}
a{
   text-decoration: none;
   color: black;
}
a:hover{
   color: red;
}
.phoneinformation{
   width: 300px;
   height: 100px;
   text-align: center;
}
.phonechoose{
   width: 250px;
   height: 100px;
}
.price{
   width: 100px;
   height: 100px;
}
.number{
   width: 180px;
   height: 100px;

}
.total{
   width:98px ;
   height: 100px;
}
.opreate{
   height: 100px;
}
.bottombox{
   width: 343px;
   height: 27px;
   text-align: center;
}
.bottombox ul li{
   float: left;
   padding-left: 5px;
   padding-top: 5px;
}
.bottombox ul{
   margin-left: 43px;
}
.rightbottombox{
   width: 490px;
   height: 68px;
   display: flex;
}
.select{
   height: 69px;
}
.bottomprice{
   margin-left: 20px;
   font-size: 30px;
   color: grey;

}
.bottomprice span{
   color: red;
}
.settlement button{
   position: relative;
   left: 5px;
   margin-left:10px;
   padding:20px;
   padding-left:20px;
   width:120px;
   background:#F00;
   font-size:18px;
   font-weight: 800;
   color:#FFF

}
.guesswhatyoulike{
   color: red;
}
.guesswhatyoulike1{
   width: 90px;
   border-color:red ;
}
#goodlist li{
   float: left;
   width: 280px;
   height: 360px;
   border: 1px dashed #CACACA;
   margin-top: 5px;
   }
.phonechoose1{
   width: 300px;
   height: 100px;
}
#goodlist{
   width: 2260px;
   height: 400px;
   border: 1px dashed #cacaca;
   position: absolute;
   margin-top: 2px;
}
#guessyoulike .left,#guessyoulike .right{
   position: absolute;
   width: 40px;
   height: 100px;
   line-height: 100px;
   background-color: lightgray;
   top: 100px;
   font-size: 40px;
   display: none;
}
#guessyoulike .left{
   left: 0;
}
#guessyoulike .right{
   right: 0;
   text-align: center;

}
#goodlistdiv{
   width:1130px ;
   height: 370px;
   margin-left: 46px;
   margin-right: 46px;
   position: absolute;
   overflow: hidden;
}

京东购物车（html+css+js）

html+js部分

猜你喜欢