search

博客列表 >1230利用gird与flex混用制作天猫购物车界面

1230利用gird与flex混用制作天猫购物车界面

Admin
Admin原创
2020年01月03日 16:45:49596浏览

购物车

购物车效果图


看上去效果还行吧flex和grid混搭了一下

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" type="text/css" href="cart_plus.css">
  7. </head>
  8. <body>
  9.     <div class="cart">
  10.         <!-- 头部选项卡 -->
  11.         <div class="cart-top">
  12.             <div class="top-tit">
  13.                 <span class="active">全部标题<i>2</i></span>
  14.                 <span>降价商品<i>0</i></span>
  15.                 <span>库存紧张<i>0</i></span>
  16.             </div>
  17.             <div class="top-js">
  18.                 <span>已选商品(不含运费)</span>
  19.                 <span>0.00</span>
  20.                 <span>结算</span>
  21.             </div>
  22.         </div>
  23.         <div class="cart-head">
  24.             <div class="allchecked">
  25.                 <input type="checkbox" name="allcheck" id="allcheck">
  26.                 <label for="allcheck">全选</label>
  27.             </div>
  28.             <span>商品信息</span>
  29.             <span>单价</span>
  30.             <span>数量</span>
  31.             <span>金额</span>
  32.             <span>操作</span>
  33.         </div>
  34.         <div class="cart-main">
  35.             <div class="cart-goods">
  36.                 <div class="store">
  37.                     <input type="checkbox" name="sj[]">
  38.                     <img src="images/Snipaste_2020-01-02_15-34-10.png">
  39.                     <span>店铺<a href="#">ROG玩家国度网硕专</a></span>
  40.                     <img src="">
  41.                 </div>
  42.                 <div class="cart-goods-shop">
  43.                     <input type="checkbox" name="goods[]">
  44.                     <img src="images/O1CN01IXWgIU1eG8aK78ivl_!!0-item_pic.jpg_80x80.jpg">
  45.                     <div class="cart-info">                        
  46.                         <a href="#">ROG玩家国度Gladius II 大G2代PINK樱花粉色吃鸡电竞游戏有线鼠标</a>
  47.                         <i>年货节</i>
  48.                         <span>
  49.                             <i><img src="images/xcard.png"></i>
  50.                             <i><img src="images/T1Vyl6FCBlXXaSQP_X-16-16.png" alt=""></i>
  51.                             <i><img src="images/T1BCidFrNlXXaSQP_X-16-16.png" alt=""></i>
  52.                         </span>
  53.                     </div>
  54.                     <div class="cate">
  55.                         <p>套餐类型：官方标配</p>
  56.                         <p>颜色分类：Gladius</p>
  57.                     </div>
  58.                     <div class="price">
  59.                         <p><del>￥720.00</del></p>
  60.                         <p>￥469.00</p>
  61.                     </div>
  62.                     <div class="num">
  63.                         <div class="reduce">-</div>
  64.                         <input type="text" name="num">
  65.                         <div class="add">+</div>
  66.                     </div>    
  67.                     <div class="main-price">
  68.                         <span>￥469.00</span>
  69.                     </div>
  70.                     <div class="operation">
  71.                         <p><a href="#">移入收藏夹</a></p>
  72.                         <p><a href="#">删除</a></p>
  73.                     </div>
  74.                 </div>    
  75.             </div>
  76.             <div class="cart-goods">
  77.                 <div class="store">
  78.                     <input type="checkbox" name="sj[]">
  79.                     <img src="images/Snipaste_2020-01-02_15-34-10.png">
  80.                     <span>店铺<a href="#">ROG玩家国度网硕专</a></span>
  81.                     <img src="">
  82.                 </div>
  83.                 <div class="cart-goods-shop">
  84.                     <input type="checkbox" name="goods[]">
  85.                     <img src="images/O1CN01IXWgIU1eG8aK78ivl_!!0-item_pic.jpg_80x80.jpg">
  86.                     <div class="cart-info">                        
  87.                         <a href="#">ROG玩家国度Gladius II 大G2代PINK樱花粉色吃鸡电竞游戏有线鼠标</a>
  88.                         <i>年货节</i>
  89.                         <span>
  90.                             <i><img src="images/xcard.png"></i>
  91.                             <i><img src="images/T1Vyl6FCBlXXaSQP_X-16-16.png" alt=""></i>
  92.                             <i><img src="images/T1BCidFrNlXXaSQP_X-16-16.png" alt=""></i>
  93.                         </span>
  94.                     </div>
  95.                     <div class="cate">
  96.                         <p>套餐类型：官方标配</p>
  97.                         <p>颜色分类：Gladius</p>
  98.                     </div>
  99.                     <div class="price">
  100.                         <p><del>￥720.00</del></p>
  101.                         <p>￥469.00</p>
  102.                     </div>
  103.                     <div class="num">
  104.                         <div class="reduce">-</div>
  105.                         <input type="text" name="num">
  106.                         <div class="add">+</div>
  107.                     </div>    
  108.                     <div class="main-price">
  109.                         <span>￥469.00</span>
  110.                     </div>
  111.                     <div class="operation">
  112.                         <p><a href="#">移入收藏夹</a></p>
  113.                         <p><a href="#">删除</a></p>
  114.                     </div>
  115.                 </div>    
  116.                 <div class="cart-goods-shop">
  117.                     <input type="checkbox" name="goods[]">
  118.                     <img src="images/O1CN01IXWgIU1eG8aK78ivl_!!0-item_pic.jpg_80x80.jpg">
  119.                     <div class="cart-info">                        
  120.                         <a href="#">ROG玩家国度Gladius II 大G2代PINK樱花粉色吃鸡电竞游戏有线鼠标</a>
  121.                         <i>年货节</i>
  122.                         <span>
  123.                             <i><img src="images/xcard.png"></i>
  124.                             <i><img src="images/T1Vyl6FCBlXXaSQP_X-16-16.png" alt=""></i>
  125.                             <i><img src="images/T1BCidFrNlXXaSQP_X-16-16.png" alt=""></i>
  126.                         </span>
  127.                     </div>
  128.                     <div class="cate">
  129.                         <p>套餐类型：官方标配</p>
  130.                         <p>颜色分类：Gladius</p>
  131.                     </div>
  132.                     <div class="price">
  133.                         <p><del>￥720.00</del></p>
  134.                         <p>￥469.00</p>
  135.                     </div>
  136.                     <div class="num">
  137.                         <div class="reduce">-</div>
  138.                         <input type="text" name="num">
  139.                         <div class="add">+</div>
  140.                     </div>    
  141.                     <div class="main-price">
  142.                         <span>￥469.00</span>
  143.                     </div>
  144.                     <div class="operation">
  145.                         <p><a href="#">移入收藏夹</a></p>
  146.                         <p><a href="#">删除</a></p>
  147.                     </div>
  148.                 </div>
  149.             </div>
  150.         </div>
  151.         <div class="cart-footer">
  152.             <div class="allchecked">
  153.                 <input type="checkbox" name="allcheck" id="allcheck">
  154.                 <label for="allcheck">全选</label>
  155.             </div>
  156.             <a href="#">删除</a>
  157.             <a href="#">清楚失效宝贝</a>
  158.             <a href="#">移入收藏夹</a>
  159.             <a href="#">分享</a>
  160.             <span>已选商品<i>0</i>件</span>
  161.             <span>合计(不含运费)：<i>0.00</i></span>
  162.             <div class="Settlement">结算</div>
  163.         </div>
  164.     </div>
  165. </body>
  166. </html>

