Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2020-01-01 购物车界面 PHP培训十期
Blogger Information
Blog 12
fans 0
comment 0
visits 7913
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
2020-01-01 购物车界面 PHP培训十期
ys899
Original
626 people have browsed it

页面DOM结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="shop_shopping_cart.css">
  6.     <title>商城系统的购物车</title>
  7. </head>
  8. <body>
  9. <!--商城购物车-->
  10. <div class="shop-shopping-cart">
  11.     <h3>我的购物车</h3>
  12.     <!--购物车头部-->
  13.     <header>
  14.         <!--flex-->
  15.         <span>
  16.             <input type="checkbox" id="all-selected" checked>
  17.             <label for="all-selected">全选</label>
  18.         </span>
  19.         <span>商品</span>
  20.         <span>单价</span>
  21.         <span>数量</span>
  22.         <span>小计</span>
  23.         <span>操作</span>
  24.     </header>
  26.     <!--购物车主体-->
  27.     <main>
  28.         <div>
  29.             <span>
  30.                 <label><input type="checkbox" name="choose" checked></label>
  31.             </span>
  32.             <!--图文介绍-->
  33.             <span class="pic-intro">
  34.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  35.                 <a href="">商品简介...</a>
  36.             </span>
  38.             <span>500.00</span>
  39.             <span>
  40.                 <label><input type="number" name="count" value="1" min="1"></label>
  41.             </span>
  42.             <span><i>¥</i>500.00</span>
  43.             <span><a href="">删除</a></span>
  44.         </div>
  45.         <div>
  46.             <span>
  47.                 <label><input type="checkbox" name="choose" checked></label>
  48.             </span>
  49.             <!--图文介绍-->
  50.             <span class="pic-intro">
  51.                 <a href=""><img src="../../../static/images/shop/shop2.jpg" alt=""></a>
  52.                 <a href="">商品简介...</a>
  53.             </span>
  55.             <span>500.00</span>
  56.             <span>
  57.                 <label><input type="number" name="count" value="1" min="1"></label>
  58.             </span>
  59.             <span><i>¥</i>500.00</span>
  60.             <span><a href="">删除</a></span>
  61.         </div>
  62.         <div>
  63.             <span>
  64.                 <label><input type="checkbox" name="choose" checked></label>
  65.             </span>
  66.             <!--图文介绍-->
  67.             <span class="pic-intro">
  68.                 <a href=""><img src="../../../static/images/shop/shop3.jpg" alt=""></a>
  69.                 <a href="">商品简介...</a>
  70.             </span>
  72.             <span>500.00</span>
  73.             <span>
  74.                 <label><input type="number" name="count" value="1" min="1"></label>
  75.             </span>
  76.             <span><i>¥</i>500.00</span>
  77.             <span><a href="">删除</a></span>
  78.         </div>
  79.         <div>
  80.             <span>
  81.                 <label><input type="checkbox" name="choose" checked></label>
  82.             </span>
  83.             <!--图文介绍-->
  84.             <span class="pic-intro">
  85.                 <a href=""><img src="../../../static/images/shop/shop4.jpg" alt=""></a>
  86.                 <a href="">商品简介...</a>
  87.             </span>
  89.             <span>500.00</span>
  90.             <span>
  91.                 <label><input type="number" name="count" value="1" min="1"></label>
  92.             </span>
  93.             <span><i>¥</i>500.00</span>
  94.             <span><a href="">删除</a></span>
  95.         </div>
  96.     </main>
  98.     <!--购物车底部-->
  99.     <footer>
  100.         <span>数量: <i>4</i></span>
  101.         <span>金额: <i>2000</i></span>
  102.         <button>去结算</button>
  103.     </footer>
  104. </div>
  105. </body>
  106. </html>

全局CSS Code

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. /*参考线    */
  5. /*    outline: 1px dashed red;*/
  6. }
  8. body {
  9.     font-size: 13px;
  10.     color: #555555;
  11.     background-color: #efefef;
  12. }
  14. a {
  15.     color: #404040;
  17.     text-decoration: none;
  18.     font-size: 13px;
  19. }
  21. li {
  22.     list-style: none;
  23. }

