欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

购物车和订单页

程序员文章站 2023-12-21 18:38:52
...

1.购物车

1.2 图片展示

购物车和订单页

1.3 代码展示

    

  1. <!-- 购物车区块 -->
    2. 

  2. <section class="container py-2 d-flex jusify-content-between align-items-center">
    3. 

  3.     <div class="fontSize16">购物车</div>
    4. 

  4.     <div>
    5. 

  5.         <img src="./img/cartTop01.png" alt="">
    6. 

  6.     </div>
    7. 

  7.     <a href="" class="fontSize16">继续购物 ></a>
    8. 

  8. </section>
    9. 

  9. <!-- 购物车标题 -->
    10. 

  10. <section class="container bg-db text-center d-flex align-items-center py-2">
    11. 

  11.     <div class="w-40 fontSize14">商品</div>
    12. 

  12.     <div class="w-10 fontSize14">单价</div>
    13. 

  13.     <div class="w-30 fontSize14">数量</div>
    14. 

  14.     <div class="w-10 fontSize14">小计</div>
    15. 

  15.     <div class="w-10 fontSize14">操作</div>
    16. 

  16. </section>
    17. 

  17. <!-- 购物车内容 -->
    18. 

  18. <section class="container d-flex align-items-center">
    19. 

  19.     <div class="w-40 pl-4 d-flex align-items-center">
    20. 

  20.         <input type="checkbox" class="w-20px h-20px" name="" id="">
    21. 

  21.         <img src="./img/cart01.jpg" alt="">
    22. 

  22.         <div class="ml-4 pl-4">
    23. 

  23.             <p><a href="" class="fontSize14">细说PHP</a></p>
    24. 

  24.             <p class="mt-4 mb-1 text-777">图书分类</p>
    25. 

  25.             <p class="text-777">细说系列</p>
    26. 

  26.         </div>
    27. 

  27.     </div>
    28. 

  28.     <div class="w-10 text-center">￥20.00</div>
    29. 

  29.     <div class="w-30 d-flex jusify-content-center align-items-center">
    30. 

  30.         <div class="border px-2 mr-2 cursor fontSize18">-</div>
    31. 

  31.         <input type="text" class="border-0" size="1" value="1">
    32. 

  32.         <div class="border px-2 py-1 cursor fontSize12">+</div>
    33. 

  33.     </div>
    34. 

  34.     <div class="w-10 text-center">￥20.00</div>
    35. 

  35.     <div class="w-10 text-center">
    36. 

  36.         <a href="">删除</a>
    37. 

  37.     </div>
    38. 

  38. </section>
    39. 

  39. <section class="container border-top-dashed d-flex align-items-center">
    40. 

  40.     <div class="w-40 pl-4 d-flex align-items-center">
    41. 

  41.         <input type="checkbox" class="w-20px h-20px" name="" id="">
    42. 

  42.         <img src="./img/cart01.jpg" alt="">
    43. 

  43.         <div class="ml-4 pl-4">
    44. 

  44.             <p><a href="" class="fontSize14">细说PHP</a></p>
    45. 

  45.             <p class="mt-4 mb-1 text-777">图书分类</p>
    46. 

  46.             <p class="text-777">细说系列</p>
    47. 

  47.         </div>
    48. 

  48.     </div>
    49. 

  49.     <div class="w-10 text-center">￥20.00</div>
    50. 

  50.     <div class="w-30 d-flex jusify-content-center align-items-center">
    51. 

  51.         <div class="border px-2 mr-2 cursor fontSize18">-</div>
    52. 

  52.         <input type="text" class="border-0" size="1" value="1">
    53. 

  53.         <div class="border px-2 py-1 cursor fontSize12">+</div>
    54. 

  54.     </div>
    55. 

  55.     <div class="w-10 text-center">￥20.00</div>
    56. 

  56.     <div class="w-10 text-center">
    57. 

  57.         <a href="">删除</a>
    58. 

  58.     </div>
    59. 

  59. </section>
    60. 

  60. <!-- 购物车底部 -->
    61. 

  61. <section class="container d-flex jusify-content-between align-items-center bg-db">
    62. 

  62.     <section class="py-2 d-flex align-items-center pl-1">
    63. 

  63.         <input type="checkbox" name="" class="w-20px h-20px" id="">
    64. 

  64.         <a href="" class="ml-4">全选</a>
    65. 

  65.         <a href="" class="ml-2">删除</a>
    66. 

  66.     </section>
    67. 

  67.     <section class="d-flex align-items-center w-30 jusify-content-between">
    68. 

  68.         <div>共<span class="textColorRed120">2</span>件商品</div>
    69. 

  69.         <div class="">合计: <span class="textColorRed120">￥40.00</span>元</div>
    70. 

  70.         <div class="border-0 text-center bg-8e text-white py-2 w-40">结算</div>
    71. 

  71.     </section>
    72. 

  72. </section>
    73.

