search

博客列表 >2020-01-01 购物车界面 PHP培训十期

2020-01-01 购物车界面 PHP培训十期

ys899
ys899原创
2020年01月06日 10:06:54624浏览

页面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细节控制需要耐心去微调，才能达到很好的显示效果。

上一条：2020-01-03 PHP基础知识学习 PHP培训十期下一条：2019-12-30 CSS中Grid布局的属性实操 PHP培训十期
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多