国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

2019-9-29 小米商城購物車頁面

原創(chuàng) 2019-09-29 16:50:31 2021
摘要：在線預(yù)覽地址：http://www.pursuer.top/xiaomi1/cart.htmlhtml：<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>小米商城</title>  <link rel=

在線預(yù)覽地址：http://www.pursuer.top/xiaomi1/cart.html

html：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>小米商城</title>

  <link rel="shortcut icon"  type="image/x-icon" href="static/images/footlogo.png">

  <!-- <link rel="stylesheet" href="static/layui/css/layui.css"> -->

  <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">

  <link rel="stylesheet" href="static/css/cart.css">

  <script src="static/js/jq_3.3.1_mi.js"></script>

  <script src="static/js/cart.js"></script>

</head>

<body>

  <!-- 頭部 -->

  <div>

    <div>

      <div>

        <img src="static/images/footlogo.png" alt="">

        <h2>我的購物車</h2>

        <p>溫馨提示：產(chǎn)品是否購買成功，以最終下單為準(zhǔn)哦，請盡快結(jié)算</p>

      </div>

      <div>

        <div>

          <span>我是某某某<i class="fa fa-angle-down fa-1x"></i></span>

          <ul>

            <li>個人中心</li>

            <li>評價曬單</li>

            <li>我的喜歡</li>

            <li>小米賬戶</li>

            <li>退出登錄</li>

          </ul> 

        <div></div>

        </div>

        <div><a href="order.html">我的訂單</a></div>

      </div>

    </div>

  </div>

  <div></div>


  <!-- 主體 -->

  <div>

    <div>

      <!-- 購物列表 -->

      <div>

        <div>

          <div class="select select-all"><i class="fa fa-check" id="check-all"></i>全選</div>

          <div></div>

          <div>商品名稱</div>

          <div>單價</div>

          <div>數(shù)量</div>

          <div>小計(jì)</div>

          <div>操作</div>

        </div>


        <div>

          <div><i class="fa fa-check"></i></div>

          <div><img src="static/images/phone/phone1.png" alt=""></div>

          <div> 小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 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>

          <div><i class="fa fa-check"></i></div>

          <div><img src="static/images/phone/phone1.png" alt=""></div>

          <div> 小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 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>

          <div><i class="fa fa-check"></i></div>

          <div><img src="static/images/phone/phone1.png" alt=""></div>

          <div> 小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 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></div>

      </div>


      <div>

        <div>

            <div>

                <a href="index.html">繼續(xù)購物</a>

                <span>共<span style="color: #ff6a00;margin:0 6px;">3</span>件商品,已選擇<span style="color: #ff6a00;margin:0 6px;">0</span>件</span>

            </div> 

            <div>

                <span>合計(jì): <span style="margin:0 6px;font-size: 20px;">0</span>元 </span>

                <a href="close.html"><button>去結(jié)算</button></a>

            </div>

        </div>

        <div></div>

      </div>


      <div></div>

      <!-- 購物列表 -->


      <!-- 手機(jī)專區(qū) -->

      <div>

        <div>

          <h2>買購物車中商品的人還買了</h2>

        </div>

        <div></div>

        <div style="background:url(static/images/buy/手機(jī)AD.jpg);;">

        </div>

        <div>

          <div style="margin-bottom:14px;">

            <div class="p move">

              <img src="static/images/buy/手機(jī)1.jpg" alt="">

              <div><a href="#">小米5X 4G+64GB</a></div>

              <div>光學(xué)變焦雙攝,拍人更美</div>

              <div>1499元</div>

            </div>


            <div class="p move">

              <span>享八折</span>

              <img src="static/images/buy/手機(jī)2.jpg" alt="">

              <div><a href="#">小米5X 4G+64GB</a></div>

              <div>光學(xué)變焦雙攝,拍人更美</div>

              <div>1499元</div>

            </div>


            <div class="p move">

              <img src="static/images/buy/手機(jī)3.jpg" alt="">

              <div><a href="#">小米5X 4G+64GB</a></div>

              <div>光學(xué)變焦雙攝,拍人更美</div>

              <div>1499元</div>

            </div>


            <div class="p move">

              <img src="static/images/buy/手機(jī)4.jpg" alt="">

              <div><a href="#">小米5X 4G+64GB</a></div>

              <div>光學(xué)變焦雙攝,拍人更美</div>

              <div>1499元</div>

            </div>


            <div></div>

          </div>

          <div>

            <div class="p move">

              <span>享八折</span>

              <img src="static/images/buy/手機(jī)5.jpg" alt="">

              <div><a href="#">小米5X 4G+64GB</a></div>

              <div>光學(xué)變焦雙攝,拍人更美</div>

              <div>1499元</div>

            </div>


            <div class="p move">

              <img src="static/images/buy/手機(jī)6.jpg" alt="">

              <div><a href="#">小米5X 4G+64GB</a></div>

              <div>光學(xué)變焦雙攝,拍人更美</div>

              <div>1499元</div>

            </div>


            <div class="p move">

              <img src="static/images/buy/手機(jī)7.jpg" alt="">

              <div><a href="#">小米5X 4G+64GB</a></div>

              <div>光學(xué)變焦雙攝,拍人更美</div>

              <div>1499元</div>

            </div>


            <div class="p move">

              <span>享八折</span>

              <img src="static/images/buy/手機(jī)8.jpg" alt="">

              <div><a href="#">小米5X 4G+64GB</a></div>

              <div>光學(xué)變焦雙攝,拍人更美</div>

              <div>1499元</div>

            </div>

          </div>  

        </div>

      </div>

      <div></div>


      <!-- 手機(jī)專區(qū)end -->

     

    </div>

  </div>

  <!-- 底部 -->

  <div>

    <div>

      <div>

        <a href=""><i class="fa fa-wrench"></i>預(yù)約維修服務(wù)</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天免費(fèi)換貨</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余家售后網(wǎng)點(diǎn)</a>

      </div>

      <div>

              <div>

          <div>幫助中心</div>

          <a>賬戶管理</a>

          <a>購物指南</a>

          <a>訂單操作</a>

        </div>

        <div>

          <div>服務(wù)支持</div>

          <a>售后政策</a>

          <a>自助服務(wù)</a>

          <a>相關(guān)下載</a>

        </div>

        <div>

          <div>線下門店</div>

          <a>小米之家</a>

          <a>服務(wù)網(wǎng)點(diǎn)</a>

          <a>授權(quán)體驗(yàn)店</a>

        </div>

        <div>

          <div>關(guān)于小米</div>

          <a>了解小米</a>

          <a>加入小米</a>

          <a>投資者關(guān)系</a>

        </div>

        <div>

          <div>關(guān)注我們</div>

          <a>新浪微博</a>

          <a>官網(wǎng)微博</a>

          <a>聯(lián)系我們</a>

        </div>

        <div>

          <div>特色服務(wù)</div>

          <a>F碼通道</a>

          <a>禮物碼</a>

          <a>防偽查詢</a>

        </div>

        <div>

          <span style="font-size:22px;">Feir-520-1314</span>

          <span style="font-size:12px;color: #616161;">周一至周日 8:00-18:00<br>(僅收市話費(fèi))</span>

          <div id="tel"><a><i class="fa fa-commenting"></i>聯(lián)系客服</a></div>

        </div>

      </div>

      <div></div>

      <div>

        <div style="background: url(static/images/footlogo.png);"></div>

        <div>

          <div>

            <a href="">小米商城</a><span>|</span>

            <a href="">MIUI</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="">路由器</a><span>|</span>

            <a href="">米粉卡</a><span>|</span>

            <a href="">政企服務(wù)</a><span>|</span>

            <a href="">小米天貓店</a><span>|</span>

            <a href="">隱私政策</a><span>|</span>

            <a href="">問題反饋</a><span>|</span>

            <a href="">Select&nbsp;&nbsp;Region</a>

          </div>

          <div>

            <span> <a href="">?mi.com</a> 京ICP證110507號 <a href="">京ICP備10046444號</a> <a href="">京公網(wǎng)安備11010802020134號</a> <a href="">京網(wǎng)文[2014]0059-0009號</a> <br>違法和不良信息舉報電話：185-0130-1238，本網(wǎng)站所列數(shù)據(jù)，除特殊說明，所有數(shù)據(jù)均出自我司實(shí)驗(yàn)室測試</span>

          </div>

        </div>

        <div>

          <img src="static/images/footericon1.png" alt="">

          <img src="static/images/footericon2.png" alt="">

          <img src="static/images/footericon3.png" alt="">

          <img src="static/images/footericon4.png" alt="">

          <img src="static/images/footericon5.png" alt="">

        </div>

      </div>

      <div></div>

      <div>探索黑科技，小米為發(fā)燒而生！</div>

    </div>

  </div>

</body>

</html>


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;/*文本省略點(diǎn)點(diǎn)點(diǎn)*/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;}

/*手機(jī)專區(qū)*/

.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');

        }

    })

})


批改老師：天蓬老師批改時間：2019-09-29 19:32:08
老師總結(jié)：完成的不錯, 寫得很長時間吧, 加油

發(fā)布手記

熱門詞條