CSS代码

  1. @import url('../full_template/components/public/public_reset.css');
  2. .cart{
  3.     width: 1200px;
  4.     padding: 15px;
  5.     margin: auto;
  6.     box-sizing: border-box;
  7.     display: flex;
  8.     flex-direction: column;
  9.     background: white;    
  10. }
  11. .cart>.cart-top{
  12.     height: 45px;
  13.     display: flex;
  14.     justify-content: space-between;
  15. }
  16. .cart a:hover{
  17.     color: rgb(255, 68, 0);
  18. }
  19. .cart>.cart-top>.top-tit span{
  20.     display: inline-block;
  21.     width: 100px;
  22.     height: 40px;
  23.     font-size: 20px;
  24.     font-weight: bolder;
  25. }
  26. .cart>.cart-top>.top-tit span.active{
  27.     color: rgb(255, 68, 0);
  28.     border-bottom: 2px solid rgb(255, 68, 0);
  29. }
  30. .cart>.cart-top>.top-js>:nth-child(2){
  31.     font-weight: bolder;
  32.     color: rgb(255, 68, 0);
  33. }
  34. .cart>.cart-top>.top-js>:nth-child(3){
  35.     display: inline-block;
  36.     padding: 2px 5px;
  37.     background: rgb(170, 170, 170);
  38.     color: white;
  39.     border-radius:2px;
  40. }
  41. .cart>.cart-head{
  42.     display: grid;
  43.     grid-template-columns: 150px auto 150px 150px 150px 150px;
  45. }
  46. .cart>.cart-main{
  47.     margin: 20px 0;
  48.     display: flex;
  49.     flex-direction: column;
  50. }
  51. .cart>.cart-main>.cart-goods{
  52.     display: flex;
  53.     flex-direction: column;
  54.     margin-bottom: 20px;
  55. }
  56. .cart>.cart-main>.cart-goods>.store{
  57.     height: 30px;
  58.     line-height: 30px;
  59.     display: flex;
  60.     align-items: center;
  61. }
  62. .cart>.cart-main>.cart-goods>.store>:nth-child(2){
  63.     margin: 0 10px;
  64. }
  65. .cart>.cart-main>.cart-goods > .cart-goods-shop{
  66.     border:1px solid #888888;
  67.     padding: 15px;
  68.     box-sizing: border-box;
  69.     display: grid;
  70.     grid-template-columns: 20px 80px 300px 150px 150px 150px 150px 120px; 
  71.     background: rgb(252, 252, 252);
  72. }
  73. .cart>.cart-main>.cart-goods>.cart-goods-shop>:nth-child(1){
  74.     align-self: start;
  75. }
  76. .cart>.cart-main>.cart-goods>.cart-goods-shop>.cart-info{
  77.     margin-left: 10px;
  78.     display:flex;
  79.     flex-flow: column nowrap;
  80.     justify-content: space-between;
  81. }
  82. .cart>.cart-main>.cart-goods>.cart-goods-shop>.cart-info>i{
  83.     width: 40px;
  84.     padding: 1px;
  85.     background: red;
  86.     color: white;
  87.     border-radius: 3px;
  88. }
  89. .cart>.cart-main>.cart-goods>.cart-goods-shop>.num{
  90.     display: flex;
  91. }
  92. .cart>.cart-main>.cart-goods>.cart-goods-shop>.num>input{
  93.     width: 50px;
  94.     height: 20px;
  95.     text-align: center;
  96.     font-size: 13px;
  97. }
  98. .cart>.cart-main>.cart-goods>.cart-goods-shop>.num>div{
  99.     width: 20px;
  100.     height: 20px;
  101.     line-height: 20px;
  102.     border:1px solid #e5e5e5;
  103.     background:#f0f0f0;
  104.     text-align: center;
  105.     color: #444;
  106. }
  107. .cart>.cart-main>.cart-goods>.cart-goods-shop>.num>div:hover{
  108.     cursor: pointer;
  109.     border-color: rgb(255, 68, 44);
  110. }
  111. .cart>.cart-main>.cart-goods>.cart-goods-shop>.price>:nth-child(2){
  112.     color:#3c3c3c;
  113.     font-weight: 700;
  114.     font-size: 16px;
  115. }
  116. .cart>.cart-main>.cart-goods>.cart-goods-shop>.main-price{
  117.     color: rgb(255, 68, 44);
  118.     font-weight: 700;
  119.     font-size: 16px;
  120. }
  121. .cart>.cart-footer{
  122.     padding-left: 5px;
  123.     height: 62px;
  124.     box-sizing: border-box;
  125.     background: rgb(229, 229, 229);
  126.     display: grid;
  127.     grid-template-columns: repeat(5,100px) auto 100px 200px 100px;
  128.     grid-template-areas: 'qx sc qcsxbb yrscj fx . ysxp hj js';
  129.     align-items: center;
  130. }
  131. .cart>.cart-footer>:nth-child(6){
  132. grid-area: ysxp;
  133. }
  134. .cart>.cart-footer>:nth-child(7){
  135. grid-area: hj;
  137. }
  138. .cart>.cart-footer>:nth-child(8){
  139. grid-area: js;
  140. height: 62px;
  141. line-height: 62px;
  142. text-align: center;
  143. font-size: 24px;
  144. color: white;
  145. background: rgb(176, 176, 176);
  146. }
  147. .cart>.cart-footer span i{
  148.     font-weight: bolder;
  149.     color: rgb(255, 68, 42);
  150.     font-style: normal;
  151.     font-size: 22px;
  152. }

