search

博客列表 >210326 flex布局 仿写

210326 flex布局 仿写

xyphpblog
xyphpblog原创
2021年03月31日 19:10:54440浏览

  • index.html
  • index.css
  • reset.css
  • header.css
  • nav.css
  • miaosha.css
  • recommend.css
  • footer.css

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  9.     <link rel="stylesheet" href="static/css/index.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/miaosha.css">
  14.     <link rel="stylesheet" href="static/css/recommed.css">
  16. </head>
  17. <body>
  18.     <!-- header -->
  19.     <header class="header">
  20.         <!-- menu icon -->
  21.         <div class="menu iconfont icon-menu"></div>
  22.         <!-- search bar -->
  23.         <div class="search">
  24.             <div class="logo">JD</div>
  25.             <div class="zoom iconfont icon-search"></div>
  26.             <input type="text" class="words" value="移动硬盘500G" name="" id="">
  27.         </div>
  28.         <!-- login button -->
  29.         <a href="" class="login">登录</a>
  30.     </header>
  31.     <!-- main -->
  32.     <main class="main">
  33.         <!-- main nav area -->
  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>
  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="miaosha">
  78.             <!-- 秒杀区顶部 -->
  79.             <div class="miaosha-top">
  80.                 <div class="left">
  81.                     <div class="title">京东秒杀</div>
  82.                     <div class="venue-combo">
  83.                         <div class="venue-hour">20点场</div>
  84.                         <div class="venue-time">01:39:28</div>
  85.                     </div>
  86.                 </div>
  87.                 <div class="right">更多秒杀 <span>&nbsp;>&nbsp; </span></div>
  89.             </div>
  90.             <!-- 秒杀区主体 -->
  91.             <ul class="miaosha-body">
  92.                 <li class="item">
  93.                     <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  94.                     <div class="iconfont icon-rmb">338</div>
  95.                     <div class="iconfont icon-rmb">558</div>
  96.                 </li>
  97.                 <li class="item">
  98.                     <a href=""><img src="static/images/ms/ms-2.jpg" alt=""></a>
  99.                     <div class="iconfont icon-rmb">338</div>
  100.                     <div class="iconfont icon-rmb">338</div>
  101.                 </li>
  102.                 <li class="item">
  103.                     <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  104.                     <div class="iconfont icon-rmb">338</div>
  105.                     <div class="iconfont icon-rmb">338</div>
  106.                 </li>
  107.                 <li class="item">
  108.                     <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
  109.                     <div class="iconfont icon-rmb">338</div>
  110.                     <div class="iconfont icon-rmb">338</div>
  111.                 </li>
  112.             </ul>
  113.         </div>
  114.         <!-- 推荐区 -->
  115.         <ul class="recommend">
  116.             <li class="item">
  117.                 <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  118.                 <p>商品介绍哈哈</p>
  119.                 <div class="price">
  120.                     <div class="iconfont icon-rmb">138</div>
  121.                     <div>看相似</div>
  122.                 </div>
  123.             </li>
  124.             <li class="item">
  125.                 <a href=""><img src="static/images/sp/sp-3.webp" alt=""></a>
  126.                 <p>商品介绍哈哈</p>
  127.                 <div class="price">
  128.                     <div class="iconfont icon-rmb">138</div>
  129.                     <div>看相似</div>
  130.                 </div>
  131.             </li>
  132.             <li class="item">
  133.                 <a href=""><img src="static/images/sp/sp-2.webp" alt=""></a>
  134.                 <p>商品介绍哈哈</p>
  135.                 <div class="price">
  136.                     <div class="iconfont icon-rmb">138</div>
  137.                     <div>看相似</div>
  138.                 </div>
  139.             </li>
  140.             <li class="item">
  141.                 <a href=""><img src="static/images/sp/sp-2.webp" alt=""></a>
  142.                 <p>商品介绍哈哈</p>
  143.                 <div class="price">
  144.                     <div class="iconfont icon-rmb">138</div>
  145.                     <div>看相似</div>
  146.                 </div>
  147.             </li>
  148.         </ul>
  149.     </main>
  150.     <footer class="footer">
  151.         <div>
  152.             <div class="iconfont icon-home"></div>
  153.             <div>首页</div>
  154.         </div>
  155.         <div>
  156.             <div class="iconfont icon-layers"></div>
  157.             <div>分类</div>
  158.         </div>
  159.         <div>
  160.             <div class="iconfont icon-xiangmu"></div>
  161.             <div>京喜</div>
  162.         </div>
  163.         <div>
  164.             <div class="iconfont icon-shopping-cart"></div>
  165.             <div>购物车</div>
  166.         </div>
  167.         <div>
  168.             <div class="iconfont icon-user"></div>
  169.             <div>未登录</div>
  170.         </div>
  171.     </footer>
  172. </body>
  173. </html>

