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

商城列表页和商品详情页

程序员文章站 2022-04-17 19:51:40
...

商城列表页

商城列表页和商品详情页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>商城列表页</title>
  6. <link rel="stylesheet" href="./css/base.css" />
  7. <link rel="stylesheet" href="./css/eduwork.css" />
  8. <link rel="stylesheet" href="./css/iconfont.css" />
  9. <link rel="stylesheet" href="./css/layout.css" />
  10. <link rel="stylesheet" href="./css/footer.css" />
  11. <link rel="stylesheet" href="./css/list.css" />
  12. <link rel="stylesheet" href="https://at.alicdn.com/t/font_2934967_enobaibly2.css">
  13. </head>
  14. <body>
  15. <header class="container d-flex jusify-content-between align-items-center">
  16. <div class="header-left">
  17. <img src="./img/logo.png" >
  18. </div>
  19. <div class="header-right d-flex jusify-content-between align-items-center">
  20. <div class="mt-2">
  21. <a href="">登录</a>
  22. <span>|</span>
  23. <a href="">注册</a>
  24. </div>
  25. <div class="header-search border-bottom border-black ml-2">
  26. <form action="" method="post">
  27. <input type="text" name="" id="" value="" placeholder="热门搜索:细说PHP" class="border-0" />
  28. <button type="button" class="icon-sousuo iconfont border-0 bg-transparent textColorRed120"></button>
  29. </form>
  30. </div>
  31. <div class="header-icon">
  32. <a href="" class="hover-a-none"><i class="icon-31wode iconfont textColorRed120"></i></a>
  33. <a href="" class="hover-a-none"><i class="icon-erweima iconfont textColorRed120"></i></a>
  34. <a href="" class="hover-a-none"><i class="icon-gouwuchekong iconfont textColorRed120"></i></a>
  35. </div>
  36. </div>
  37. </header>
  38. <div class="container-full navbox">
  39. <ul class="d-flex jusify-content-center align-items-center">
  40. <li class="px-3 py-2 mx-4">
  41. <a class="nav-item fontSize16" href="">首页</a>
  42. </li>
  43. <li class="px-3 py-2 mx-4">
  44. <a class="nav-item fontSize16" href="">编程图书</a>
  45. <div class="navbox-child position-absolute left-0 w-100">
  46. <div class="d-flex jusify-content-center align-items-center">
  47. <div class="py-2 px-2 mx-4">
  48. <a href="" class="text-white">细说PHP</a>
  49. </div>
  50. <div class="py-2 px-2 mx-4">
  51. <a href="" class="text-white">细说PHP</a>
  52. </div>
  53. <div class="py-2 px-2 mx-4">
  54. <a href="" class="text-white">细说PHP</a>
  55. </div>
  56. </div>
  57. </div>
  58. </li>
  59. <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">算法图书</a></li>
  60. <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">AI图书</a></li>
  61. <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">人工智能</a></li>
  62. </ul>
  63. </div>
  64. <!-- banner-->
  65. <section class="banner container-full overflow-hidden border border-box">
  66. <div class="d-flex w-300">
  67. <img src="./img/001.jpeg" alt="" class="w-100">
  68. <img src="./img/2.jpeg" class="w-100" alt="">
  69. <img src="./img/3.jpeg" class="w-100" alt="">
  70. </div>
  71. </section>
  72. <!-- 侧边栏-->
  73. <aside class="posetion-fixed right-10 d-flex flex-column jusify-content-between">
  74. <div class="iconfont border p-3 bg-db cursor textColorRed120 icon-31wode"></div>
  75. <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  76. <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  77. <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  78. </aside>
  79. <div class="container-full border-bottom">
  80. <div class="container py-1">
  81. <a href="">首页</a>
  82. <span class="ml-2 mr-2">/</span>
  83. <a href="">编程书籍</a>
  84. <span class="ml-2 mr-2">/</span>
  85. <a href="">细说系列</a>
  86. </div>
  87. </div>
  88. <div class="container-full border-bottom">
  89. <div class="container d-flex jusify-content-between align-items-center">
  90. <div class="fontSize18 font-weight-bold">
  91. 细说系列
  92. </div>
  93. <div class="order-box d-flex jusify-content-between align-items-center border position-relative">
  94. <span>排序方式</span>
  95. <i class="iconfont icon-xiajiantou"></i>
  96. <div class="order-list position-absolute border">
  97. <div><a href="">新品上市</a></div>
  98. <div><a href="">新品上市</a></div>
  99. <div><a href="">新品上市</a></div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="container d-flex jusify-content-around pt-3 pb-3">
  105. <div class="goods-item text-center">
  106. <div class="">
  107. <a href=""><img src="./img/pro01.jpg"></a>
  108. </div>
  109. <div class="py-2 fontSize14">
  110. <a href="">细说PHP</a>
  111. </div>
  112. <div class="textColorRed120">
  113. ¥159.00
  114. </div>
  115. </div>
  116. <div class="goods-item text-center">
  117. <div class="">
  118. <a href=""><img src="./img/pro01.jpg"></a>
  119. </div>
  120. <div class="py-2 fontSize14">
  121. <a href="">细说PHP</a>
  122. </div>
  123. <div class="textColorRed120">
  124. ¥159.00
  125. </div>
  126. </div>
  127. <div class="goods-item text-center">
  128. <div class="">
  129. <a href=""><img src="./img/pro01.jpg"></a>
  130. </div>
  131. <div class="py-2 fontSize14">
  132. <a href="">细说PHP</a>
  133. </div>
  134. <div class="textColorRed120">
  135. ¥159.00
  136. </div>
  137. </div>
  138. <div class="goods-item text-center">
  139. <div class="">
  140. <a href=""><img src="./img/pro01.jpg"></a>
  141. </div>
  142. <div class="py-2 fontSize14">
  143. <a href="">细说PHP</a>
  144. </div>
  145. <div class="textColorRed120">
  146. ¥159.00
  147. </div>
  148. </div>
  149. </div>
  150. <footer class="container-full border-top mt-4 ">
  151. <section class="container d-flex my-2 jusify-content-around align-items-center">
  152. <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  153. <img src="./img/foot1.png" alt="">
  154. <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  155. </div>
  156. <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  157. <img src="./img/foot1.png" alt="">
  158. <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  159. </div>
  160. <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  161. <img src="./img/foot1.png" alt="">
  162. <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  163. </div>
  164. <div class=" py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  165. <img src="./img/foot1.png" alt="">
  166. <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  167. </div>
  168. </section>
  169. <section class="bg-black text-center py-3">
  170. <p class="text-white">最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
  171. 违法和不良信息举报电话:400-800-8200,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
  172. </section>
  173. </footer>
  174. </body>
  175. </html>