支付选择界面

HTML源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" type="text/css" href="cart_pay.css">
  7. </head>
  8. <body>
  9.     <div class="cart-pay">
  10.         <!-- 收货地址开始 -->
  11.         <div class="people_addess">
  12.             <h3>选择收货地址</h3>
  13.             <div>
  14.                 <div class="address-card active">
  15.                     <p>M78周小雨</p>
  16.                     <span>这里是我可爱的地址(●ˇ∀ˇ●)</span>
  17.                 </div>
  18.                 <div class="address-card">
  19.                     <p>M78周小雨</p>
  20.                     <span>这里是我可爱的地址(●ˇ∀ˇ●)</span>
  21.                 </div>
  22.                 <div class="address-card">
  23.                     <p>M78周小雨</p>
  24.                     <span>这里是我可爱的地址(●ˇ∀ˇ●)</span>
  25.                 </div>
  26.                 <div class="address-card">
  27.                     <p>M78周小雨</p>
  28.                     <span>这里是我可爱的地址(●ˇ∀ˇ●)</span>
  29.                 </div>
  30.             </div>
  31.         </div>
  32.         <!-- 购物列表 -->
  33.         <div class="cart">
  34.             <div class="cart-head">
  35.                 <div class="allchecked">
  36.                     <input type="checkbox" name="allcheck" id="allcheck">
  37.                     <label for="allcheck">全选</label>
  38.                 </div>
  39.                 <span>商品信息</span>
  40.                 <span>单价</span>
  41.                 <span>数量</span>
  42.                 <span>金额</span>
  43.                 <span>操作</span>
  44.             </div>
  45.             <div class="cart-main">
  46.                 <div class="cart-goods">
  47.                     <div class="store">
  48.                         <input type="checkbox" name="sj[]">
  49.                         <img src="images/Snipaste_2020-01-02_15-34-10.png">
  50.                         <span>店铺<a href="#">ROG玩家国度网硕专</a></span>
  51.                         <img src="">
  52.                     </div>
  53.                     <div class="cart-goods-shop">
  54.                         <input type="checkbox" name="goods[]">
  55.                         <img src="images/O1CN01IXWgIU1eG8aK78ivl_!!0-item_pic.jpg_80x80.jpg">
  56.                         <div class="cart-info">                        
  57.                             <a href="#">ROG玩家国度Gladius II 大G2代PINK樱花粉色吃鸡电竞游戏有线鼠标</a>
  58.                             <i>年货节</i>
  59.                             <span>
  60.                                 <i><img src="images/xcard.png"></i>
  61.                                 <i><img src="images/T1Vyl6FCBlXXaSQP_X-16-16.png" alt=""></i>
  62.                                 <i><img src="images/T1BCidFrNlXXaSQP_X-16-16.png" alt=""></i>
  63.                             </span>
  64.                         </div>
  65.                         <div class="cate">
  66.                             <p>套餐类型：官方标配</p>
  67.                             <p>颜色分类：Gladius</p>
  68.                         </div>
  69.                         <div class="price">
  70.                             <p><del>￥720.00</del></p>
  71.                             <p>￥469.00</p>
  72.                         </div>
  73.                         <div class="num">
  74.                             <div class="reduce">-</div>
  75.                             <input type="text" name="num">
  76.                             <div class="add">+</div>
  77.                         </div>    
  78.                         <div class="main-price">
  79.                             <span>￥469.00</span>
  80.                         </div>
  81.                         <div class="operation">
  82.                             <p><a href="#">移入收藏夹</a></p>
  83.                             <p><a href="#">删除</a></p>
  84.                         </div>
  85.                     </div>    
  86.                 </div>
  87.                 <div class="cart-goods">
  88.                     <div class="store">
  89.                         <input type="checkbox" name="sj[]">
  90.                         <img src="images/Snipaste_2020-01-02_15-34-10.png">
  91.                         <span>店铺<a href="#">ROG玩家国度网硕专</a></span>
  92.                         <img src="">
  93.                     </div>
  94.                     <div class="cart-goods-shop">
  95.                         <input type="checkbox" name="goods[]">
  96.                         <img src="images/O1CN01IXWgIU1eG8aK78ivl_!!0-item_pic.jpg_80x80.jpg">
  97.                         <div class="cart-info">                        
  98.                             <a href="#">ROG玩家国度Gladius II 大G2代PINK樱花粉色吃鸡电竞游戏有线鼠标</a>
  99.                             <i>年货节</i>
  100.                             <span>
  101.                                 <i><img src="images/xcard.png"></i>
  102.                                 <i><img src="images/T1Vyl6FCBlXXaSQP_X-16-16.png" alt=""></i>
  103.                                 <i><img src="images/T1BCidFrNlXXaSQP_X-16-16.png" alt=""></i>
  104.                             </span>
  105.                         </div>
  106.                         <div class="cate">
  107.                             <p>套餐类型：官方标配</p>
  108.                             <p>颜色分类：Gladius</p>
  109.                         </div>
  110.                         <div class="price">
  111.                             <p><del>￥720.00</del></p>
  112.                             <p>￥469.00</p>
  113.                         </div>
  114.                         <div class="num">
  115.                             <div class="reduce">-</div>
  116.                             <input type="text" name="num">
  117.                             <div class="add">+</div>
  118.                         </div>    
  119.                         <div class="main-price">
  120.                             <span>￥469.00</span>
  121.                         </div>
  122.                         <div class="operation">
  123.                             <p><a href="#">移入收藏夹</a></p>
  124.                             <p><a href="#">删除</a></p>
  125.                         </div>
  126.                     </div>    
  127.                     <div class="cart-goods-shop">
  128.                         <input type="checkbox" name="goods[]">
  129.                         <img src="images/O1CN01IXWgIU1eG8aK78ivl_!!0-item_pic.jpg_80x80.jpg">
  130.                         <div class="cart-info">                        
  131.                             <a href="#">ROG玩家国度Gladius II 大G2代PINK樱花粉色吃鸡电竞游戏有线鼠标</a>
  132.                             <i>年货节</i>
  133.                             <span>
  134.                                 <i><img src="images/xcard.png"></i>
  135.                                 <i><img src="images/T1Vyl6FCBlXXaSQP_X-16-16.png" alt=""></i>
  136.                                 <i><img src="images/T1BCidFrNlXXaSQP_X-16-16.png" alt=""></i>
  137.                             </span>
  138.                         </div>
  139.                         <div class="cate">
  140.                             <p>套餐类型：官方标配</p>
  141.                             <p>颜色分类：Gladius</p>
  142.                         </div>
  143.                         <div class="price">
  144.                             <p><del>￥720.00</del></p>
  145.                             <p>￥469.00</p>
  146.                         </div>
  147.                         <div class="num">
  148.                             <div class="reduce">-</div>
  149.                             <input type="text" name="num">
  150.                             <div class="add">+</div>
  151.                         </div>    
  152.                         <div class="main-price">
  153.                             <span>￥469.00</span>
  154.                         </div>
  155.                         <div class="operation">
  156.                             <p><a href="#">移入收藏夹</a></p>
  157.                             <p><a href="#">删除</a></p>
  158.                         </div>
  159.                     </div>
  160.                 </div>
  161.             </div>
  162.         </div>
  163.         <!-- 支付方式 -->
  164.         <div class="checkpay">
  165.             <h3>支付方式选择</h3>
  166.             <div>
  167.                 <div class="shop_pay active">
  168.                     <img src="">
  169.                     <span>微信支付</span>
  170.                 </div>
  171.                 <div class="shop_pay">
  172.                     <img src="">
  173.                     <span>支付宝支付</span>
  174.                 </div>
  175.             </div>
  176.         </div>
  177.         <!-- 订单提交块 -->
  178.         <div class="gopay">
  179.             <span>总计<i>0.00</i>软妹币</span>
  180.             <div>提交订单</div>
  181.         </div>
  182.     </div>
  183. </body>
  184. </html>