index.css

  1. /* @import url("reset.css"); */
  2. @import "reset.css";
  4. .header {
  5.   background-color: #e43130;
  6.   color: #fff;
  7.   height: 4.4rem;
  8.   /* 固定header在顶部 */
  9.   position: fixed;
  10.   top: 0;
  11.   left: 0;
  12.   right: 0;
  13.   /* 保证在最前端 */
  14.   z-index: 1000;
  15. }
  17. .footer {
  18.   background-color: rgb(255, 250, 250);
  19.   color: rgb(131, 129, 129);
  20.   height: 4.4rem;
  21.   /* 固定header在顶部 */
  22.   position: fixed;
  23.   bottom: 0;
  24.   left: 0;
  25.   right: 0;
  26.   /* 保证在最前端 */
  27.   z-index: 100;
  28. }
  30. .main {
  31.   /* 主题绝对定位，防止被header, footer遮挡 */
  32.   position: absolute;
  33.   top: 4.4rem;
  34.   left: 0;
  35.   right: 0;
  36.   /* 无效， 不知道为毛 */
  37.   /* bottom: 4.4rem; */
  38.   /* main添加padding-bottom 无法解决底部遮挡，需要推荐部分添加 */
  39.   /* padding-bottom: 50rem; */
  40.   /* 保证在最前端 */
  41.   z-index: 100;
  42. }

reset.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. li {
  8.   list-style: none;
  9. }
  11. a {
  12.   text-decoration: none;
  13.   color: #7b7b7b;
  14. }
  16. body {
  17.   background-color: #f6f6f6;
  18. }
  20. html {
  21.   font-size: 10px;
  22. }
  24. body {
  25.   font-size: 1.6rem;
  26. }
  28. @media screen and (min-width: 480px) {
  29.   html {
  30.     font-size: 12px;
  31.   }
  32. }
  34. @media screen and (min-width: 640px) {
  35.   html {
  36.     font-size: 14px;
  37.   }
  38. }
  40. @media screen and (min-width: 720px) {
  41.   html {
  42.     font-size: 16px;
  43.   }
  44. }

header.css

  1. .header {
  2.   display: flex;
  3.   flex-flow: row nowrap;
  4.   align-items: center;
  5. }
  7. .header .menu {
  8.   flex: 1;
  9.   text-align: center;
  10.   font-size: 2.5rem;
  11. }
  13. .header .login {
  14.   flex: 1;
  15.   color: white;
  16.   text-align: center;
  17. }
  19. .header .search {
  20.   flex: 6;
  21.   background-color: #fff;
  22.   border-radius: 10rem;
  23.   display: flex;
  24. }
  26. .header .search .logo {
  27.   color: red;
  28.   text-align: center;
  29.   line-height: 2rem;
  30.   flex-basis: 4rem;
  31. }
  33. .header .search .zoom {
  34.   color: #ccc;
  35.   border-left: 1px solid;
  36.   text-align: center;
  37.   line-height: 2rem;
  38.   flex-basis: 4rem;
  39. }
  41. .header .search .words {
  42.   /* flex: auto; */
  43.   font-size: 1.2rem;
  44.   color: #aaa;
  45.   border: none;
  46.   outline: none;
  47. }

nav.css

  1. /* images */
  2. .main .nav img {
  3.   height: 4rem;
  4.   width: 4rem;
  5. }
  7. /* nav area */
  8. .main .nav {
  9.   /* border: 1px solid white; */
  10.   display: flex;
  11.   flex-flow: row wrap;
  12.   padding: 1rem;
  13. }
  15. .main .nav li {
  16.   flex: 1 1 20%;
  17.   display: flex;
  18.   flex-flow: column nowrap;
  19.   align-items: center;
  20.   /* padding: 1rem; */
  21. }

