search

博客列表 >仿写京东购物车（12.31作业）+PHP培训十期线上班

仿写京东购物车（12.31作业）+PHP培训十期线上班

弃
弃原创
2020年01月02日 14:49:07808浏览

仿写目标

理清思路

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代码有大量的修改。
上一条：如何提高编程技术下一条：结算页仿写--PHP培训第十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多