购物车页面作业
//html页面代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="stylesheet" type="text/css" href="css/cart.css"/> <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"> <script type="text/javascript" src="js/jquery-v-3.4.1.js"></script> <script src="js/cart.js" type="text/javascript" charset="utf-8"></script> </head> <body> <header> <div class="main"> <div class="fl"><b>我的购物车</b>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div> <div class="fr"> <span> <a href="#">我是XXX</a><i class="fa fa-angle-down fa-1x"></i> <ul> <li>个人中心</li> <li>我的喜欢</li> <li>评价晒单</li> <li>小米账户</li> <li>退出登录</li> </ul> </span> <a href="#">我的订单</a> </div> </div> </header> <div class="clear"></div> <section style="background: #f5f5f5;padding: 30px 0;"> <div class="main"> <div class="cart_box"> <div class="cart_title"> <dl> <dd><i class="fa fa_cart fa-check cart_xz" id="allXz"></i><label>全选</label></dd> <dd> </dd> <dd>商品名称</dd> <dd>单价</dd> <dd>数量</dd> <dd>小计</dd> <dd>操作</dd> </dl> </div> <div class="clear"></div> <ul id="list_item_box" > <li class="list_item"> <dl> <dd><i class="fa fa_cart fa-check cart_xz "></i></dd> <dd><img src="img/phone/phone1.png" alt=""></dd> <dd class="text_1">小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB</dd> <dd><em class="cart_dj">3199</em>元</dd> <dd> <label> <button type="button" class="cart_btnjian">-</button> <input type="number" value="1"> <button type="button" class="cart_btnjia">+</button> </label> </dd> <dd><em class="cart_xj">3199</em>元</dd> <dd><i class="fa fa-times"></i></dd> </dl> </li> <li class="list_item"> <dl> <dd><i class="fa fa_cart fa-check cart_xz "></i></dd> <dd><img src="img/phone/phone1.png" alt=""></dd> <dd class="text_1">小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB</dd> <dd><em class="cart_dj">3199</em>元</dd> <dd> <label> <button type="button" class="cart_btnjian">-</button> <input type="number" value="1"> <button type="button" class="cart_btnjia">+</button> </label> </dd> <dd><em class="cart_xj">3199</em>元</dd> <dd><i class="fa fa-times"></i></dd> </dl> </li> <li class="list_item"> <dl> <dd><i class="fa fa_cart fa-check cart_xz "></i></dd> <dd><img src="img/phone/phone1.png" alt=""></dd> <dd class="text_1">小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB</dd> <dd><em class="cart_dj">3199</em>元</dd> <dd> <label> <button type="button" class="cart_btnjian">-</button> <input type="number" value="1"> <button type="button" class="cart_btnjia">+</button> </label> </dd> <dd><em class="cart_xj">3199</em>元</dd> <dd><i class="fa fa-times"></i></dd> </dl> </li> </ul> <div class="clear"></div> </div> <div class="js"> <div class="fl"><a href="#">继续购物</a> <em>|</em> 共<i class="tojs">0</i>件商品，已选择<i class="xzjs">0</i>件</div> <div class="fr">合计：<b>3199</b>元 <button>去结算</button></div> </div> <div class="clear"></div> <div class="miproduct_box"> <h3 class="cart_main_title"><span>买购物车中商品的人还买了</span></h3> <section> <div class="fl"> <a><img src="img/buy/手机AD.jpg" alt=""></a> </div> <div class="fr"> <ul> <li > <a href=""> <img src="img/buy/手机1.jpg"> <p class="text_a">小米5X 4G+64G</p> <p class="text_b">光学变焦双摄，拍人更美</p> <p class="text_b"><b>1４99元</b></p> </a> </li> <li > <a href=""> <img src="img/buy/手机1.jpg"> <p class="text_a">小米5X 4G+64G</p> <p class="text_b">光学变焦双摄，拍人更美</p> <p class="text_b"><b>1４99元</b></p> </a> </li> <li > <a href=""> <img src="img/buy/手机1.jpg"> <p class="text_a">小米5X 4G+64G</p> <p class="text_b">光学变焦双摄，拍人更美</p> <p class="text_b"><b>1４99元</b></p> </a> </li> <li > <a href=""> <img src="img/buy/手机1.jpg"> <p class="text_a">小米5X 4G+64G</p> <p class="text_b">光学变焦双摄，拍人更美</p> <p class="text_b"><b>1４99元</b></p> </a> </li> <li > <a href=""> <img src="img/buy/手机1.jpg"> <p class="text_a">小米5X 4G+64G</p> <p class="text_b">光学变焦双摄，拍人更美</p> <p class="text_b"><b>1４99元</b></p> </a> </li> <li > <a href=""> <img src="img/buy/手机1.jpg"> <p class="text_a">小米5X 4G+64G</p> <p class="text_b">光学变焦双摄，拍人更美</p> <p class="text_b"><b>1４99元</b></p> </a> </li> <li > <a href=""> <img src="img/buy/手机1.jpg"> <p class="text_a">小米5X 4G+64G</p> <p class="text_b">光学变焦双摄，拍人更美</p> <p class="text_b"><b>1４99元</b></p> </a> </li> <li > <a href=""> <img src="img/buy/手机1.jpg"> <p class="text_a">小米5X 4G+64G</p> <p class="text_b">光学变焦双摄，拍人更美</p> <p class="text_b"><b>1４99元</b></p> </a>