Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 购物车仿写--PHP培训十期线上班
Blogger Information
Blog 11
fans 0
comment 0
visits 8066
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
购物车仿写--PHP培训十期线上班
宋明杰
Original
609 people have browsed it

购物车仿写：

经过1个月左右的学习，不断的试错，总结，不停搜索脑海和百度里的各种属性代码，终于写出了 稍微 像样的购物车页面。

HTML代码：

  1. <body>
  2.     <div class="gwc">
  3.         <div class="gwc1">
  4.             <a href="#"><img src="../img/logo.png"></a>
  5.             <a href="#">购物车</a>
  6.             <div class="sousuo">
  7.                 <input type="search" name="search" id="search">
  8.                 <label for="search">搜索</label>
  9.             </div>
  10.         </div>
  11.         <div class="gwc2">
  12.             <span class="gwc21">全部商品9</span>
  13.             <div>
  14.                 <span class="gwc22">配送至:</span>
  15.                 <input type="search" value="四川省成都市高新区">
  16.             </div>
  18.         </div>
  19.         <div class="gwc3">
  20.             <input type="checkbox" name="checkbox" value=''>
  21.             <span>全选</span>
  22.             <span>商品</span>
  23.             <span>单价</span>
  24.             <span>数量</span>
  25.             <span>小计</span>
  26.             <span>操作</span>
  27.         </div>
  28.         <div class="gwc4">
  29.             <input type="checkbox">
  30.             <a><img src="../img/2.jpg" class="img1"></a>
  31.             <a class="a1"><img src="../img/3.jpg" class="img2">洋河蓝色经典 梦之蓝M3 52度 礼盒装 500ml*2瓶白酒 口感绵柔浓香</a>
  32.             <span>52度 M3礼盒装</span>
  33.             <a class="a1">￥1099.00</a>
  34.             <a><img src="../img/5.jpg" class="img2"></a>
  35.             <span class="span1">￥1099.00</span>
  36.             <a class="a1">删除</a>
  37.         </div>
  38.         <div class="gwc4">
  39.             <input type="checkbox">
  40.             <a><img src="../img/2.jpg" class="img1"></a>
  41.             <a class="a1"><img src="../img/3.jpg" class="img2">洋河蓝色经典 梦之蓝M3 52度 礼盒装 500ml*2瓶白酒 口感绵柔浓香</a>
  42.             <span>52度 M3礼盒装</span>
  43.             <a class="a1">￥1099.00</a>
  44.             <a><img src="../img/5.jpg" class="img2"></a>
  45.             <span class="span1">￥1099.00</span>
  46.             <a class="a1">删除</a>
  47.         </div>
  48.         <div class="gwc4">
  49.             <input type="checkbox">
  50.             <a><img src="../img/2.jpg" class="img1"></a>
  51.             <a class="a1"><img src="../img/3.jpg" class="img2">洋河蓝色经典 梦之蓝M3 52度 礼盒装 500ml*2瓶白酒 口感绵柔浓香</a>
  52.             <span>52度 M3礼盒装</span>
  53.             <a class="a1">￥1099.00</a>
  54.             <a><img src="../img/5.jpg" class="img2"></a>
  55.             <span class="span1">￥1099.00</span>
  56.             <a class="a1">删除</a>
  57.         </div>
  58.         <div class="gwc5">
  59.             <input type="checkbox" name="checkbox" value=''>
  60.             <span>全选</span>
  61.             <a href="#">删除选中商品</a>
  62.             <a href="#">移到关注</a>
  63.             <a href="#" class="a1">清理购物车</a>
  64.             <a href="#">已选择<b class="b1">0</b>件商品</a>
  65.             <span>总价<b class="b2">￥0.00</b></span>
  66.             <input type="submit"  value='去结算' class="i1">
  67.         </div>
  69.     </div>
  71. </body>
  72. </html

