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

购物车页面

程序员文章站 2022-03-01 20:46:39
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>购物车页面</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css" />
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css" />
    8. 

  8.     <link rel="stylesheet" href="./css/iconfont.css" />
    9. 

  9.     <link rel="stylesheet" href="./css/layout.css" />
    10. 

  10.     <link rel="stylesheet" href="./css/footer.css" />
    11. 

  11.     <link rel="stylesheet" href="./css/list.css" />
    12. 

  12.     <link rel="stylesheet" href="https://at.alicdn.com/t/font_2934967_enobaibly2.css">
    13. 

  13. </head>
    14. 

  14. <body>
    15. 

  15.     <!--头部标签开始-->
    16. 

  16.     <header class=" container d-flex jusify-content-between">
    17. 

  17.         <div class="">
    18. 

  18.             <img src="./img/logo.png" alt="">
    19. 

  19.         </div>
    20. 

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

  21.             <div class="px-3">
    22. 

  22.                 <a href="" class="fontSize14">登录</a>
    23. 

  23.                 <span>|</span>
    24. 

  24.                 <a href="" class="fontSize14">注册</a>
    25. 

  25.             </div>
    26. 

  26.             <div class="pl-2 border-bottom border-black py-1">
    27. 

  27.                 <form action="">
    28. 

  28.                     <input type="search" class="border-0" placeholder="热门搜索:细说php" name="" id="">
    29. 

  29.                     <button class="header-button iconfont border-0 bg-transparent textColorRed120 icon-sousuo"></button>
    30. 

  30.                 </form>
    31. 

  31.             </div>
    32. 

  32.             <div class="px-3 header-icon d-flex align-items-center">
    33. 

  33.                 <i class="iconfont icon-31wode textColorRed120"></i>
    34. 

  34.                 <i class="iconfont icon-erweima textColorRed120"></i>
    35. 

  35.                 <i class="iconfont icon-gouwuchekong textColorRed120"></i>
    36. 

  36.             </div>
    37. 

  37.         </div>
    38. 

  38.     </header>
    39. 

  39.     <!--导航栏-->
    40. 

  40.     <nav class="container-full ">
    41. 

  41.         <ul class="d-flex  w-40 m-auto text-center">
    42. 

  42.             <li class="py-2 px-4 mx-3"><a href="" class="fontSize14">首页</a></li>
    43. 

  43.             <li class="py-2 px-4 mx-3">
    44. 

  44.                 <a href="" class="fontSize14">编程图书</a>
    45. 

  45.                 <section class="w-100 position-absolute left-0">
    46. 

  46.                     <ul class="d-flex w-40 m-auto">
    47. 

  47.                         <li class="py-2 px-4 mx-3"><a href="" class="text-white">细说PHP</a></li>
    48. 

  48.                         <li class="py-2 px-4 mx-3"><a href=" " class="text-white">细说PHP</a></li>
    49. 

  49.                         <li class="py-2 px-4 mx-3"><a href="" class="text-white">细说PHP</a></li>
    50. 

  50.                         <li class="py-2 px-4 mx-3"><a href="" class="text-white">细说PHP</a></li>
    51. 

  51.                     </ul>
    52. 

  52.                 </section>
    53. 

  53.             </li>
    54. 

  54.             <li class="py-2 px-4 mx-3"><a href="" class="fontSize14">算法图书</a></li>
    55. 

  55.             <li class="py-2 px-4 mx-3"><a href="" class="fontSize14">AI图书</a></li>
    56. 

  56.             <li class="py-2 px-4 mx-3"><a href="" class="fontSize14">人工智能 </a></li>
    57. 

  57.         </ul>
    58. 

  58.     </nav>
    59. 

  59. <!--滚动图片-->
    60. 

  60.     <section class="banner container-full overflow-hidden border border-box">
    61. 

  61.         <div class="d-flex w-300">
    62. 

  62.             <img src="../项目/img/001.jpeg" alt="" class="w-100">
    63. 

  63.             <img src="../项目/img/2.jpeg" class="w-100" alt="">
    64. 

  64.             <img src="../项目/img/3.jpeg" class="w-100" alt="">
    65. 

  65.         </div>
    66. 

  66.     </section>
    67. 

  67. <!--侧边栏-->
    68. 

  68.     <aside class="posetion-fixed py-2 right-10 d-flex flex-column jusify-content-between">
    69. 

  69.         <div class="iconfont border p-3 bg-db cursor textColorRed120 icon-gouwuchekong"></div>
    70. 

  70.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-sousuo"></div>
    71. 

  71.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
    72. 

  72.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-erweima"></div>
    73. 

  73.     </aside>
    74. 

  74.     <!--购物车-->>
    75. 

  75.     <section class="container d-flex  jusify-content-between align-items-center" >
    76. 

  76.         <div class="fontSize16">购物车</div>
    77. 

  77.         <div>
    78. 

  78.             <img height="35px" src="/项目/img/cartTop01.png"/>
    79. 

  79.         </div>
    80. 

  80.         <a href="" class="fontSize16">继续购物 ></a>
    81. 

  81.     </section>
    82. 

  82.     <!--购物车商品详情-->
    83. 

  83.     <section class="d-flex container text-center jusify-content-center bg-db h-40px align-items-center">
    84. 

  84.         <div class="fontSize16 w-40">商品</div>
    85. 

  85.         <div class="fontSize16 w-10">单价</div>
    86. 

  86.         <div class="fontSize16 w-20">数量</div>
    87. 

  87.         <div class="fontSize16 w-10">小计</div>
    88. 

  88.         <div class="fontSize16 w-20">操作</div>
    89. 

  89.     </section>
    90. 

  90.     <!--第一栏-->
    91. 

  91.     <section class=" d-flex container justify-content-center align-items-center pl-4">
    92. 

  92.        <div class="w-40 d-flex  align-items-center">
    93. 

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

  94.            <img  class="pl-4" src="../项目/img/cart01.jpg">
    95. 

  95.        <div class="pl-2 ml-2">
    96. 

  96.            <p><a href="" class="fontSize14">创意现代简约花瓶摆件</a></p>
    97. 

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

  98.            <p class="text-777">细说系列</p>
    99. 

  99.        </div>
    100. 

  100.        </div>
    101. 

  101.        <div class="fontSize14 w-10 text-center">￥20.00</div>
    102. 

  102.         <div class="fontSize14 w-20 d-flex jusify-content-center align-items-center">
    103. 

  103.             <div class="border p-1 w-20px h-20px d-flex jusify-content-center align-items-center mr-3 cursor fontSize22">-</div>
    104. 

  104.             <input type="text" class="border-0" size="1" value="1">
    105. 

  105.             <div class="border ml-1 w-20px h-20px p-1 d-flex jusify-content-center align-items-center cursor fontSize18">+</div>
    106. 

  106.         </div>
    107. 

  107.         <div class="fontSize14 w-10 text-center">￥20.00</div>
    108. 

  108.         <div class="fontSize14 text-center w-20">删除</div> 
    109. 

  109.     </section>
    110. 

  110.     <!--第二栏-->
    111. 

  111.     <section class=" border-top d-flex container justify-content-center align-items-center pl-4">
    112. 

  112.         <div class="w-40 d-flex  align-items-center">
    113. 

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

  114.             <img  class="pl-4" src="../项目/img/cart01.jpg">
    115. 

  115.         <div class="pl-2 ml-2">
    116. 

  116.             <p><a href="" class="fontSize14">创意现代简约花瓶摆件</a></p>
    117. 

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

  118.             <p class="text-777">细说系列</p>
    119. 

  119.         </div>
    120. 

  120.         </div>
    121. 

  121.         <div class="fontSize14 w-10 text-center">￥20.00</div>
    122. 

  122.          <div class="fontSize14 w-20 d-flex jusify-content-center align-items-center">
    123. 

  123.              <div class="border p-1 w-20px h-20px d-flex jusify-content-center align-items-center mr-3 cursor fontSize22">-</div>
    124. 

  124.              <input type="text" class="border-0" size="1" value="1">
    125. 

  125.              <div class="border ml-1 w-20px h-20px p-1 d-flex jusify-content-center align-items-center cursor fontSize18">+</div>
    126. 

  126.          </div>
    127. 

  127.          <div class="fontSize14 w-10 text-center">￥20.00</div>
    128. 

  128.          <div class="fontSize14 text-center w-20">删除</div> 
    129. 

  129.      </section>
    130. 

  130.      <!--底部-->
    131. 

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

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

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

  134.             <a href="" class="ml-4">全选</a>
    135. 

  135.             <a href="" class="ml-2">删除</a>
    136. 

  136.         </section>
    137. 

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

  138.             <div>共 <span class="textColorRed120">0</span> 件商品</div>
    139. 

  139.             <div>合计: <span class="textColorRed120">￥0.00</span></div>
    140. 

  140.             <button class="border-0 bg-8e text-white fontSize14 py-2 w-40 cursor">结算</button>
    141. 

  141.         </section>
    142. 

  142.     </section>
    143. 

    144. 

    145. 

  145. <!--    底部标签-->
    146. 

  146.     <footer class="container-full border-top mt-4 ">
    147. 

  147.         <section class="container d-flex my-2 jusify-content-around align-items-center">
    148. 

  148.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
    149. 

  149.                 <img src="./img/foot1.png" alt="">
    150. 

  150.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
    151. 

  151.             </div>
    152. 

  152.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
    153. 

  153.                 <img src="./img/foot1.png" alt="">
    154. 

  154.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
    155. 

  155.             </div>
    156. 

  156.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
    157. 

  157.                 <img src="./img/foot1.png" alt="">
    158. 

  158.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
    159. 

  159.             </div>
    160. 

  160.             <div class=" py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
    161. 

  161.                 <img src="./img/foot1.png" alt="">
    162. 

  162.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
    163. 

  163.             </div>
    164. 

  164.         </section>
    165. 

  165.         <section class="bg-black text-center py-3">
    166. 

  166.             <p class="text-white">最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
    167. 

  167.                 违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    168. 

  168.         </section>
    169. 

  169.     </footer>
    170. 

  170. </body>
    171. 

  171. </html>
    172.

购物车页面

上一篇： 简单计算器

下一篇： Java 在PPT中添加水印

推荐阅读