CSS

  1. @import url('../full_template/components/public/public_reset.css');
  2. .cart-pay{
  3.     width: 1200px;
  4.     padding: 15px;
  5.     margin: auto;
  6.     box-sizing: border-box;
  7.     background: white;
  8.     display: flex;
  9.     flex-direction: column;
  10. }
  11. .cart-pay>.people_addess>h3,.checkpay>h3{
  12.     font-size: 20px;
  13.     font-weight: normal;
  14.     display: block;
  15.     height: 25px;
  16.     line-height: 25px;
  17.     margin-bottom: 15px;
  18. }
  19. /*收货地址开始*/
  20. .cart-pay>.people_addess>div{
  21.     display: flex;
  22.     justify-content: space-around;
  23. }
  24. .cart-pay>.people_addess>div>.address-card{
  25.     width: 237px;
  26.     height: 106px;
  27.     padding:15px;
  28.     box-sizing: border-box;
  29.     background:url('images/T1VPiBXvpeXXbjLKQ7-237-106.png') no-repeat 0 0;
  30.     background-size: cover;
  31. }
  32. .cart-pay>.people_addess>div>.address-card:hover,.cart-pay>.people_addess>div>.address-card.active{
  33.     background:url('images/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png') no-repeat 0 0;
  34.     background-size: cover;
  35. }
  36. .cart-pay>.people_addess>div>.address-card.active{
  37.     background:url('images/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png') no-repeat 0 0;
  38.     background-size: cover;
  39. }
  40. .cart-pay>.people_addess>div>.address-card>p{
  41.     border-bottom: 2px solid #888888;
  42.     font-size: 16px;
  43.     margin-bottom: 4px;
  44. }
  45. /*收货地址结束*/
  46. /*商品列表开始*/
  47. .cart{
  48.     padding: 15px;
  49.     margin: auto;
  50.     box-sizing: border-box;
  51.     display: flex;
  52.     flex-direction: column;
  53.     background: white;    
  54. }
  55. .cart>.cart-top{
  56.     height: 45px;
  57.     display: flex;
  58.     justify-content: space-between;
  59. }
  60. .cart a:hover{
  61.     color: rgb(255, 68, 0);
  62. }
  63. .cart>.cart-top>.top-tit span{
  64.     display: inline-block;
  65.     width: 100px;
  66.     height: 40px;
  67.     font-size: 20px;
  68.     font-weight: bolder;
  69. }
  70. .cart>.cart-top>.top-tit span.active{
  71.     color: rgb(255, 68, 0);
  72.     border-bottom: 2px solid rgb(255, 68, 0);
  73. }
  74. .cart>.cart-top>.top-js>:nth-child(2){
  75.     font-weight: bolder;
  76.     color: rgb(255, 68, 0);
  77. }
  78. .cart>.cart-top>.top-js>:nth-child(3){
  79.     display: inline-block;
  80.     padding: 2px 5px;
  81.     background: rgb(170, 170, 170);
  82.     color: white;
  83.     border-radius:2px;
  84. }
  85. .cart>.cart-head{
  86.     display: grid;
  87.     grid-template-columns: 150px auto 150px 150px 150px 150px;
  89. }
  90. .cart>.cart-main{
  91.     margin: 20px 0;
  92.     display: flex;
  93.     flex-direction: column;
  94. }
  95. .cart>.cart-main>.cart-goods{
  96.     display: flex;
  97.     flex-direction: column;
  98.     margin-bottom: 20px;
  99. }
  100. .cart>.cart-main>.cart-goods>.store{
  101.     height: 30px;
  102.     line-height: 30px;
  103.     display: flex;
  104.     align-items: center;
  105. }
  106. .cart>.cart-main>.cart-goods>.store>:nth-child(2){
  107.     margin: 0 10px;
  108. }
  109. .cart>.cart-main>.cart-goods > .cart-goods-shop{
  110.     border:1px solid #888888;
  111.     padding: 15px;
  112.     box-sizing: border-box;
  113.     display: grid;
  114.     grid-template-columns: 20px 80px 300px 150px 150px 150px 150px 120px; 
  115.     background: rgb(252, 252, 252);
  116. }
  117. .cart>.cart-main>.cart-goods>.cart-goods-shop>:nth-child(1){
  118.     align-self: start;
  119. }
  120. .cart>.cart-main>.cart-goods>.cart-goods-shop>.cart-info{
  121.     margin-left: 10px;
  122.     display:flex;
  123.     flex-flow: column nowrap;
  124.     justify-content: space-between;
  125. }
  126. .cart>.cart-main>.cart-goods>.cart-goods-shop>.cart-info>i{
  127.     width: 40px;
  128.     padding: 1px;
  129.     background: red;
  130.     color: white;
  131.     border-radius: 3px;
  132. }
  133. .cart>.cart-main>.cart-goods>.cart-goods-shop>.num{
  134.     display: flex;
  135. }
  136. .cart>.cart-main>.cart-goods>.cart-goods-shop>.num>input{
  137.     width: 50px;
  138.     height: 20px;
  139.     text-align: center;
  140.     font-size: 13px;
  141. }
  142. .cart>.cart-main>.cart-goods>.cart-goods-shop>.num>div{
  143.     width: 20px;
  144.     height: 20px;
  145.     line-height: 20px;
  146.     border:1px solid #e5e5e5;
  147.     background:#f0f0f0;
  148.     text-align: center;
  149.     color: #444;
  150. }
  151. .cart>.cart-main>.cart-goods>.cart-goods-shop>.num>div:hover{
  152.     cursor: pointer;
  153.     border-color: rgb(255, 68, 44);
  154. }
  155. .cart>.cart-main>.cart-goods>.cart-goods-shop>.price>:nth-child(2){
  156.     color:#3c3c3c;
  157.     font-weight: 700;
  158.     font-size: 16px;
  159. }
  160. .cart>.cart-main>.cart-goods>.cart-goods-shop>.main-price{
  161.     color: rgb(255, 68, 44);
  162.     font-weight: 700;
  163.     font-size: 16px;
  164. }
  165. /*商品列表结束*/
  166. .cart-pay>.checkpay>div{
  167.     display: flex;
  168.     flex-direction: row wrap;
  169. }
  170. .cart-pay>.checkpay>div>.shop_pay{
  171.     padding: 15px;
  172.     border:2px solid #888888;
  173.     margin: 0 10px;
  174. }
  175. .cart-pay>.checkpay>div>.shop_pay.active{
  176.     border: 2px solid red;
  177. }
  178. .cart-pay>.gopay{
  179.     display: flex;
  180.     justify-content: flex-end;
  181.     align-items: center;
  182. }
  183. .cart-pay>.gopay>span{
  184.     font-size: 24px;
  185.     margin-right: 10px;
  186. }
  187. .cart-pay>.gopay>span>i{
  188.     color:rgb(255, 68, 44);
  189.     font-style: normal;
  190. }
  191. .cart-pay>.gopay>div{
  192.     border: none;
  193.     background: red;
  194.     color: white;
  195.     width: 90px;
  196.     height: 35px;
  197.     line-height: 35px;
  198.     border-radius: 6px;
  199.     font-size: 20px;
  200.     text-align: center;
  201.     padding: 15px;
  202. }

一个购物车无论什么方法都能给他写下来。但是作为一个全栈，或者说是一个合格的前端，那就必须得考虑你这个写法适合不适合数据渲染。万一你去工作了，被你的后端小伙伴砍了怎么办！？

这边的标题偷懒一点直接上了grid，下方数据使用flex,div嵌套的格式。也能方便后台数据渲染。就是大div和小div的事情。其实这个地方标签使用方面也可以用ul和li但是我们用的是flex布局其实也就无所谓了。对于布局方式我个人认为grid布局适合大方面布局将各个组件组合起来，不适合用来细节布局。我个人喜欢用flex布局因为flex布局调整细节确实很方便。这个购物车如果用全局grid布局那估计要出事情，因为你如果想将整个购物车拆分为行列，emm你去写写就能知道有多少反人类并且不利于数据渲染，技术的进步绝对不是为了反人类，而是为了在一定程度上解放双手。

上一条：php在foreach循环后留下数组的引用问题下一条：2019.12.27第七节课
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多