miaosha.css

  1. .main .miaosha {
  2.   background-color: #fff;
  3.   margin: 1rem 2.2rem;
  4.   padding: 1rem;
  5.   border: 1px solid #fff;
  6.   border-radius: 2rem;
  7.   /* display: flex; */
  8.   /* flex-flow: row nowrap; */
  9. }
  11. .main .miaosha .miaosha-top {
  12.   display: flex;
  13.   justify-content: space-between;
  14.   margin-bottom: 2rem;
  15. }
  17. .main .miaosha .miaosha-top .left {
  18.   display: flex;
  19. }
  21. .main .miaosha .miaosha-top .left .venue-combo {
  22.   display: flex;
  23.   /* justify-content: center;
  24.   align-items: center; */
  25. }
  27. .main .miaosha .miaosha-top .left .venue-combo .venue-hour {
  28.   color: red;
  29.   margin: 0 1rem;
  30. }
  32. .main .miaosha .miaosha-top .left .venue-combo .venue-time {
  33.   color: white;
  34.   background-color: red;
  35.   margin: 0 1rem;
  36. }
  38. .main .miaosha .miaosha-top .right {
  39.   color: red;
  40. }
  42. .main .miaosha .miaosha-top .right > span {
  43.   color: white;
  44.   background-color: red;
  45.   border-radius: 5rem;
  46. }
  48. .main .miaosha .miaosha-body {
  49.   display: flex;
  50.   flex-grow: row nowrap;
  51.   justify-content: space-between;
  52. }
  54. .main .miaosha .miaosha-body .item {
  55.   display: flex;
  56.   flex-flow: column nowrap;
  57.   align-items: center;
  58.   /* text-align: center; */
  59. }
  61. .main .miaosha .miaosha-body .item img {
  62.   height: 8rem;
  63.   width: 8rem;
  64. }
  66. .main .miaosha .miaosha-body .item div:first-of-type {
  67.   color: red;
  68.   font-weight: bolder;
  69. }
  71. .main .miaosha .miaosha-body .item div:last-of-type {
  72.   color: #666;
  73.   text-decoration: line-through;
  74.   text-decoration-color: #666;
  75. }

recommend.css

  1. .main .recommend {
  2.   display: flex;
  3.   flex-flow: row wrap;
  4.   justify-content: center;
  5.   /* border: 1px solid; */
  6.   /* margin-bottom 无法解决底部遮挡 */
  7.   /* margin-bottom: 20rem; */
  8.   padding-bottom: 4.4rem;
  9. }
  11. .main .recommend .item {
  12.   display: flex;
  13.   flex-flow: column nowrap;
  14.   /* ************ */
  15.   /* flex-basis: 50%; */
  16.   flex-basis: calc(50% - 3rem);
  17.   padding: 1rem;
  18.   background-color: #fff;
  19.   margin-left: 1rem;
  20.   margin-bottom: 1rem;
  21.    /* 图没了价格也在item 底部 */
  22.   justify-content: flex-end;
  23. }
  25. .main .recommend .item img {
  26.   width: 100%;
  27.   height: 100%;
  28. }
  30. /* 右边商品单独设置外边距 even / 2n */
  31. .main .recommend .item:nth-of-type(even) {
  32.   margin-right: 1rem;
  33. }
  35. .main .recommend .item .price {
  36.   display: flex;
  37.   justify-content: space-between;
  38. }
  40. .main .recommend .item .price div:first-of-type {
  41.   color: red;
  42.   font-weight: bolder;
  43.   font-size: x-large;
  44. }
  46. .main .recommend .item .price div:last-of-type {
  47.   background-color: #7675752c;
  48.   font-weight: lighter;
  49.   font-size: smaller;
  50.   border-radius: 1rem;
  51. }

footer.css

  1. .footer {
  2.   display: flex;
  3.   flex-flow: row nowrap;
  4.   justify-content: space-around;
  5.   align-items: center;
  6. }
  8. .footer > div {
  9.   display: flex;
  10.   flex-flow: column nowrap;
  11. }
  13. .footer > div .iconfont {
  14.   font-size: 2rem;
  15.   text-align: center;
  16. }
  18. .footer > div > div:last-of-type {
  19.   font-size: 1rem;
  20. }
  22. .footer > div:hover {
  23.   cursor: pointer;
  24. }
上一条：0114 购物车计算金额下一条：【JS基础入门】初识JavaScript是什么？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多