Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿写京东购物车（12.31作业）+PHP培训十期线上班
Blogger Information
Blog 9
fans 0
comment 0
visits 6195
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
仿写京东购物车（12.31作业）+PHP培训十期线上班
弃
Original
809 people have browsed it

仿写目标

理清思路

1.首先购物车类似于一个表格，有表头 有内容，首先想到的是吧表头单独分出来，利用grid布局进行27等分的划分，利用col-1的方法将空间进行大致分配。
2. 内容部分，观察商品还有分类，这里采用了自定义列表dl ，内容划分也是采用grid，细节部分采用flex布局

最终仿写页面（附上一个链接）

html展示

  1. <!--
  2.  * @Descripttion: 
  3.  * @version: 
  4.  * @Author: pengpeng
  5.  * @Date: 2020-01-01 23:42:00
  6.  * @LastEditors  : pengpeng
  7.  * @LastEditTime : 2020-01-02 14:09:25
  8.  -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  15.     <link rel="stylesheet" href="../static/font/iconfont.css">
  16.     <link rel="stylesheet" href="./shop_car.css">
  17.     <title>Document</title>
  18. </head>
  19. <body>
  20.     <div class="shop-car">
  21.         <div class="content">
  22.             <div class="shop-car-header">
  23.                 <span>
  25.                     全部商品
  26.                     <i>3</i>
  27.                 </span>
  28.                 <div>
  29.                     <span>配送至:</span>
  30.                     <select name="" id="">
  31.                         <option value="">1</option>
  32.                         <option value="">1</option>
  33.                         <option value="">1</option>
  34.                     </select>
  35.                 </div>
  36.             </div>
  38.             <div class="shop-car-table-header">
  39.                 <span class="table-header-check col-1">
  40.                     <input type="checkbox" name="all_cheack">
  41.                 </span>
  42.                 <span class="table-header col-3">全选</span>
  43.                 <span class="table-header col-11">商品</span>
  44.                 <span class="table-header col-3">单价</span>
  45.                 <span class="table-header col-4">数量</span>
  46.                 <span class="table-header col-2">小计</span>
  47.                 <span class="table-header col-3">操作</span>
  48.             </div>
  50.             <div class="shop-car-list">
  51.                 <dl>
  52.                     <dt>
  53.                         <span>
  54.                             <input type="checkbox" name="check_type_1">
  55.                             <em>京东自营</em>
  56.                         </span>
  57.                         <span>优惠券</span>
  58.                         <span>优惠券</span>
  59.                     </dt>
  60.                     <dd>
  61.                         <div class="shop-car-list-details">
  62.                             <span class="list-details-checkbox col-1">
  63.                                 <input type="checkbox" name="check_type_1">
  64.                             </span>
  66.                             <div class="list-details-img col-3">
  67.                                 <img src="https://img10.360buyimg.com/cms/s80x80_jfs/t19978/15/1445140537/20653/9c4a33e9/5b1e6615Ne1765c03.jpg" alt="">
  68.                             </div>
  70.                             <div class="list-details-persent col-10">
  71.                                 <div class="list-details-persent-left">
  72.                                     <a href="">
  73.                                         <span>酱油好多酱油酱油好多酱油/酱油好多酱油</span>
  74.                                     </a>
  75.                                     <div>
  76.                                         <span>
  77.                                             <em class="iconfont icon-aixin"></em> 
  78.                                             礼品包装
  79.                                         </span>
  80.                                         <span>
  81.                                             <em class="iconfont icon-aixin"></em> 
  82.                                             礼品包装
  83.                                         </span>
  84.                                         <span>
  85.                                             <em class="iconfont icon-aixin"></em> 
  86.                                             礼品包装
  87.                                         </span>
  88.                                         <span>
  89.                                             <em class="iconfont icon-aixin"></em> 
  90.                                             礼品包装
  91.                                         </span>
  92.                                     </div>
  93.                                 </div>
  94.                                 <div class="list-details-persent-right">
  95.                                     <span>珊瑚色</span>
  96.                                     <span>珊瑚色</span>
  97.                                     <span>珊瑚色</span>
  98.                                 </div>
  99.                             </div>
  100.                             <div class="list-details-price col-3">
  101.                                 &yen;223.00
  102.                             </div>
  103.                             <div class="list-details-num col-4">
  104.                                 <input type="text" class="itxt" value="1" minnum='1' autocomplete="off">
  105.                             </div>
  106.                             <div class="list-details-subtotal col-3">
  107.                                 &yen; 2223.00
  108.                             </div>
  110.                             <div class="list-details-handle col-3">
  111.                                 <span>删除</span>
  112.                                 <span>移到我的关注</span>
  113.                             </div>
  114.                         </div>
  115.                     </dd>
  116.                     <dd>
  117.                         <div class="shop-car-list-details">
  118.                             <span class="list-details-checkbox col-1">
  119.                                 <input type="checkbox" name="check_type_1">
  120.                             </span>
  122.                             <div class="list-details-img col-3">
  123.                                 <img src="https://img10.360buyimg.com/cms/s80x80_jfs/t19978/15/1445140537/20653/9c4a33e9/5b1e6615Ne1765c03.jpg" alt="">
  124.                             </div>
  126.                             <div class="list-details-persent col-10">
  127.                                 <div class="list-details-persent-left">
  128.                                     <a href="">
  129.                                         <span>酱油好多酱油酱油好多酱油/酱油好多酱油</span>
  130.                                     </a>
  131.                                     <div>
  132.                                         <span>
  133.                                             <em class="iconfont icon-aixin"></em> 
  134.                                             礼品包装
  135.                                         </span>
  136.                                         <span>
  137.                                             <em class="iconfont icon-aixin"></em> 
  138.                                             礼品包装
  139.                                         </span>
  140.                                         <span>
  141.                                             <em class="iconfont icon-aixin"></em> 
  142.                                             礼品包装
  143.                                         </span>
  144.                                         <span>
  145.                                             <em class="iconfont icon-aixin"></em> 
  146.                                             礼品包装
  147.                                         </span>
  148.                                     </div>
  149.                                 </div>
  150.                                 <div class="list-details-persent-right">
  151.                                     <span>珊瑚色</span>
  152.                                     <span>珊瑚色</span>
  153.                                     <span>珊瑚色</span>
  154.                                 </div>
  155.                             </div>
  156.                             <div class="list-details-price col-3">
  157.                                 &yen;223.00
  158.                             </div>
  159.                             <div class="list-details-num col-4">
  160.                                 <input type="text" class="itxt" value="1" minnum='1' autocomplete="off">
  161.                             </div>
  162.                             <div class="list-details-subtotal col-3">
  163.                                 &yen; 2223.00
  164.                             </div>
  166.                             <div class="list-details-handle col-3">
  167.                                 <span>删除</span>
  168.                                 <span>移到我的关注</span>
  169.                             </div>
  170.                         </div>
  171.                     </dd>
  172.                     <dd>
  173.                         <div class="shop-car-list-details">
  174.                             <span class="list-details-checkbox col-1">
  175.                                 <input type="checkbox" name="check_type_1">
  176.                             </span>
  178.                             <div class="list-details-img col-3">
  179.                                 <img src="https://img10.360buyimg.com/cms/s80x80_jfs/t19978/15/1445140537/20653/9c4a33e9/5b1e6615Ne1765c03.jpg" alt="">
  180.                             </div>
  182.                             <div class="list-details-persent col-10">
  183.                                 <div class="list-details-persent-left">
  184.                                     <a href="">
  185.                                         <span>酱油好多酱油酱油好多酱油/酱油好多酱油</span>
  186.                                     </a>
  187.                                     <div>
  188.                                         <span>
  189.                                             <em class="iconfont icon-aixin"></em> 
  190.                                             礼品包装
  191.                                         </span>
  192.                                         <span>
  193.                                             <em class="iconfont icon-aixin"></em> 
  194.                                             礼品包装
  195.                                         </span>
  196.                                         <span>
  197.                                             <em class="iconfont icon-aixin"></em> 
  198.                                             礼品包装
  199.                                         </span>
  200.                                         <span>
  201.                                             <em class="iconfont icon-aixin"></em> 
  202.                                             礼品包装
  203.                                         </span>
  204.                                     </div>
  205.                                 </div>
  206.                                 <div class="list-details-persent-right">
  207.                                     <span>珊瑚色</span>
  208.                                     <span>珊瑚色</span>
  209.                                     <span>珊瑚色</span>
  210.                                 </div>
  211.                             </div>
  212.                             <div class="list-details-price col-3">
  213.                                 &yen;223.00
  214.                             </div>
  215.                             <div class="list-details-num col-4">
  216.                                 <input type="text" class="itxt" value="1" minnum='1' autocomplete="off">
  217.                             </div>
  218.                             <div class="list-details-subtotal col-3">
  219.                                 &yen; 2223.00
  220.                             </div>
  222.                             <div class="list-details-handle col-3">
  223.                                 <span>删除</span>
  224.                                 <span>移到我的关注</span>
  225.                             </div>
  226.                         </div>
  227.                     </dd>
  229.                     <dt>
  230.                         <span>
  231.                             <input type="checkbox" name="check_type_1">
  232.                             <em>天猫自营</em>
  233.                         </span>
  234.                         <span>优惠券</span>
  235.                         <span>优惠券</span>
  236.                     </dt>
  237.                     <dd>
  238.                         <div class="shop-car-list-details">
  239.                             <span class="list-details-checkbox col-1">
  240.                                 <input type="checkbox" name="check_type_1">
  241.                             </span>
  243.                             <div class="list-details-img col-3">
  244.                                 <img src="https://img10.360buyimg.com/cms/s80x80_jfs/t19978/15/1445140537/20653/9c4a33e9/5b1e6615Ne1765c03.jpg" alt="">
  245.                             </div>
  247.                             <div class="list-details-persent col-10">
  248.                                 <div class="list-details-persent-left">
  249.                                     <a href="">
  250.                                         <span>酱油好多酱油酱油好多酱油/酱油好多酱油</span>
  251.                                     </a>
  252.                                     <div>
  253.                                         <span>
  254.                                             <em class="iconfont icon-aixin"></em> 
  255.                                             礼品包装
  256.                                         </span>
  257.                                         <span>
  258.                                             <em class="iconfont icon-aixin"></em> 
  259.                                             礼品包装
  260.                                         </span>
  261.                                         <span>
  262.                                             <em class="iconfont icon-aixin"></em> 
  263.                                             礼品包装
  264.                                         </span>
  265.                                         <span>
  266.                                             <em class="iconfont icon-aixin"></em> 
  267.                                             礼品包装
  268.                                         </span>
  269.                                     </div>
  270.                                 </div>
  271.                                 <div class="list-details-persent-right">
  272.                                     <span>珊瑚色</span>
  273.                                     <span>珊瑚色</span>
  274.                                     <span>珊瑚色</span>
  275.                                 </div>
  276.                             </div>
  277.                             <div class="list-details-price col-3">
  278.                                 &yen;223.00
  279.                             </div>
  280.                             <div class="list-details-num col-4">
  281.                                 <input type="text" class="itxt" value="1" minnum='1' autocomplete="off">
  282.                             </div>
  283.                             <div class="list-details-subtotal col-3">
  284.                                 &yen; 2223.00
  285.                             </div>
  287.                             <div class="list-details-handle col-3">
  288.                                 <span>删除</span>
  289.                                 <span>移到我的关注</span>
  290.                             </div>
  291.                         </div>
  292.                     </dd>
  293.                 </dl>
  295.             </div>
  297.             <div class="shop-car-summary">
  298.                 <div class="shop-car-summary-left">
  299.                     <input type="checkbox" name="all_checkbox">
  300.                     <label for=""> 全选</label>
  301.                     <a href="javascript:;">删除选中商品</a>
  302.                     <a href="javascript:;">移到关注</a>
  303.                     <a href="javascript:;">清理购物车</a>
  304.                 </div>
  306.                 <div class="shop-car-summary-right">
  307.                     <span>以选择 <i>3</i> 件商品</span>
  308.                     <div>
  309.                         <span>
  310.                             总价：
  311.                             <em>&yen;5451.00</em>
  312.                         </span>
  313.                         <span>
  314.                             促销：-&yen;0.00
  315.                         </span>
  316.                     </div>
  317.                     <button>
  318.                         去结算
  319.                     </button>
  320.                 </div>
  322.             </div>
  323.         </div>
  324.     </div>
  325. </body>
  326. </html>