购物车CSS

  1. @import url(../../public_reset.css);
  3. .shop-shopping-cart {
  4.     width: 1200px;
  5.     background-color: #fff;
  6.     margin: 30px auto;
  7.     padding: 15px 0;
  8.     `border-radius`: 8px;
  9.     `box-sizing`: border-box;
  10. }
  12. .shop-shopping-cart:hover {
  13.     `box-shadow`: 0 0 8px #888888;
  14. }
  16. /*标题*/
  17. .shop-shopping-cart > h3 {
  18.     font-size: 20px;
  19.     text-align: center;
  20.     font-weight: normal;
  21.     margin-bottom: 20px;
  22. }
  24. /*购物车头部*/
  25. .shop-shopping-cart > header {
  26.     height: 40px;
  27.     border-bottom: 1px solid #cccccc;
  29.     /*flex*/
  30.     `display`: flex;
  31.     `justify-content`: space-around;
  32.     `align-items`: center;
  33. }
  35. /*购物车主体*/
  36. .shop-shopping-cart > main {
  37.     margin: 20px 0;
  38. }
  40. /*购物车中的每一条记录, 每一个商品*/
  41. .shop-shopping-cart > main > div {
  42.     height: 80px;
  44.     /*flex*/
  45.     display: flex;
  46.     `justify-content`: space-around;
  47.     `align-items`: center;
  48. }
  49. .shop-shopping-cart > main > div:hover {
  50.     background-color: lightcyan;
  51. }
  53. .shop-shopping-cart > main > div .pic-intro {
  54.     width: 250px;
  55.     `display`: flex;
  56.     `align-items`: center;
  58. }
  60. .shop-shopping-cart > main > div .pic-intro img {
  61.     width: 60px;
  62.     height: 45px;
  63.     margin-right: 10px;
  64. }
  66. .shop-shopping-cart > main > div a:hover {
  67.     color: lightcoral;
  68. }
  70. /*微调第一个复选框*/
  71. .shop-shopping-cart > main > div > span:first-of-type {
  72.     position: relative;
  73.     left: 25px;
  74. }
  75. .shop-shopping-cart > main > div > span.pic-intro {
  76.     position: relative;
  77.     left: -40px;
  78. }
  79. .shop-shopping-cart > main > div > span:nth-of-type(3) {
  80.     position: relative;
  81.     left: -80px;
  82. }
  84. .shop-shopping-cart > main > div > span:nth-of-type(4) {
  85.     position: relative;
  86.     left: -60px;
  87. }
  88. .shop-shopping-cart > main > div > span:nth-of-type(4) input {
  89.     width: 60px;
  90. }
  91. .shop-shopping-cart > main > div > span:nth-last-of-type(2) {
  92.     position: relative;
  93.     left: -50px;
  94. }
  95. .shop-shopping-cart > main > div > span:last-of-type {
  96.     position: relative;
  97.     left: -50px;
  98. }
  99. .shop-shopping-cart > main > div > span:nth-last-of-type(2) i {
  100.     color: green;
  101.     font-size: 1.01rem;
  102.     margin-right: 3px;
  103. }
  105. /*购物车底部*/
  106. .shop-shopping-cart > footer {
  107.     height: 70px;
  109.     padding: 20px;
  110.     border-top: 1px solid #cccccc;
  111.     box-sizing: border-box;
  113.     display: flex;
  114.     justify-content: flex-end;
  115.     align-items: center;
  116. }
  118. .shop-shopping-cart > footer > *:not(:last-child) {
  119.     width: 180px;
  120. }
  122. .shop-shopping-cart > footer > button {
  123.     height: 40px;
  124.     width: 120px;
  125.     background-color: lightcoral;
  126.     border: none;
  127.     color: white;
  128.     font-size: 1.1rem;
  129. }
  130. .shop-shopping-cart > footer > button:hover {
  131.     background-color: seagreen;
  132.     cursor: pointer;
  133. }

效果图

心得体会

购物车商品在页面上单行多列显示，适合flex的默认排列布局，由于商品的属性比较多，css细节控制需要耐心去微调，才能达到很好的显示效果。

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