作业_0706

作业内容:将仿京东移动端首页的”秒杀区”样式, 参考代码放在QQ群中了

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>index4推荐商品区</title>
  8. <link rel="stylesheet" href="static/css/index.css" />
  9. <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  10. <link rel="stylesheet" href="static/css/header.css" />
  11. <link rel="stylesheet" href="static/css/footer.css" />
  12. <link rel="stylesheet" href="static/css/nav.css" />
  13. <link rel="stylesheet" href="static/css/tj.css" />
  14. <link rel="stylesheet" href="static/css/ms.css">
  15. </head>
  16. <body>
  17. <!-- 页眉 -->
  18. <div class="header">
  19. <!-- 左: 菜单按钮 -->
  20. <div class="menu iconfont icon-menu"></div>
  21. <!-- 中:搜索框 -->
  22. <div class="search">
  23. <div class="logo">JD</div>
  24. <div class="zoom iconfont icon-search"></div>
  25. <input type="text" value="台式机组装" class="words" />
  26. </div>
  27. <!-- 右: 登录按钮 -->
  28. <a href="" class="login">登录</a>
  29. </div>
  30. <!-- 主体 -->
  31. <div class="main">
  32. <!-- 主导航区 -->
  33. <ul class="nav">
  34. <li>
  35. <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  36. <a href="">京东超市</a>
  37. </li>
  38. <li>
  39. <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  40. <a href="">数码电器</a>
  41. </li>
  42. <li>
  43. <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  44. <a href="">京东服饰</a>
  45. </li>
  46. <li>
  47. <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  48. <a href="">京东生鲜</a>
  49. </li>
  50. <li>
  51. <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  52. <a href="">京东到家</a>
  53. </li>
  54. <!-- 第二组 -->
  55. <li>
  56. <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  57. <a href="">充值缴费</a>
  58. </li>
  59. <li>
  60. <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  61. <a href="">9.9元拼</a>
  62. </li>
  63. <li>
  64. <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  65. <a href="">领券</a>
  66. </li>
  67. <li>
  68. <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  69. <a href="">领金贴</a>
  70. </li>
  71. <li>
  72. <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  73. <a href="">PLUS会员</a>
  74. </li>
  75. </ul>
  76. <!-- 秒杀区 -->
  77. <div class="ms">
  78. <!-- 秒杀头部 -->
  79. <div class="ms-top">
  80. <div class="left">
  81. <div class="title">京东秒杀</div>
  82. <div class="notice">
  83. <div class="tips">20点专场</div>
  84. <div class="time">01:40:33</div>
  85. </div>
  86. </div>
  87. <div class="right">更多秒杀</div>
  88. </div>
  89. <!-- 秒杀主体区 -->
  90. <ul class="ms-body">
  91. <li class="item">
  92. <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  93. <div class="iconfont icon-rmb">338</div>
  94. <div class="iconfont icon-rmb">558</div>
  95. </li>
  96. <li class="item">
  97. <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  98. <div class="iconfont icon-rmb">3456</div>
  99. <div class="iconfont icon-rmb">4567</div>
  100. </li>
  101. <li class="item">
  102. <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  103. <div class="iconfont icon-rmb">789</div>
  104. <div class="iconfont icon-rmb">999</div>
  105. </li>
  106. <li class="item">
  107. <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  108. <div class="iconfont icon-rmb">3213</div>
  109. <div class="iconfont icon-rmb">4532</div>
  110. </li>
  111. </ul>
  112. </div>
  113. <!-- 推荐商品区 -->
  114. <ul class="tj">
  115. <li class="item">
  116. <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  117. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  118. <div class="price">
  119. <div class="iconfont icon-rmb">79</div>
  120. <div>看相似</div>
  121. </div>
  122. </li>
  123. <li class="item">
  124. <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  125. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  126. <div class="price">
  127. <div class="iconfont icon-rmb">79</div>
  128. <div>看相似</div>
  129. </div>
  130. </li>
  131. <li class="item">
  132. <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  133. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  134. <div class="price">
  135. <div class="iconfont icon-rmb">79</div>
  136. <div>看相似</div>
  137. </div>
  138. </li>
  139. <li class="item">
  140. <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  141. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  142. <div class="price">
  143. <div class="iconfont icon-rmb">79</div>
  144. <div>看相似</div>
  145. </div>
  146. <li class="item">
  147. <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  148. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  149. <div class="price">
  150. <div class="iconfont icon-rmb">79</div>
  151. <div>看相似</div>
  152. </div>
  153. </li>
  154. <li class="item">
  155. <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  156. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  157. <div class="price">
  158. <div class="iconfont icon-rmb">79</div>
  159. <div>看相似</div>
  160. </div>
  161. </li>
  162. <li class="item">
  163. <a href=""><img src="static/images/sp/sp-7.webp" alt="" /></a>
  164. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  165. <div class="price">
  166. <div class="iconfont icon-rmb">79</div>
  167. <div>看相似</div>
  168. </div>
  169. </li>
  170. <li class="item">
  171. <a href=""><img src="static/images/sp/sp-8.webp" alt="" /></a>
  172. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  173. <div class="price">
  174. <div class="iconfont icon-rmb">79</div>
  175. <div>看相似</div>
  176. </div>
  177. </li>
  178. </li>
  179. </ul>
  180. </div>
  181. <!-- 页脚 -->
  182. <div class="footer">
  183. <div>
  184. <!-- 上面放图标 -->
  185. <div class="iconfont icon-home"></div>
  186. <!-- 下面放文本 -->
  187. <span>首页</span>
  188. </div>
  189. <div>
  190. <div class="iconfont icon-home"></div>
  191. <span>分类</span>
  192. </div>
  193. <div>
  194. <div class="iconfont icon-home"></div>
  195. <span>京喜</span>
  196. </div>
  197. <div>
  198. <div class="iconfont icon-home"></div>
  199. <span>购物车</span>
  200. </div>
  201. <div>
  202. <div class="iconfont icon-home"></div>
  203. <span>未登录</span>
  204. </div>
  205. </div>
  206. </body>
  207. </html>

