search

博客列表 >flex 实现秒杀布局

flex 实现秒杀布局

小庄
小庄原创
2021年07月07日 16:54:05450浏览

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>
  28.       <!-- 右： 登录按钮 -->
  29.       <a href="" class="login">登录</a>
  30.     </div>
  31.     <!-- 主体 -->
  32.     <div class="main">
  33.       <!-- 主导航区 -->
  34.       <ul class="nav">
  35.         <li>
  36.           <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  37.           <a href="">京东超市</a>
  38.         </li>
  39.         <li>
  40.           <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  41.           <a href="">数码电器</a>
  42.         </li>
  43.         <li>
  44.           <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  45.           <a href="">京东服饰</a>
  46.         </li>
  47.         <li>
  48.           <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  49.           <a href="">京东生鲜</a>
  50.         </li>
  51.         <li>
  52.           <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  53.           <a href="">京东到家</a>
  54.         </li>
  56.         <!-- 第二组 -->
  57.         <li>
  58.           <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  59.           <a href="">充值缴费</a>
  60.         </li>
  61.         <li>
  62.           <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  63.           <a href="">9.9元拼</a>
  64.         </li>
  65.         <li>
  66.           <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  67.           <a href="">领券</a>
  68.         </li>
  69.         <li>
  70.           <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  71.           <a href="">领金贴</a>
  72.         </li>
  73.         <li>
  74.           <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  75.           <a href="">PLUS会员</a>
  76.         </li>
  77.       </ul>
  78.       <!-- 秒杀专区 -->
  79.         <div class="ms">
  80.           <div class="ms-text">
  81.             <div class="jdms">京东秒杀</div>
  82.             <div class="text-time">
  83.               <div class="zc">20点专场</div>
  84.               <div class="tm">01:40:33</div>
  85.             </div>
  86.             <div class="gdms">更多秒杀</div>
  87.         </div>
  88.         <ul class="sp">
  89.           <li class="sp-item">
  90.             <img src="static/images/ms/ms-1.jpg" alt="">
  91.             <div class="jiage">￥<b>338</b></div>
  92.             <div><s>￥558</s></div>
  93.           </li>
  94.           <li class="sp-item">
  95.             <img src="static/images/ms/ms-2.jpg" alt="">
  96.             <div class="jiage">￥<b>1338</b></div>
  97.             <div><s>￥558</s></div>
  98.           </li>
  99.           <li class="sp-item">
  100.             <img src="static/images/ms/ms-3.jpg" alt="">
  101.             <div class="jiage">￥<b>538</b></div>
  102.             <div><s>￥558</s></div>
  103.           </li>
  104.           <li class="sp-item">
  105.             <img src="static/images/ms/ms-4.jpg" alt="">
  106.             <div class="jiage">￥<b>2338</b></div>
  107.             <div><s>￥558</s></div>
  108.           </li>
  109.         </ul>
  110.       </div>
  111.       <!-- 推荐商品区 -->
  112.       <ul class="tj">
  113.         <li class="item">
  114.           <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  115.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  116.           <div class="price">
  117.             <div class="iconfont icon-rmb">79</div>
  118.             <div>看相似</div>
  119.           </div>
  120.         </li>
  121.         <li class="item">
  122.           <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  123.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  124.           <div class="price">
  125.             <div class="iconfont icon-rmb">79</div>
  126.             <div>看相似</div>
  127.           </div>
  128.         </li>
  129.         <li class="item">
  130.           <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  131.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  132.           <div class="price">
  133.             <div class="iconfont icon-rmb">79</div>
  134.             <div>看相似</div>
  135.           </div>
  136.         </li>
  137.         <li class="item">
  138.           <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  139.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  140.           <div class="price">
  141.             <div class="iconfont icon-rmb">79</div>
  142.             <div>看相似</div>
  143.           </div>
  144.           <li class="item">
  145.             <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  146.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  147.             <div class="price">
  148.               <div class="iconfont icon-rmb">79</div>
  149.               <div>看相似</div>
  150.             </div>
  151.           </li>
  152.           <li class="item">
  153.             <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  154.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  155.             <div class="price">
  156.               <div class="iconfont icon-rmb">79</div>
  157.               <div>看相似</div>
  158.             </div>
  159.           </li>
  160.           <li class="item">
  161.             <a href=""><img src="static/images/sp/sp-7.webp" alt="" /></a>
  162.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  163.             <div class="price">
  164.               <div class="iconfont icon-rmb">79</div>
  165.               <div>看相似</div>
  166.             </div>
  167.           </li>
  168.           <li class="item">
  169.             <a href=""><img src="static/images/sp/sp-8.webp" alt="" /></a>
  170.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  171.             <div class="price">
  172.               <div class="iconfont icon-rmb">79</div>
  173.               <div>看相似</div>
  174.             </div>
  175.           </li>
  176.         </li>
  177.       </ul>
  178.     </div>
  180.     <!-- 页脚 -->
  181.     <div class="footer">
  182.       <div>
  183.         <!-- 上面放图标 -->
  184.         <div class="iconfont icon-home"></div>
  185.         <!-- 下面放文本 -->
  186.         <span>首页</span>
  187.       </div>
  188.       <div>
  189.         <div class="iconfont icon-home"></div>
  190.         <span>分类</span>
  191.       </div>
  192.       <div>
  193.         <div class="iconfont icon-home"></div>
  194.         <span>京喜</span>
  195.       </div>
  196.       <div>
  197.         <div class="iconfont icon-home"></div>
  198.         <span>购物车</span>
  199.       </div>
  200.       <div>
  201.         <div class="iconfont icon-home"></div>
  202.         <span>未登录</span>
  203.       </div>
  204.     </div>
  205.   </body>
  206. </html>
  1. .ms{
  2.     background-color: #fff;
  3. }
  5. .ms .ms-text {
  6.     display: flex;
  7.     height: 3rem;
  8.     padding: 1rem;
  9.     align-items: center;
  10.     justify-content: space-between;
  11. }
  13. .ms-text .text-time{
  14.     display: flex;
  15.     align-items: center;
  16.     height: 2rem;
  17.     flex: 1;
  18. }
  19. .ms-text .gdms{
  20.     font-size: 1rem;
  21.     color: brown;
  22. }
  24. .text-time .zc{
  26.     color: #fff;
  27.     background-color: rgb(255, 0, 0);
  28.     border-radius:5rem ;
  29.     border: 1px solid rgb(255, 0, 0);
  30. }
  31. .text-time .tm{
  32.     width: 10rem;
  33.     text-align:right;
  34.     border-radius:5rem ;
  35.     border: 1px solid rgb(255, 0, 0);
  36.     margin-left: -3.5rem;
  37. }
  39. .sp {
  40.     display: flex;
  41.     margin: 1rem;
  42.     justify-content: space-between;
  43. }
  45. .sp .sp-item div{
  46.     text-align: center;
  47. }
  48. .sp .sp-item .jiage{
  49.     color: rgb(255, 0, 0);
  50. }
上一条：HTML表格案例《商品信息表》下一条：html前端常用控件的用法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多