CSS代码：

  1. @import "../zujian_reset.css";
  2. *{
  3.     /*border: 1px solid blue;*/
  4. }
  5. .gwc{
  6.     width: 1000px;
  7.     margin: auto;
  9. }
  10. .gwc>.gwc1{
  11.     display: flex;
  12.     height: 60px;
  13.     margin-top: 15px;
  15. }
  16. .gwc>.gwc1 a:nth-of-type(2) {
  17.     font-size: 18px;
  18.     color: #666666;
  19.     height: 30px;
  20.     align-self: end;
  21. }
  22. .gwc>.gwc1>.sousuo{
  23.     display: flex;
  24.     margin-left: auto;
  25.     align-self: end;
  27. }
  28. .gwc>.gwc1>.sousuo input{
  29.     width: 300px;
  30.     height: 30px;
  31.     /*border-color: red;*/
  32.     /*border-width: 2px;*/
  33.     border: 2px solid red;
  34.     outline: none;
  35. }
  36. .gwc>.gwc1>.sousuo label{
  37.     /*font-size: 23px;*/
  38.     /*height: 500px;*/
  39.     color: #e9e9e9;
  40.     background: red;
  41.     width: 50px;
  42.     height: 30px;
  43.     font-size: 13px;
  44.     text-align: center;
  45.     line-height: 30px;
  47. }
  48. .gwc>.gwc2{
  49.     height: 30px;
  50.     display: flex;
  51.     justify-content: space-between;
  52.     margin-top: 30px;
  53.     /*margin-bottom: 10px;*/
  54.     /*padding-bottom: 8px;*/
  55. }
  56. .gwc>.gwc2>.gwc21{
  57.     color: red;
  58.     font-weight: bold;
  59.     border-bottom: 1px solid red;
  60. }
  61. .gwc>.gwc2>div>.gwc22{
  62.     color: #333333;
  63.     font-size: 12px;
  64. }
  65. .gwc>.gwc2>div>input{
  66.     width: 160px;
  67.     height: 22px;
  68.     color: #969896;
  69. }
  70. .gwc>.gwc3{
  71.     display: grid;
  72.     background: #cccccc;
  73.     height: 45px;
  74.     grid-template: '1 2 3 4 5 6 7' 1fr
  75.                    /3% 10% 47% 9% 13% 9% 9%;
  76.     place-items: center start;
  77. }
  78. .gwc>.gwc3 span{
  79.     color: #333333;
  80.     font-size: 12px;
  81.     margin-left: 15px;
  82. }
  83. .gwc>.gwc3 input{
  84.     place-self: center;
  85. }
  86. .gwc>.gwc4{
  87.     display: grid;
  88.     background: #ffffff;
  89.     border-top: 1px solid #999999;
  90.     height: 130px;
  91.     grid-template: '1 2 3 4 5 6 7 8' 1fr
  92.                    /3% 12% 33% 12% 9% 13% 9% 9%;
  93.     place-items: start;
  94.     padding-top: 15px;
  95. }
  96. .gwc>.gwc4 .img1{
  97.     width: 100px;
  98.     height: 100px;
  99.     border: 1px solid #999999;
  100.     margin-left: 10px;
  101. }
  102. .gwc>.gwc4 input{
  103.     place-self: start center;
  104. }
  105. .gwc>.gwc4 .img2{
  106.     width: 60px;
  107.     height: 17px;
  109. }
  110. .gwc>.gwc4>.a1{
  111.     color: #333333;
  112.     font-size: 12px;
  113.     margin-left: 10px;
  114. }
  115. .gwc>.gwc4 span{
  116.     color: #333333;
  117.     font-size: 12px;
  118.     margin-left: 10px;
  119.     /*: 1em;*/
  120. }
  121. .gwc>.gwc4>.span1{
  122.     font-weight: bold;
  123.     font-size:15px;
  124. }
  125. .gwc>.gwc5{
  126.     display: grid;
  127.     background: #cccccc;
  128.     margin-top: 15px;
  129.     height: 55px;
  130.     grid-template: '1 2 3 4 5 7 8 9' 1fr
  131.                    /3% 3% 8% 5%  auto 10% 8% 10%;
  132.     place-items: center start;
  133. }
  134. .gwc>.gwc5 input{
  135.     place-self: center;
  136. }
  137. .gwc>.gwc5 a{
  138.     font-size: 11px;
  139.     color: #666;
  140. }
  141. .gwc>.gwc5 span{
  142.     font-size: 11px;
  143.     color: #666;
  144. }
  145. .gwc>.gwc5 .a1{
  146.      font-size: 12px;
  147.      color: #444;
  148.     font-weight: bold;
  149.  }
  150. .gwc>.gwc5 .b1{
  151.     color: red;
  152.     font-size: 13px;
  153. }
  154. .gwc>.gwc5 .b2{
  155.     color: red;
  156.     font-size: 18px;
  157.     font-weight: bolder;
  158. }
  159. .gwc>.gwc5 .i1{
  160.     height: 55px;
  161.     width: 90px;
  162.     place-self: end;
  163.     background: red;
  164.     color: #ffffff;
  165.     font-size: 16px;
  166.     border: none;
  167. }

运行结果截图：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：购物车, 简单以假乱真了, 非常棒
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