Css代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>index4推荐商品区</title>
  8. <link rel="stylesheet" href="static/css/index.css" />
  9. <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  10. <link rel="stylesheet" href="static/css/header.css" />
  11. <link rel="stylesheet" href="static/css/footer.css" />
  12. <link rel="stylesheet" href="static/css/nav.css" />
  13. <link rel="stylesheet" href="static/css/tj.css" />
  14. <link rel="stylesheet" href="static/css/ms.css">
  15. </head>
  16. <body>
  17. <!-- 页眉 -->
  18. <div class="header">
  19. <!-- 左: 菜单按钮 -->
  20. <div class="menu iconfont icon-menu"></div>
  21. <!-- 中:搜索框 -->
  22. <div class="search">
  23. <div class="logo">JD</div>
  24. <div class="zoom iconfont icon-search"></div>
  25. <input type="text" value="台式机组装" class="words" />
  26. </div>
  27. <!-- 右: 登录按钮 -->
  28. <a href="" class="login">登录</a>
  29. </div>
  30. <!-- 主体 -->
  31. <div class="main">
  32. <!-- 主导航区 -->
  33. <ul class="nav">
  34. <li>
  35. <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  36. <a href="">京东超市</a>
  37. </li>
  38. <li>
  39. <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  40. <a href="">数码电器</a>
  41. </li>
  42. <li>
  43. <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  44. <a href="">京东服饰</a>
  45. </li>
  46. <li>
  47. <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  48. <a href="">京东生鲜</a>
  49. </li>
  50. <li>
  51. <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  52. <a href="">京东到家</a>
  53. </li>
  54. <!-- 第二组 -->
  55. <li>
  56. <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  57. <a href="">充值缴费</a>
  58. </li>
  59. <li>
  60. <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  61. <a href="">9.9元拼</a>
  62. </li>
  63. <li>
  64. <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  65. <a href="">领券</a>
  66. </li>
  67. <li>
  68. <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  69. <a href="">领金贴</a>
  70. </li>
  71. <li>
  72. <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  73. <a href="">PLUS会员</a>
  74. </li>
  75. </ul>
  76. <!-- 秒杀区 -->
  77. <div class="ms">
  78. <!-- 秒杀头部 -->
  79. <div class="ms-top">
  80. <div class="left">
  81. <div class="title">京东秒杀</div>
  82. <div class="notice">
  83. <div class="tips">20点专场</div>
  84. <div class="time">01:40:33</div>
  85. </div>
  86. </div>
  87. <div class="right">更多秒杀</div>
  88. </div>
  89. <!-- 秒杀主体区 -->
  90. <ul class="ms-body">
  91. <li class="item">
  92. <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  93. <div class="iconfont icon-rmb">338</div>
  94. <div class="iconfont icon-rmb">558</div>
  95. </li>
  96. <li class="item">
  97. <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  98. <div class="iconfont icon-rmb">3456</div>
  99. <div class="iconfont icon-rmb">4567</div>
  100. </li>
  101. <li class="item">
  102. <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  103. <div class="iconfont icon-rmb">789</div>
  104. <div class="iconfont icon-rmb">999</div>
  105. </li>
  106. <li class="item">
  107. <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  108. <div class="iconfont icon-rmb">3213</div>
  109. <div class="iconfont icon-rmb">4532</div>
  110. </li>
  111. </ul>
  112. </div>
  113. <!-- 推荐商品区 -->
  114. <ul class="tj">
  115. <li class="item">
  116. <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  117. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  118. <div class="price">
  119. <div class="iconfont icon-rmb">79</div>
  120. <div>看相似</div>
  121. </div>
  122. </li>
  123. <li class="item">
  124. <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  125. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  126. <div class="price">
  127. <div class="iconfont icon-rmb">79</div>
  128. <div>看相似</div>
  129. </div>
  130. </li>
  131. <li class="item">
  132. <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  133. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  134. <div class="price">
  135. <div class="iconfont icon-rmb">79</div>
  136. <div>看相似</div>
  137. </div>
  138. </li>
  139. <li class="item">
  140. <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  141. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  142. <div class="price">
  143. <div class="iconfont icon-rmb">79</div>
  144. <div>看相似</div>
  145. </div>
  146. <li class="item">
  147. <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  148. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  149. <div class="price">
  150. <div class="iconfont icon-rmb">79</div>
  151. <div>看相似</div>
  152. </div>
  153. </li>
  154. <li class="item">
  155. <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  156. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  157. <div class="price">
  158. <div class="iconfont icon-rmb">79</div>
  159. <div>看相似</div>
  160. </div>
  161. </li>
  162. <li class="item">
  163. <a href=""><img src="static/images/sp/sp-7.webp" alt="" /></a>
  164. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  165. <div class="price">
  166. <div class="iconfont icon-rmb">79</div>
  167. <div>看相似</div>
  168. </div>
  169. </li>
  170. <li class="item">
  171. <a href=""><img src="static/images/sp/sp-8.webp" alt="" /></a>
  172. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  173. <div class="price">
  174. <div class="iconfont icon-rmb">79</div>
  175. <div>看相似</div>
  176. </div>
  177. </li>
  178. </li>
  179. </ul>
  180. </div>
  181. <!-- 页脚 -->
  182. <div class="footer">
  183. <div>
  184. <!-- 上面放图标 -->
  185. <div class="iconfont icon-home"></div>
  186. <!-- 下面放文本 -->
  187. <span>首页</span>
  188. </div>
  189. <div>
  190. <div class="iconfont icon-home"></div>
  191. <span>分类</span>
  192. </div>
  193. <div>
  194. <div class="iconfont icon-home"></div>
  195. <span>京喜</span>
  196. </div>
  197. <div>
  198. <div class="iconfont icon-home"></div>
  199. <span>购物车</span>
  200. </div>
  201. <div>
  202. <div class="iconfont icon-home"></div>
  203. <span>未登录</span>
  204. </div>
  205. </div>
  206. </body>
  207. </html>