Blogger Information
Blog 45
fans 3
comment 0
visits 45542
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿京东商城页面
残破的蛋蛋
Original
1073 people have browsed it

仿京东APP商城首页

利用所学的HTML、CSS写一个纯前端的页面

用到的知识:

  1. HTML

  2. CSS

  3. iconfont图标组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>多快好省,购物上京东</title>
  7. <link rel="stylesheet" href="static/css/reset.css">
  8. <!-- 字体图标 -->
  9. <link rel="stylesheet" href="static/font/icon-font/iconfont.css">
  10. <link rel="stylesheet" href="static/css/index.css">
  11. <!-- 页头 -->
  12. <link rel="stylesheet" href="static/css/header.css">
  13. <!-- 轮播海报 -->
  14. <link rel="stylesheet" href="static/css/swiper.css">
  15. <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  16. <!-- nav -->
  17. <link rel="stylesheet" href="static/css/nav.css">
  18. <!-- 秒杀 -->
  19. <link rel="stylesheet" href="static/css/miaosha.css">
  20. <!-- 商品推荐 -->
  21. <link rel="stylesheet" href="static/css/recommend.css">
  22. <!-- 精选会场 -->
  23. <link rel="stylesheet" href="static/css/fetured.css">
  24. <!-- footer -->
  25. <link rel="stylesheet" href="static/css/footer.css">
  26. </head>
  27. <body style="background-color: #f6f6f6;">
  28. <!-- 外层包裹区 -->
  29. <div class="wrap">
  30. <!-- 页头 -->
  31. <div class="header">
  32. <div class="menu iconfont icon-menu"></div>
  33. <div class="search-wrap">
  34. <div class="logo"></div>
  35. <div class="search iconfont icon-search"></div>
  36. <input type="text" class="keywords" value="苹果笔记本">
  37. </div>
  38. <!-- 登陆按钮 -->
  39. <div class="login"><a href="">登录</a></div>
  40. </div>
  41. <!-- 主体 -->
  42. <div class="main">
  43. <!-- 轮播海报 -->
  44. <div class="swiper-wrap">
  45. <div class="swiper-bg"></div>
  46. <div class="swiper-container">
  47. <div class="swiper-wrapper">
  48. <div class="swiper-slide">
  49. <a href=""><img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/140337/4/18669/96106/5fd9d7f6E4333ed06/1b2de05f19c6c7a8.jpg!q70.jpg.dpg" alt=""></a>
  50. </div>
  51. <div class="swiper-slide">
  52. <a href=""><img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/149128/9/19904/144486/5fe3ee2aE7ad7fd5d/300fa1e6d033c92b.jpg!q70.jpg.dpg" alt=""></a>
  53. </div>
  54. <div class="swiper-slide">
  55. <a href=""><img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/150964/16/11261/90681/5fdc6ba8E40256a92/ba1066ab8e1348e1.jpg!q70.jpg.dpg" alt=""></a>
  56. </div>
  57. </div>
  58. <!-- 如果需要分页器 -->
  59. <div class="swiper-pagination"></div>
  60. <!-- 如果需要导航按钮 -->
  61. <!-- <div class="swiper-button-prev"></div>
  62. <div class="swiper-button-next"></div> -->
  63. <!-- 如果需要滚动条 -->
  64. <!-- <div class="swiper-scrollbar"></div> -->
  65. </div>
  66. <!-- 引入轮播海报js -->
  67. <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
  68. <script>
  69. const swiper = new Swiper('.swiper-container', {
  70. loop: true,
  71. pagination: {
  72. el: '.swiper-pagination',
  73. }
  74. });
  75. </script>
  76. </div>
  77. <!-- 导航图标 -->
  78. <div class="nav">
  79. <ul>
  80. <li><a href=""><img src="static/images/nav/nav-1.png" alt="1"><span>京东超市</span></a></li>
  81. <li><a href=""><img src="static/images/nav/nav-2.png" alt="1"><span>数码电器</span></a></li>
  82. <li><a href=""><img src="static/images/nav/nav-3.png" alt="1"><span>京东服饰</span></a></li>
  83. <li><a href=""><img src="static/images/nav/nav-4.png" alt="1"><span>京东生鲜</span></a></li>
  84. <li><a href=""><img src="static/images/nav/nav-5.png" alt="1"><span>京东到家</span></a></li>
  85. <li><a href=""><img src="static/images/nav/nav-6.png" alt="1"><span>充值缴费</span></a></li>
  86. <li><a href=""><img src="static/images/nav/nav-7.png" alt="1"><span>9.9元拼团</span></a></li>
  87. <li><a href=""><img src="static/images/nav/nav-8.png" alt="1"><span>领券</span></a></li>
  88. <li><a href=""><img src="static/images/nav/nav-9.png" alt="1"><span>借钱</span></a></li>
  89. <li><a href=""><img src="static/images/nav/nav-10.png" alt="1"><span>PLUS会员</span></a></li>
  90. </ul>
  91. </div>
  92. <!-- 秒杀 -->
  93. <div class="miaosha">
  94. <div class="title-wrap">
  95. <div class="left">
  96. <div class="miaosha-title">京东秒杀</div>
  97. <div class="miaosha-hourly">20</div>
  98. <div class="miaosha-time">
  99. <div class="miaosha-num miaosha-hour">20</div>
  100. <div class="miaosha-separator">:</div>
  101. <div class="miaosha-num miaosha-minute">25</div>
  102. <div class="miaosha-separator">:</div>
  103. <div class="miaosha-num miaosha-second">35</div>
  104. </div>
  105. </div>
  106. <div class="miaosha-more">
  107. <span>更多秒杀</span>
  108. <i></i>
  109. </div>
  110. </div>
  111. <div class="container-wrap">
  112. <div class="item-wrap">
  113. <a href="">
  114. <img src="./static/images/miaosha/ms-1.jpg" alt="">
  115. <div class="price">
  116. <div class="c-price"><em>¥</em>39</div>
  117. <div class="s-price"><s><em>¥</em>59</s></div>
  118. </div>
  119. </a>
  120. </div>
  121. <div class="item-wrap">
  122. <a href="">
  123. <img src="./static/images/miaosha/ms-2.jpg" alt="">
  124. <div class="price">
  125. <div class="c-price"><em>¥</em>39</div>
  126. <div class="s-price"><s><em>¥</em>59</s></div>
  127. </div>
  128. </a>
  129. </div>
  130. <div class="item-wrap">
  131. <a href="">
  132. <img src="./static/images/miaosha/ms-3.jpg" alt="">
  133. <div class="price">
  134. <div class="c-price"><em>¥</em>39</div>
  135. <div class="s-price"><s><em>¥</em>59</s></div>
  136. </div>
  137. </a>
  138. </div>
  139. <div class="item-wrap">
  140. <a href="">
  141. <img src="./static/images/miaosha/ms-4.jpg" alt="">
  142. <div class="price">
  143. <div class="c-price"><em>¥</em>39</div>
  144. <div class="s-price"><s><em>¥</em>59</s></div>
  145. </div>
  146. </a>
  147. </div>
  148. <div class="item-wrap">
  149. <a href="">
  150. <img src="./static/images/miaosha/ms-5.jpg" alt="">
  151. <div class="price">
  152. <div class="c-price"><em>¥</em>39</div>
  153. <div class="s-price"><s><em>¥</em>59</s></div>
  154. </div>
  155. </a>
  156. </div>
  157. <div class="item-wrap">
  158. <a href="">
  159. <img src="./static/images/miaosha/ms-6.jpg" alt="">
  160. <div class="price">
  161. <div class="c-price"><em>¥</em>39</div>
  162. <div class="s-price"><s><em>¥</em>59</s></div>
  163. </div>
  164. </a>
  165. </div>
  166. </div>
  167. </div>
  168. <!-- 精选会场 -->
  169. <div class="featured">
  170. <ul class="featured-wrap">
  171. <li class="item-wrap">
  172. <a href="">
  173. <img class="item-bg" src="./static/images/featured/bg.jpg" alt="">
  174. <div class="item-img">
  175. <img src="./static/images/featured/1.jpg" alt="">
  176. </div>
  177. <span class="active">至高24期免息</span>
  178. <span class="title">OPPO自营店</span>
  179. </a>
  180. </li>
  181. <li class="item-wrap">
  182. <a href="">
  183. <img class="item-bg" src="./static/images/featured/bg.jpg" alt="">
  184. <div class="item-img">
  185. <img src="./static/images/featured/2.jpg" alt="">
  186. </div>
  187. <span class="active">满169减30</span>
  188. <span class="title">除尘迎福年</span>
  189. </a>
  190. </li>
  191. <li class="item-wrap">
  192. <a href="">
  193. <img class="item-bg" src="./static/images/featured/bg.jpg" alt="">
  194. <div class="item-img">
  195. <img src="./static/images/featured/3.jpg" alt="">
  196. </div>
  197. <span class="active">PLUS享9折</span>
  198. <span class="title">时尚美家</span>
  199. </a>
  200. </li>
  201. <li class="item-wrap">
  202. <a href="">
  203. <img class="item-bg" src="./static/images/featured/bg.jpg" alt="">
  204. <div class="item-img">
  205. <img src="./static/images/featured/4.jpg" alt="">
  206. </div>
  207. <span class="active">维C低至9.9元</span>
  208. <span class="title">京东健康</span>
  209. </a>
  210. </li>
  211. </ul>
  212. </div>
  213. <!-- 商品推荐 -->
  214. <div class="recommend">
  215. <div class="recommend-title"></div>
  216. <div class="recommend-wrap">
  217. <ul>
  218. <li>
  219. <a href="">
  220. <img class="item-pic" src="//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/145219/2/19536/399315/5fe2f1f1E85abe804/7a5d72011578ff7a.jpg!q70.dpg.webp" alt="">
  221. <div class="detail">
  222. <div class="title">
  223. <img src="//img11.360buyimg.com/jdphoto/s98x28_jfs/t16411/341/2502946085/2662/c4af0771/5aadf9daN1916b3f2.png" alt="">
  224. 战神盟主 酷睿i5 9400F/GTX1060独显 吃鸡游戏台式机电脑主机组装整机 电脑主机 套餐三:i7四核+1060独显6G电竞直播
  225. </div>
  226. <div class="price">
  227. </div>
  228. </div>
  229. </a>
  230. </li>
  231. <li>
  232. <a href="">
  233. <img class="item-pic" src="//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/145219/2/19536/399315/5fe2f1f1E85abe804/7a5d72011578ff7a.jpg!q70.dpg.webp" alt="">
  234. <div class="detail">
  235. <div class="title">
  236. <img src="//img11.360buyimg.com/jdphoto/s98x28_jfs/t16411/341/2502946085/2662/c4af0771/5aadf9daN1916b3f2.png" alt="">
  237. 战神盟主 酷睿i5 9400F/GTX1060独显 吃鸡游戏台式机电脑主机组装整机 电脑主机 套餐三:i7四核+1060独显6G电竞直播
  238. </div>
  239. <div class="price">
  240. </div>
  241. </div>
  242. </a>
  243. </li>
  244. <li>
  245. <a href="">
  246. <img class="item-pic" src="//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/145219/2/19536/399315/5fe2f1f1E85abe804/7a5d72011578ff7a.jpg!q70.dpg.webp" alt="">
  247. <div class="detail">
  248. <div class="title">
  249. <img src="//img11.360buyimg.com/jdphoto/s98x28_jfs/t16411/341/2502946085/2662/c4af0771/5aadf9daN1916b3f2.png" alt="">
  250. 战神盟主 酷睿i5 9400F/GTX1060独显 吃鸡游戏台式机电脑主机组装整机 电脑主机 套餐三:i7四核+1060独显6G电竞直播
  251. </div>
  252. <div class="price">
  253. </div>
  254. </div>
  255. </a>
  256. </li>
  257. <li>
  258. <a href="">
  259. <img class="item-pic" src="//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/145219/2/19536/399315/5fe2f1f1E85abe804/7a5d72011578ff7a.jpg!q70.dpg.webp" alt="">
  260. <div class="detail">
  261. <div class="title">
  262. <img src="//img11.360buyimg.com/jdphoto/s98x28_jfs/t16411/341/2502946085/2662/c4af0771/5aadf9daN1916b3f2.png" alt="">
  263. 战神盟主 酷睿i5 9400F/GTX1060独显 吃鸡游戏台式机电脑主机组装整机 电脑主机 套餐三:i7四核+1060独显6G电竞直播
  264. </div>
  265. <div class="price">
  266. </div>
  267. </div>
  268. </a>
  269. </li>
  270. </ul>
  271. </div>
  272. </div>
  273. </div>
  274. <!-- 页脚 -->
  275. <div class="footer">
  276. <ul>
  277. <li class="active"><a href="javascript:;"><div class="iconfont icon-home"></div><span>首页</span></a></li>
  278. <li><a href="javascript:;"><div class="iconfont icon-layers"></div><span>分类</span></a></li>
  279. <li><a href="javascript:;"><div class="iconfont icon-kehuguanli"></div><span>京喜</span></a></li>
  280. <li><a href="javascript:;"><div class="iconfont icon-shopping-cart"></div><span>购物车</span></a></li>
  281. <li><a href="javascript:;"><div class="iconfont icon-user"></div><span>未登录</span></a></li>
  282. </ul>
  283. </div>
  284. </div>
  285. </body>
  286. </html>
  • 效果图


Correction status:Uncorrected

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