css展示

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     /* outline: 1px dashed red; */
  5.     font-size: 12px;
  6.     color: #666666;
  7. }
  8. a{
  9.     text-decoration: none;
  10. }
  11. dl,dt,dd{
  12.     list-style: none;
  13. }
  14. em, i, u {
  15.     font-style: normal;
  16. }
  17. input[type='checkbox']{
  18.     display: block;
  19. }
  20. .shop-car{
  21.     background-color: #fff;
  22.     padding: 30px;
  23.     box-sizing: border-box;
  24. }
  25. .shop-car > .content{
  26.     width: 990px;
  27.     margin: auto;
  28.     display: flex;
  29.     flex-flow: column nowrap;
  30.     padding: 10px;
  31.     box-sizing: border-box;
  32. }
  33. /* shop-car-header */
  34. .shop-car > .content > .shop-car-header{
  35.     height: 37px;
  36.     margin-top: 10px;
  37.     display: flex;
  38.     justify-content: space-between;
  39.     align-items: center;
  40.     background-color: #fff;
  41.     margin-bottom: 1px;
  42. }
  43. .shop-car > .content > .shop-car-header > span{
  44.     font-size: 16px;
  45.     color: red;
  46.     height: 37px;
  47.     line-height: 37px;
  48.     border-bottom: 2px solid red;
  49. }
  50. .shop-car > .content > .shop-car-header > span > i{
  51.     font-size: 14px;
  52. }
  53. .shop-car > .content > .shop-car-header > div{
  54.     display: flex;
  55.     padding-right: 20px;
  56.     box-sizing: border-box;
  57.     align-content: center;
  58.     height: 37px;
  59.     align-items: center;
  60. }
  61. .shop-car > .content > .shop-car-header > div > span{
  62.     margin-right: 10px;
  63. }
  64. .shop-car > .content > .shop-car-header > div > select{
  65.     height: 23px;
  66. }
  67. /* 公用grid 网格分配 */
  68. .col-1{
  69.     grid-column-end: span 1;
  70. }
  71. .col-2{
  72.     grid-column-end: span 2;
  73. }
  74. .col-3{
  75.     grid-column-end: span 3;
  76. }
  77. .col-4{
  78.     grid-column-end: span 4;
  79. }
  80. .col-5{
  81.     grid-column-end: span 5;
  82. }
  83. .col-6{
  84.     grid-column-end: span 6;
  85. }
  86. .col-7{
  87.     grid-column-end: span 7;
  88. }
  89. .col-8{
  90.     grid-column-end: span 8;
  91. }
  92. .col-9{
  93.     grid-column-end: span 9;
  94. }
  95. .col-10{
  96.     grid-column-end: span 10;
  97. }
  98. .col-11{
  99.     grid-column-end: span 11;
  100. }
  102. /* shop-car-table-header */
  103. .shop-car > .content > .shop-car-table-header{
  104.     display: grid;
  105.     grid-template-columns: repeat(27,1fr);
  106.     background-color: #F3F3F3;
  107.     height: 43px;
  108.     align-items: center;
  109.     border-left: 2px solid red;
  110.     border-right: 2px solid red;
  111.     box-sizing: border-box;
  112. }
  113. .shop-car > .content > .shop-car-table-header > .table-header-check{
  114.     justify-self: center;
  115. }
  116. .shop-car > .content > .shop-car-list{
  117.     margin-bottom: 30px;
  118. }
  120. .shop-car > .content > .shop-car-list > dl{
  121.     display: flex;
  122.     flex-flow: column nowrap;
  123.     border-left: 2px solid red;
  124.     border-right: 2px solid red;
  126. }
  127. .shop-car > .content > .shop-car-list > dl > dt{
  128.     display: flex;
  129.     height: 30px;
  130.     justify-content: space-between;
  131.     padding: 12px 9px 2px 9px;
  132.     border-bottom: 2px solid gray;
  133.     /* box-sizing: border-box; */
  134.     align-content: center;
  136. }
  137. .shop-car > .content > .shop-car-list > dl > dt > span:nth-child(n+2){
  138.     line-height: 24px;
  139. }
  140. .shop-car > .content > .shop-car-list > dl > dt > span:first-of-type{
  141.     display: flex;
  142.     justify-content: space-between;
  143.     align-items: center;
  144. }
  145. .shop-car > .content > .shop-car-list > dl > dt > span:first-of-type > em{
  146.     background-color: #DA0012;
  147.     color: #fff;
  148.     margin-left: 6px;
  149. }
  150. .shop-car > .content > .shop-car-list > dl > dd{
  152.     border-bottom: 1px solid rgb(206, 202, 202);
  154. }
  155. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details{
  156.     height: 107px;
  157.     display: grid;
  158.     grid-template-columns: repeat(27,1fr);
  159.     background-color: #fff4e8;
  160.     /* justify-items: center; */
  161.     /* align-items: center; */
  162.     /* justify-content: ; */
  163.     padding: 15px 0;
  164.     box-sizing: border-box;
  165. }
  166. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-checkbox{
  167.     padding-top: 4px;
  168.     box-sizing: border-box;
  169.     justify-self: center;
  170. }
  171. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-img{
  172.     justify-self: center;
  173. }
  174. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent{
  175.     display: flex;
  176. }
  177. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > div{
  178.     flex: 1;
  179. }
  180. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > .list-details-persent-left{
  181.     display: flex;
  182.     margin-right: -20px;
  183.     flex-flow: column nowrap;
  184. }
  185. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > .list-details-persent-left > a{
  186.     margin-bottom: 10px;
  187. }
  188. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > .list-details-persent-left > a > span:first-of-type{
  189.     line-height: 20px;
  190.     color: #333333;
  191.     margin-bottom: 10px;
  192. }
  193. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > .list-details-persent-left > a > span:first-of-type:hover{
  194.     color: #DA0012;
  195. }
  196. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > .list-details-persent-left > div{
  197.     display: flex;
  198.     flex-flow: row wrap;
  199. }
  200. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > .list-details-persent-left > div >span{
  201.     color: #AAAAAA;
  202.     margin-right: 10px;
  203. }
  204. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > .list-details-persent-left > div > span > em{
  205.     width: 17px;
  206.     height: 16px;
  207.     color: #DA0012;
  208. }
  209. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > .list-details-persent-right{
  210.     /* margin-left: 10px; */
  211.     display: flex;
  212.     flex-flow:column nowrap;
  213.     align-items: center;
  214. }
  215. .shop-car > .content > .shop-car-list > dl > dd > .shop-car-list-details > .list-details-persent > .list-details-persent-right > span{
  216.     margin-bottom: 5px;
  217. }
  218. .list-details-price,.list-details-subtotal{
  219.     justify-self: center;
  220. }
  221. .list-details-subtotal{
  222.     color: #333;
  223.     font-weight: 700
  225. }
  226. .list-details-num{
  227.     margin-left: 25px;
  228. }
  229. .itxt {
  230.     border: 1px solid #cacbcb;
  231.     width: 42px;
  232.     height: 18px;
  233.     text-align: center;
  234.     padding: 1px;
  235.     margin: 0;
  236.     font-size: 12px;
  237.     color: #333;
  238. }
  239. .list-details-handle{
  240.     display: flex;
  241.     flex-flow: column nowrap;
  242. }
  243. .list-details-handle > span{
  244.     margin-bottom: 8px;
  245. }
  246. .list-details-handle > span:hover{
  247.     color: indianred;
  248. }
  250. /* shop-car-summary */
  251. .shop-car-summary{
  252.     width: 970px;
  253.     border: 1px solid gray;
  254.     display: flex;
  255.     justify-content: space-between;
  256.     /* padding: 10px 0; */
  257.     box-sizing: border-box;
  258. }
  259. .shop-car-summary > .shop-car-summary-left{
  260.     display: flex;
  261.     margin-left: 8px;
  262.     align-items: center
  263. }
  264. .shop-car-summary > .shop-car-summary-left > *{
  265.     margin-right: 8px;
  266. }
  267. .shop-car-summary > .shop-car-summary-left > a:hover{
  268.     color: rgba(241, 50, 50, 0.979);
  269. }
  270. .shop-car-summary > .shop-car-summary-left > a:last-of-type{
  271.     font-weight: 700;
  272. }
  274. .shop-car-summary > .shop-car-summary-right{
  275.     display: flex;
  277. }
  278. .shop-car-summary > .shop-car-summary-right > span{
  279.     margin: 9px;
  280. }
  281. .shop-car-summary > .shop-car-summary-right > span > i{
  282.     color: #E2231A;
  283.     font-weight: 700;
  284.     font-size: 12px;
  285.     margin: 0 3px;
  286. }
  287. .shop-car-summary > .shop-car-summary-right > button{
  288.     width: 94px;
  289.     height: 52px;
  290.     border: none;
  291.     background-color: rgba(241, 50, 50, 0.979);
  292.     color: ivory;
  293.     font-size: 18px;
  294.     font-weight: 700;
  295. }
  296. .shop-car-summary > .shop-car-summary-right > div{
  297.     display: flex;
  298.     flex-flow: column nowrap;
  299.     justify-content: space-evenly;
  300.     align-items: flex-end;
  301.     margin: 0 5px;
  303. }
  304. .shop-car-summary > .shop-car-summary-right > div > span:first-of-type > em{
  305.   font-size: 16px;
  306.   color: #DA0012;
  307.   font-weight: 700
  308. }

总结分析

总体布局下来，有收获，也有不足。 收获在于： 布局前可以很好的理清页面思路，知道什么地方应该用什么，一步一步从头到尾。 不足的地方： 页面中好多细节的地方没有照顾到，该有a标签的地方都没有加上，导致最后发现问题时css代码有大量的修改。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：将一些细节也考虑到了,例如角标, 相当不错的, 为你打call
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