flex 实现秒杀布局

  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/myms.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. <div class="ms-text">
  79. <div class="jdms">京东秒杀</div>
  80. <div class="text-time">
  81. <div class="zc">20点专场</div>
  82. <div class="tm">01:40:33</div>
  83. </div>
  84. <div class="gdms">更多秒杀</div>
  85. </div>
  86. <ul class="sp">
  87. <li class="sp-item">
  88. <img src="static/images/ms/ms-1.jpg" alt="">
  89. <div class="jiage"><b>338</b></div>
  90. <div><s>¥558</s></div>
  91. </li>
  92. <li class="sp-item">
  93. <img src="static/images/ms/ms-2.jpg" alt="">
  94. <div class="jiage"><b>1338</b></div>
  95. <div><s>¥558</s></div>
  96. </li>
  97. <li class="sp-item">
  98. <img src="static/images/ms/ms-3.jpg" alt="">
  99. <div class="jiage"><b>538</b></div>
  100. <div><s>¥558</s></div>
  101. </li>
  102. <li class="sp-item">
  103. <img src="static/images/ms/ms-4.jpg" alt="">
  104. <div class="jiage"><b>2338</b></div>
  105. <div><s>¥558</s></div>
  106. </li>
  107. </ul>
  108. </div>
  109. <!-- 推荐商品区 -->
  110. <ul class="tj">
  111. <li class="item">
  112. <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  113. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  114. <div class="price">
  115. <div class="iconfont icon-rmb">79</div>
  116. <div>看相似</div>
  117. </div>
  118. </li>
  119. <li class="item">
  120. <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  121. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  122. <div class="price">
  123. <div class="iconfont icon-rmb">79</div>
  124. <div>看相似</div>
  125. </div>
  126. </li>
  127. <li class="item">
  128. <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  129. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  130. <div class="price">
  131. <div class="iconfont icon-rmb">79</div>
  132. <div>看相似</div>
  133. </div>
  134. </li>
  135. <li class="item">
  136. <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  137. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  138. <div class="price">
  139. <div class="iconfont icon-rmb">79</div>
  140. <div>看相似</div>
  141. </div>
  142. <li class="item">
  143. <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  144. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  145. <div class="price">
  146. <div class="iconfont icon-rmb">79</div>
  147. <div>看相似</div>
  148. </div>
  149. </li>
  150. <li class="item">
  151. <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  152. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  153. <div class="price">
  154. <div class="iconfont icon-rmb">79</div>
  155. <div>看相似</div>
  156. </div>
  157. </li>
  158. <li class="item">
  159. <a href=""><img src="static/images/sp/sp-7.webp" alt="" /></a>
  160. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  161. <div class="price">
  162. <div class="iconfont icon-rmb">79</div>
  163. <div>看相似</div>
  164. </div>
  165. </li>
  166. <li class="item">
  167. <a href=""><img src="static/images/sp/sp-8.webp" alt="" /></a>
  168. <p>icon艾肯声卡手机直播转换器,苹果安卓通用直播转换器,苹果安卓通用</p>
  169. <div class="price">
  170. <div class="iconfont icon-rmb">79</div>
  171. <div>看相似</div>
  172. </div>
  173. </li>
  174. </li>
  175. </ul>
  176. </div>
  177. <!-- 页脚 -->
  178. <div class="footer">
  179. <div>
  180. <!-- 上面放图标 -->
  181. <div class="iconfont icon-home"></div>
  182. <!-- 下面放文本 -->
  183. <span>首页</span>
  184. </div>
  185. <div>
  186. <div class="iconfont icon-home"></div>
  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. </body>
  203. </html>
  1. .ms{
  2. background-color: #fff;
  3. }
  4. .ms .ms-text {
  5. display: flex;
  6. height: 3rem;
  7. padding: 1rem;
  8. align-items: center;
  9. justify-content: space-between;
  10. }
  11. .ms-text .text-time{
  12. display: flex;
  13. align-items: center;
  14. height: 2rem;
  15. flex: 1;
  16. }
  17. .ms-text .gdms{
  18. font-size: 1rem;
  19. color: brown;
  20. }
  21. .text-time .zc{
  22. color: #fff;
  23. background-color: rgb(255, 0, 0);
  24. border-radius:5rem ;
  25. border: 1px solid rgb(255, 0, 0);
  26. }
  27. .text-time .tm{
  28. width: 10rem;
  29. text-align:right;
  30. border-radius:5rem ;
  31. border: 1px solid rgb(255, 0, 0);
  32. margin-left: -3.5rem;
  33. }
  34. .sp {
  35. display: flex;
  36. margin: 1rem;
  37. justify-content: space-between;
  38. }
  39. .sp .sp-item div{
  40. text-align: center;
  41. }
  42. .sp .sp-item .jiage{
  43. color: rgb(255, 0, 0);
  44. }

更多相关文章

  1. 酱茄plus多端小程序发布(圈子商城直播带货)QQ社区小程序_百度圈子
  2. 【线上沙龙直播报名】毕业一年,在美团点评做工程师是一种什么样的
  3. 【线上沙龙直播报名】App 启动流程详解及其优化
  4. 【直播】美团点评技术沙龙Online006: WWDC 心得之让我们一起把玩
  5. 【直播】美团点评技术沙龙Online005: 臧老师带你去看 WWDC
  6. Web页面或URL转换为PDF的在线工具
  7. 0-5V转0-5V模拟信号转换器,信号隔离器,分配器
  8. 深入理解Kafka Connect:转换器和序列化
  9. 0-10V转0-10V隔离器,信号转换器,信号分配模块

随机推荐

  1. 如何使用Knockout从vm设置会话变量?
  2. 如何测试一个点是否是二次Bézier曲线的
  3. 在ExtJS中调用超类方法的更好方法
  4. 浅析JS中的 map, filter, some, every, f
  5. jQuery选择器,用于查找与选择器匹配的给定
  6. 嵌套水平滑块与单击控件
  7. 用javaScript编写的验证函数只运行一次?
  8. 下拉列表中的Prestashop过滤器不起作用
  9. 错误地将JSON数据写入文件。
  10. 很多骨干观点 - 性能问题?