2.订单页

2.1 图片展示

购物车和订单页

2.2 代码展示

    

  1. <!-- 订单区块 -->
    2. 

  2. <section class="container py-2 d-flex jusify-content-between align-items-center">
    3. 

  3.     <div class="fontSize16">订单确认</div>
    4. 

  4.     <div class="w-60">
    5. 

  5.         <img src="./img/cartTop02.png" alt="">
    6. 

  6.     </div>
    7. 

  7. </section>
    8. 

  8. <!-- 订单内容区域 -->
    9. 

  9. <section class="container d-flex jusify-content-between">
    10. 

  10.     <section class=" w-60">
    11. 

  11.         <div class="d-flex border-bottom align-items-center jusify-content-between py-2">
    12. 

  12.             <p class="fontSize14">收件信息</p>
    13. 

  13.             <a href="" class="fontSize12">新增地址</a>
    14. 

  14.         </div>
    15. 

  15.         <div class="mt-2 d-flex flex-wrap jusify-content-between ">
    16. 

  16.             <div class="w-45 mt-4 border2 border-dark cursor">
    17. 

  17.                 <div class="d-flex jusify-content-between align-item-conter py-2">
    18. 

  18.                     <div class="pl-2"><span>张三</span><span>【默认地址】</span></div>
    19. 

  19.                     <div class="pr-2">
    20. 

  20.                         <a href="">删除</a>
    21. 

  21.                         <span>|</span>
    22. 

  22.                         <a href="">编辑</a>
    23. 

  23.                     </div>
    24. 

  24.                 </div>
    25. 

  25.                 <div class="bg-e9 pl-2">
    26. 

  26.                     <p class="py-4">广东省 天河区 XXX XX</p>
    27. 

  27.                     <p class="pb-4">XXXXXXXXXX</p>
    28. 

  28.                 </div>
    29. 

  29.             </div>
    30. 

  30.             <div class="w-45 mt-4 border2 cursor">
    31. 

  31.                 <div class="d-flex jusify-content-between align-item-conter py-2">
    32. 

  32.                     <div class="pl-2"><span>张三</span><span>【默认地址】</span></div>
    33. 

  33.                     <div class="pr-2">
    34. 

  34.                         <a href="">删除</a>
    35. 

  35.                         <span>|</span>
    36. 

  36.                         <a href="">编辑</a>
    37. 

  37.                     </div>
    38. 

  38.                 </div>
    39. 

  39.                 <div class="bg-e9 pl-2">
    40. 

  40.                     <p class="py-4">广东省 天河区 XXX XX</p>
    41. 

  41.                     <p class="pb-4">XXXXXXXXXX</p>
    42. 

  42.                 </div>
    43. 

  43.             </div>
    44. 

  44.             <div class="w-45 mt-4 border2 cursor">
    45. 

  45.                 <div class="d-flex jusify-content-between align-item-conter py-2">
    46. 

  46.                     <div class="pl-2"><span>张三</span><span>【默认地址】</span></div>
    47. 

  47.                     <div class="pr-2">
    48. 

  48.                         <a href="">删除</a>
    49. 

  49.                         <span>|</span>
    50. 

  50.                         <a href="">编辑</a>
    51. 

  51.                     </div>
    52. 

  52.                 </div>
    53. 

  53.                 <div class="bg-e9 pl-2">
    54. 

  54.                     <p class="py-4">广东省 天河区 XXX XX</p>
    55. 

  55.                     <p class="pb-4">XXXXXXXXXX</p>
    56. 

  56.                 </div>
    57. 

  57.             </div>
    58. 

  58.         </div>
    59. 

  59.         <div class="my-4">
    60. 

  60.             <div class="py-2 border-bottom fontSize16">支付方式</div>
    61. 

  61.             <div class="mt-2 py-2 d-flex jusify-content-between">
    62. 

  62.                 <img src="./img/way01.jpg" class="border2 cursor w-15 border-dark" alt="">
    63. 

  63.                 <img src="./img/way02.jpg" class="border2 cursor w-15" alt="">
    64. 

  64.                 <img src="./img/way03.jpg" class="border2 cursor w-15" alt="">
    65. 

  65.                 <img src="./img/way04.jpg" class="border2 cursor w-15" alt="">
    66. 

  66.             </div>
    67. 

  67.         </div>
    68. 

  68.         <div class="my-4">
    69. 

  69.             <div class="py-2 border-bottom fontSize16">选择快递</div>
    70. 

  70.             <div class="mt-2 py-2 d-flex jusify-content-between">
    71. 

  71.                 <span class="w-15 border2 cursor border-dark text-center py-2">顺丰快递</span>
    72. 

  72.                 <span class="w-15 border2 cursor text-center py-2">百世快递</span>
    73. 

  73.                 <span class="w-15 border2 cursor text-center py-2">韵达快递</span>
    74. 

  74.                 <span class="w-15 border2 cursor text-center py-2">中通快递</span>
    75. 

  75.             </div>
    76. 

  76.         </div>
    77. 

  77.     </section>
    78. 

  78.     <section class=" w-35">
    79. 

  79.         <div class="bg-f5 px-2">
    80. 

  80.             <div class=" d-flex jusify-content-between align-items-center">
    81. 

  81.                 <p class="fontSize16 py-2">订单内容</p>
    82. 

  82.                 <a href="" class="fontSize12">返回购物车</a>
    83. 

  83.             </div>
    84. 

  84.             <div class="d-flex py-2 px-4 border-top jusify-content-between align-items-center bg-f5">
    85. 

  85.                 <img src="./img/order01.jpg" alt="">
    86. 

  86.                 <div class="w-60">
    87. 

  87.                     <p>细说PHP</p>
    88. 

  88.                     <p class="py-4 text-777">分类：编辑书籍</p>
    89. 

  89.                     <p class="text-777">数量：1</p>
    90. 

  90.                 </div>
    91. 

  91.                 <p>￥199.00</p>
    92. 

  92.             </div>
    93. 

  93.             <div class="d-flex py-2 px-4 border-top jusify-content-between align-items-center bg-f5">
    94. 

  94.                 <img src="./img/order01.jpg" alt="">
    95. 

  95.                 <div class="w-60">
    96. 

  96.                     <p>细说PHP</p>
    97. 

  97.                     <p class="py-4 text-777">分类：编辑书籍</p>
    98. 

  98.                     <p class="text-777">数量：1</p>
    99. 

  99.                 </div>
    100. 

  100.                 <p>￥199.00</p>
    101. 

  101.             </div>
    102. 

  102.         </div>
    103. 

  103.         <div class="px-2">
    104. 

  104.             <div class="d-flex jusify-content-between">
    105. 

  105.                 <p>商品价格</p>
    106. 

  106.                 <p>￥199.00</p>
    107. 

  107.             </div>
    108. 

  108.             <div class="d-flex my-2 jusify-content-between">
    109. 

  109.                 <p>优惠价格</p>
    110. 

  110.                 <p>￥19.00</p>
    111. 

  111.             </div>
    112. 

  112.             <div class="d-flex jusify-content-between">
    113. 

  113.                 <p>运费</p>
    114. 

  114.                 <p>￥1.00</p>
    115. 

  115.             </div>
    116. 

  116.             <div class="border-top my-4"></div>
    117. 

  117.             <div class="d-flex jusify-content-between">
    118. 

  118.                 <p class="fontSize16">合计：</p>
    119. 

  119.                 <p class="fontSize16 textColorRed120">￥2</p>
    120. 

  120.             </div>
    121. 

  121.         </div>
    122. 

  122.         <div class="px-2 py-2">
    123. 

  123.             <a class="w-100 cursor d-block text-center border-0 text-white bg-dark py-3 hover">去支付</a>
    124. 

  124.         </div>
    125. 

  125.     </section>
    126. 

  126. </section>
    127.

上一篇：

下一篇：

推荐阅读