商城详情页

商城列表页和商品详情页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>商城详情页</title>
  6. <link rel="stylesheet" href="./css/base.css" />
  7. <link rel="stylesheet" href="./css/eduwork.css" />
  8. <link rel="stylesheet" href="./css/iconfont.css" />
  9. <link rel="stylesheet" href="./css/layout.css" />
  10. <link rel="stylesheet" href="./css/footer.css" />
  11. <link rel="stylesheet" href="./css/info.css" />
  12. <link rel="stylesheet" href="https://at.alicdn.com/t/font_2934967_j3h3059l5o.css">
  13. </head>
  14. <body>
  15. <header class="container d-flex jusify-content-between align-items-center">
  16. <div class="header-left">
  17. <img src="./img/logo.png" >
  18. </div>
  19. <div class="header-right d-flex jusify-content-between align-items-center">
  20. <div class="mt-2">
  21. <a href="">登录</a>
  22. <span>|</span>
  23. <a href="">注册</a>
  24. </div>
  25. <div class="header-search border-bottom border-black ml-2">
  26. <form action="" method="post">
  27. <input type="text" name="" id="" value="" placeholder="热门搜索:细说PHP" class="border-0" />
  28. <button type="button" class="icon-sousuo iconfont border-0 bg-transparent textColorRed120"></button>
  29. </form>
  30. </div>
  31. <div class="header-icon">
  32. <a href="" class="hover-a-none"><i class="icon-31wode iconfont textColorRed120"></i></a>
  33. <a href="" class="hover-a-none"><i class="icon-erweima iconfont textColorRed120"></i></a>
  34. <a href="" class="hover-a-none"><i class="icon-gouwuchekong iconfont textColorRed120"></i></a>
  35. </div>
  36. </div>
  37. </header>
  38. <div class="container-full navbox">
  39. <ul class="d-flex jusify-content-center align-items-center">
  40. <li class="px-3 py-2 mx-4">
  41. <a class="nav-item fontSize16" href="">首页</a>
  42. </li>
  43. <li class="px-3 py-2 mx-4">
  44. <a class="nav-item fontSize16" href="">编程图书</a>
  45. <div class="navbox-child position-absolute left-0 w-100">
  46. <div class="d-flex jusify-content-center align-items-center">
  47. <div class="py-2 px-2 mx-4">
  48. <a href="" class="text-white">细说PHP</a>
  49. </div>
  50. <div class="py-2 px-2 mx-4">
  51. <a href="" class="text-white">细说PHP</a>
  52. </div>
  53. <div class="py-2 px-2 mx-4">
  54. <a href="" class="text-white">细说PHP</a>
  55. </div>
  56. </div>
  57. </div>
  58. </li>
  59. <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">算法图书</a></li>
  60. <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">AI图书</a></li>
  61. <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">人工智能</a></li>
  62. </ul>
  63. </div>
  64. <!-- banner-->
  65. <section class="banner container-full overflow-hidden border border-box">
  66. <div class="d-flex w-300">
  67. <img src="./img/001.jpeg" alt="" class="w-100">
  68. <img src="./img/2.jpeg" class="w-100" alt="">
  69. <img src="./img/3.jpeg" class="w-100" alt="">
  70. </div>
  71. </section>
  72. <!-- 侧边栏-->
  73. <aside class="posetion-fixed right-10 d-flex flex-column jusify-content-between">
  74. <div class="iconfont border p-3 bg-db cursor textColorRed120 icon-31wode"></div>
  75. <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  76. <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  77. <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  78. </aside>
  79. <div class="container-full border-bottom">
  80. <div class="container py-1">
  81. <a href="">首页</a>
  82. <span class="ml-2 mr-2">/</span>
  83. <a href="">编程书籍</a>
  84. <span class="ml-2 mr-2">/</span>
  85. <a href="">细说系列</a>
  86. </div>
  87. </div>
  88. <div class="container d-flex jusify-content-center">
  89. <div class="goods-img-box w-40">
  90. <div class="text-center">
  91. <img src="./img/proDet01_big.jpg" >
  92. </div>
  93. <div class="">
  94. <ul class="d-flex">
  95. <li><img src="./img/proDet01.jpg" ></li>
  96. <li><img src="./img/proDet01.jpg" ></li>
  97. <li><img src="./img/proDet01.jpg" ></li>
  98. <li><img src="./img/proDet01.jpg" ></li>
  99. </ul>
  100. </div>
  101. </div>
  102. <div class="goods-info-box w-40">
  103. <h1 class="fontSize18">[细说] 细说PHP</h1>
  104. <div class="text-777 py-3">
  105. 【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】
  106. </div>
  107. <div class="textColorRed120 font-weight-bold fontSize16 pb-4">
  108. ¥ 159.00
  109. </div>
  110. <div class="pt-4 border-top">
  111. <p>颜色分类</p>
  112. <div class="py-4">
  113. <img src="./img/proDet01.jpg" class="w-10" >
  114. <img src="./img/proDet01.jpg" class="w-10" >
  115. <img src="./img/proDet01.jpg" class="w-10" >
  116. <img src="./img/proDet01.jpg" class="w-10" >
  117. </div>
  118. </div>
  119. <div class="mb-4">
  120. <p>数量 库存<font class="textColorRed120">2000</font></p>
  121. <div class="d-flex align-items-center py-2">
  122. <div class="fontSize20 border px-2">
  123. -
  124. </div>
  125. <div class="">
  126. <input type="text" name="" id="" value="1" class="border-0 text-center width-50" />
  127. </div>
  128. <div class="fontSize20 border px-2">
  129. +
  130. </div>
  131. </div>
  132. </div>
  133. <div class="pt-4 border-top">
  134. <div class="d-flex jusify-content-around">
  135. <button type="button" class="border bg-dark w-30 px-4 py-3 text-white fontSize16">立即购买</button>
  136. <button type="button" class="border w-30 px-4 py-3 text-black fontSize16">加入购物车</button>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. <div class="container d-flex jusify-content-between">
  142. <div class="info-left w-70">
  143. <div class="info-tab d-flex border-bottom w-100">
  144. <div class="px-4 py-2 border-bottom border-dark">
  145. 商品详情
  146. </div>
  147. <div class="px-4 py-2">
  148. 所有评价
  149. </div>
  150. </div>
  151. <div class="py-3">
  152. <img src="./img/det01.jpg" alt="">
  153. </div>
  154. </div>
  155. <div class="info-right w-20">
  156. <div class="border">
  157. <div class="bg-fbfb text-center py-2">
  158. 为您推荐
  159. </div>
  160. <div class="p-3">
  161. <div class="">
  162. <img src="./img/see01.jpg" class="w-80" >
  163. </div>
  164. <div class="pt-3 pb-3">
  165. 【细说】细说PHP
  166. </div>
  167. <div class="">
  168. ¥158.00
  169. </div>
  170. </div>
  171. <div class="p-3">
  172. <div class="">
  173. <img src="./img/see01.jpg" class="w-80" >
  174. </div>
  175. <div class="pt-3 pb-3">
  176. 【细说】细说PHP
  177. </div>
  178. <div class="">
  179. ¥158.00
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. <div class="container-full bg-fbfb pt-2 pb-2">
  186. <div class="container">
  187. <div class="text-center fontSize16">
  188. 猜你喜欢
  189. </div>
  190. <div class="d-flex jusify-content-between">
  191. <div class="w-10 d-flex align-items-center iconfont icon-xiangzuojiantou fontSize50 text-777">
  192. </div>
  193. <div class="w-80 d-flex jusify-content-around align-items-center">
  194. <div class="p-3">
  195. <div class="">
  196. <img src="./img/like04.jpg" >
  197. </div>
  198. <div class="pt-3 pb-3">
  199. 【细说】细说PHP
  200. </div>
  201. <div class="textColorRed120">
  202. ¥158.00
  203. </div>
  204. </div>
  205. <div class="p-3">
  206. <div class="">
  207. <img src="./img/like04.jpg" >
  208. </div>
  209. <div class="pt-3 pb-3">
  210. 【细说】细说PHP
  211. </div>
  212. <div class="textColorRed120">
  213. ¥158.00
  214. </div>
  215. </div>
  216. <div class="p-3">
  217. <div class="">
  218. <img src="./img/like04.jpg" >
  219. </div>
  220. <div class="pt-3 pb-3">
  221. 【细说】细说PHP
  222. </div>
  223. <div class="textColorRed120">
  224. ¥158.00
  225. </div>
  226. </div>
  227. <div class="p-3">
  228. <div class="">
  229. <img src="./img/like04.jpg" >
  230. </div>
  231. <div class="pt-3 pb-3">
  232. 【细说】细说PHP
  233. </div>
  234. <div class="textColorRed120">
  235. ¥158.00
  236. </div>
  237. </div>
  238. </div>
  239. <div class="w-10 d-flex jusify-content-center align-items-center iconfont icon-xiangyoujiantou fontSize50 text-777">
  240. </div>
  241. </div>
  242. </div>
  243. </div>
  244. <footer class="container-full border-top mt-4 ">
  245. <section class="container d-flex my-2 jusify-content-around align-items-center">
  246. <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  247. <img src="./img/foot1.png" alt="">
  248. <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  249. </div>
  250. <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  251. <img src="./img/foot1.png" alt="">
  252. <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  253. </div>
  254. <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  255. <img src="./img/foot1.png" alt="">
  256. <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  257. </div>
  258. <div class=" py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  259. <img src="./img/foot1.png" alt="">
  260. <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  261. </div>
  262. </section>
  263. <section class="bg-black text-center py-3">
  264. <p class="text-white">最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
  265. 违法和不良信息举报电话:400-800-8200,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
  266. </section>
  267. </footer>
  268. </body>
  269. </html>