Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1230利用gird与flex混用制作天猫购物车界面
Blogger Information
Blog 30
fans 0
comment 1
visits 22043
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1230利用gird与flex混用制作天猫购物车界面
Admin
Original
595 people have browsed it

购物车

购物车效果图


看上去效果还行吧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你去写写就能知道有多少反人类并且不利于数据渲染，技术的进步绝对不是为了反人类，而是为了在一定程度上解放双手。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实用什么技术不必太纠结, 如果你不会flex,就得用float+positon, 如果不会grid, 只会flex, 可能你也只会用flex+position, 所以, 有时会得太多, 也会很烦脑... 有时会的技术太多, 是多么的痛苦...
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post