search

博客列表 >210330 CSS grid布局仿写

210330 CSS grid布局仿写

xyphpblog
xyphpblog原创
2021年04月03日 09:31:59543浏览

原页面

仿写

  • index.css
  • header.css
  • nav.css
  • shop.css
  • recommend.css
  • grid.css
  • reset.css
  • demo1.html

index.css

  1. .header {
  2.   background-color: #ff5000;
  3.   color: #fff;
  4.   height: 87px;
  5.   position: fixed;
  6.   left: 0;
  7.   right: 0;
  8.   top: 0;
  9.   z-index: 100;
  10. }
  12. .main {
  13.   position: absolute;
  14.   top: 87px;
  15.   left: 0;
  16.   right: 0;
  17. }
  19. .row.divider1,
  20. .row.divider2,
  21. .row.divider3 {
  22.   text-align: center;
  23. }
  25. .row.divider1 .title-line {
  26.   background-color: #fff;
  27.   display: flex;
  28.   justify-content: space-evenly;
  29.   padding: 1rem 8%;
  30.   line-height: 4rem;
  31.   flex-flow: row nowrap;
  32. }

header.css

  1. .header {
  2.   display: flex;
  3.   flex-flow: row nowrap;
  4.   align-items: center;
  5. }
  7. .header > .logo {
  8.   flex: 3;
  9.   width: 9rem;
  10.   text-align: center;
  11.   font-weight: bolder;
  12.   font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
  13.     "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  14.   font-size: 3rem;
  15. }
  17. .header > .search {
  18.   background-color: #fff;
  19.   flex: 6;
  20.   display: flex;
  21. }
  23. .header .bar {
  24.   height: 3rem;
  25.   flex: 3rem;
  26.   padding-left: 1.5rem;
  27. }
  29. .header > .search .zoom {
  30.   color: #ff5000;
  32.   line-height: 3rem;
  33.   font-size: 2rem;
  34.   font-weight: 200;
  35.   padding-right: 1rem;
  36. }
  38. .header > .profile {
  39.   flex: 4;
  40.   display: flex;
  41.   flex-flow: row nowrap;
  42.   justify-content: center;
  43. }
  45. .header > .profile > .login {
  46.   display: flex;
  47.   flex-flow: row nowrap;
  48. }
  50. .header > .profile > .login .login-icon {
  51.   padding-right: 1rem;
  52. }
  54. .header > .profile > .login .login-icon img {
  55.   border-radius: 2rem;
  56.   width: 4rem;
  57.   height: 4rem;
  58. }
  60. .header > .profile > .login .login-right div:last-of-type {
  61.   font-size: 1.1rem;
  62.   font-weight: 200;
  63.   background-color: #fff0e8;
  64.   color: #ff5000;
  65.   text-align: center;
  66.   margin-top: 0.5rem;
  67. }
  69. .header > .barcode {
  70.   flex: 1;
  71.   display: flex;
  72.   flex-flow: column nowrap;
  73. }
  75. .header > .barcode div:first-of-type {
  76.   font-size: 3rem;
  77. }
  78. .header > .barcode div:last-of-type {
  79.   font-size: 1rem;
  80. }
  82. .header > .cart {
  83.   flex: 1;
  84.   display: flex;
  85.   flex-flow: column nowrap;
  86. }
  88. .header > .cart div:first-of-type {
  89.   font-size: 3rem;
  90. }
  91. .header > .cart div:last-of-type {
  92.   font-size: 1rem;
  93. }

nav.css

  1. .container .row.nav {
  2.   /* background-color: rgb(235, 0, 67); */
  3.   margin: 1rem 8%;
  4.   margin-top: 0;
  5.   gap: 0;
  6. }
  8. .container .row.nav .nav-left img {
  9.   height: 100%;
  10. }
  12. .container .row.nav .nav-left img {
  13.   width: 100%;
  14. }
  16. .container .row.nav .nav-middle {
  17.   display: flex;
  18.   flex-flow: column nowrap;
  19. }
  21. .container .row.nav .nav-middle img {
  22.   height: 100%;
  23.   max-width: 100%;
  24.   position: absolute;
  25. }
  27. .container .row.nav .nav-middle .middle1 {
  28.   height: 76.5%;
  29.   position: relative;
  30. }
  32. .container .row.nav .nav-middle .middle2 {
  33.   height: 23.5%;
  34.   position: relative;
  35. }
  37. .container .row.nav .nav-right {
  38.   display: flex;
  39.   flex-flow: column nowrap;
  40. }

shop.css

  1. .container .row.shop-recommend {
  2.   background-color: #fff;
  3.   margin: 1rem 8%;
  4.   margin-bottom: 0;
  6.   display: flex;
  7.   justify-content: space-between;
  8.   align-items: center;
  9.   padding-right: 1rem;
  10. }
  12. .container .row.shop-recommend img {
  13.   filter: invert(100%);
  14.   width: 30%;
  15. }
  17. .container .row.shop-recommend .shop-recommend-left {
  18.   padding: 1rem;
  19.   display: flex;
  20. }
  22. .container .row.shop-recommend .shop-recommend-left div {
  23.   color: rgba(0, 0, 0, 0.38);
  24.   display: flex;
  25.   flex-flow: column nowrap;
  26.   justify-content: center;
  27.   margin-left: 2rem;
  28. }
  30. .container .row.shop-recommend .shop-recommend-right {
  31.   color: rgba(0, 0, 0, 0.38);
  32. }
  34. /* images */
  35. .container .row.shop-image {
  36.   background-color: #fff;
  38.   margin: 1rem 8%;
  39.   margin-top: 0;
  40.   padding: 1rem 1rem;
  41. }
  43. .container .row.shop-image .shop-title {
  44.   padding-bottom: 1rem;
  45. }
  47. .container .row.shop-image .image-area {
  48.   display: grid;
  49.   grid-template-columns: repeat(3, auto);
  50.   gap: 0.1rem;
  51.   max-width: 100%;
  52. }
  54. .container .row.shop-image > div {
  55.   /* border: 1px solid; */
  56.   max-width: 100%;
  57. }
  59. .container .row.shop-image .image-area img:nth-of-type(2) {
  60.   grid-area: 2/1/3/2;
  61.   max-width: 100%;
  62. }
  64. .container .row.shop-image .image-area img:nth-of-type(3) {
  65.   grid-area: 1/2/3/3;
  66.   place-self: stretch;
  67.   max-width: 100%;
  68. }

recommend.css

  1. .container .row.recommend {
  2.   margin-top: 2rem;
  3.   gap: 1em;
  4. }
  6. .container .row.recommend img {
  7.   max-width: 100%;
  8. }
  10. .container .row.recommend .recommend-item .price {
  11.   display: flex;
  12.   flex-flow: row nowrap;
  13.   justify-content: space-between;
  14. }
  16. .container .row.recommend .recommend-item .price .left {
  17.   color: #ff5000;
  18. }
  20. .container .row.recommend .recommend-item .price .right {
  21.   color: rgba(0, 0, 0, 0.38);
  22. }

grid.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   display: grid;
  11.   place-content: center;
  12. }
  14. .container {
  15.   min-width: 80vw;
  16.   display: grid;
  17.   gap: 0.5em;
  18. }
  20. .container > .row {
  21.   display: grid;
  22.   grid-template-columns: repeat(12, 1fr);
  23.   min-height: 3em;
  24.   gap: 0.5em;
  25. }
  27. .container > .row > .item {
  28.   padding: 1em;
  29.   border: 1px solid;
  30. }
  32. .col-12 {
  33.   grid-area: auto / span 12;
  34. }
  35. .col-11 {
  36.   grid-area: auto / span 11;
  37. }
  38. .col-10 {
  39.   grid-area: auto / span 10;
  40. }
  41. .col-9 {
  42.   grid-area: auto / span 9;
  43. }
  44. .col-8 {
  45.   grid-area: auto / span 8;
  46. }
  47. .col-7 {
  48.   grid-area: auto / span 7;
  49. }
  50. .col-6 {
  51.   grid-area: auto / span 6;
  52. }
  53. .col-5 {
  54.   grid-area: auto / span 5;
  55. }
  56. .col-4 {
  57.   grid-area: auto / span 4;
  58. }
  59. .col-3 {
  60.   grid-area: auto / span 3;
  61. }
  62. .col-2 {
  63.   grid-area: auto / span 2;
  64. }
  65. .col-1 {
  66.   grid-area: auto / span 1;
  67. }

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: rgb(238, 238, 238);
  18.   font-size: 1.2rem;
  19. }
  21. html {
  22.   font-size: 10px;
  23. }
  25. .bar {
  26.   outline: none;
  27.   border: none;
  28.   border-radius: 0.2rem;
  29. }
  31. @media screen and (min-width: 480px) {
  32.   html {
  33.     font-size: 12px;
  34.   }
  35. }
  37. @media screen and (min-width: 640px) {
  38.   html {
  39.     font-size: 14px;
  40.   }
  41. }
  43. @media screen and (min-wdith: 720px) {
  44.   html {
  45.     font-size: 16px;
  46.   }
  47. }

demo1.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>taoobaoo</title>
  8.     <link rel="stylesheet" href="static/css/reset.css">
  9.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  10.     <link rel="stylesheet" href="static/css/index.css">
  11.     <link rel="stylesheet" href="static/css/header.css">
  12.     <link rel="stylesheet" href="static/css/grid.css">
  13.     <link rel="stylesheet" href="static/css/nav.css">
  14.     <link rel="stylesheet" href="static/css/shop.css">
  15.     <link rel="stylesheet" href="static/css/recommend.css">
  16. </head>
  17. <body>
  18.     <!-- header -->
  19.     <header class="header">
  20.         <!-- logo -->
  21.         <div class="logo">淘 宝 网</div>
  22.         <!-- search bar -->
  23.         <div class="search">
  24.             <input type="text" class="bar" placeholder="hehehe">
  25.             <div class="zoom iconfont icon-search"></div>
  26.         </div>
  27.         <!-- profile -->
  28.         <div class="profile">
  29.             <div class="login">
  30.                 <div class="login-icon"><img src="static/images/header/profile.jpg" alt=""></div>
  31.                 <div class="login-right">
  32.                     <div class="login-text">登录 / 免费注册</div>
  33.                     <div class="tao-coin">?领淘金币抵钱</div>
  34.                 </div>
  35.             </div>
  36.         </div>
  37.         <!-- barcode -->
  38.         <div class="barcode ">
  39.             <div class="barcode-icon iconfont icon-menu"></div>
  40.             <div class="barcode-text">淘宝lite</div>
  41.         </div>
  42.         <!-- shopping cart -->
  43.         <div class="cart">
  44.             <div class="cart-icon iconfont icon-shopping-cart"></div>
  45.             <div class="cart-text">购物车</div>
  46.         </div>
  47.     </header>
  48.     <!-- main -->
  49.     <main class="main">
  50.         <div class="container">
  51.             <!-- divider1 -->
  52.             <div class="row divider1">
  53.                 <div class="title-line col-12">
  54.                     <div class="left  iconfont icon-menu">商品分类</div>
  55.                     <div class="right">天猫 聚划算</div>
  56.                 </div>
  57.             </div>
  58.             <!-- 导航 -->
  59.             <div class="row nav">
  60.                 <!-- 导航左 -->
  61.                 <div class="nav-left col-2"><img src="static/images/nav/list.jpg" alt=""></div>
  62.                 <!-- 导航中 -->
  63.                 <div class="nav-middle col-8">
  64.                     <div class="middle1">
  65.                         <img src="static/images/category-right/1.jpg" alt="">
  66.                     </div>
  67.                     <div class="middle2">
  68.                         <img src="static/images/nav/bottom.png" alt="">
  69.                     </div>
  70.                 </div>
  71.                 <!-- 导航右 -->
  72.                 <div class="nav-right col-2">
  73.                     <img src="static/images/category-right/2.jpg" alt="">
  74.                     <img src="static/images/category-right/3.jpg" alt="">
  75.                 </div>
  76.             </div>
  77.             <!-- divider2 -->
  78.             <!-- <div class="row divider2">
  79.                 <div class="title-line col-12">天猫 聚划算</div>
  80.             </div> -->
  81.             <!-- 每日好店 -->
  82.             <!-- 每日好店标题部分 -->
  83.             <div class="row shop-recommend">
  84.                 <!-- 左边 -->
  85.                 <div class="shop-recommend-left">
  86.                     <img src="static/images/nice-shop/shop-title.jpg" alt="">
  87.                     <div>你可能喜欢的店铺</div>
  88.                 </div>
  89.                 <!-- 右边 -->
  90.                 <div class="shop-recommend-right">更多</div>
  91.             </div>
  92.             <!-- 每日好店 图片部分 -->
  93.             <div class="row shop-image">
  94.                 <!-- 每日好店 第一个 -->
  95.                 <div class="shop-item col-3">
  96.                     <div class="shop-title">万能市集</div>
  97.                     <div class="image-area">
  98.                         <img src="static/images/nice-shop/shoe1.jpg" alt="">
  99.                         <img src="static/images/nice-shop/shoe1.jpg" alt="">
  100.                         <img src="static/images/nice-shop/shoe3.jpg" alt="">
  101.                     </div>
  102.                 </div>
  103.                 <!--每日好店 第二个 -->
  104.                 <div class="shop-item col-3">
  105.                     <div class="shop-title">淘宝江湖</div>
  106.                     <div class="image-area">
  107.                         <img src="static/images/nice-shop/dress1.jpg" alt="">
  108.                         <img src="static/images/nice-shop/dress2.jpg" alt="">
  109.                         <img src="static/images/nice-shop/dress3.jpg" alt="">
  110.                     </div>
  111.                 </div>
  112.                 <!-- 每日好店 第三个 -->
  113.                 <div class="shop-item col-3">
  114.                     <div class="shop-title">深藏不露</div>
  115.                     <div class="image-area">
  116.                         <img src="static/images/nice-shop/string1.jpg" alt="">
  117.                         <img src="static/images/nice-shop/string2.jpg" alt="">
  118.                         <img src="static/images/nice-shop/string3.jpg" alt="">
  119.                     </div>
  120.                 </div>
  121.                 <!-- 每日好店 第四个 -->
  122.                 <div class="shop-item col-3">
  123.                     <div class="shop-title">高手林立</div>
  124.                     <div class="image-area">
  125.                         <img src="static/images/nice-shop/bag1.jpg" alt="">
  126.                         <img src="static/images/nice-shop/bag2.jpg" alt="">
  127.                         <img src="static/images/nice-shop/bag3.jpg" alt="">
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.             <!-- divider3 -->
  132.             <div class="row divider3">
  133.                 <div class="title-line col-12">
  134.                     <p>猜你喜欢</p>
  135.                     <p>實時推薦最適合你的寶貝</p>
  136.                 </div>
  137.             </div>
  138.             <!-- 猜你喜欢 -->
  139.             <!-- 第一行 -->
  140.             <div class="row recommend">
  141.                 <div class="col-1"></div>
  142.                 <div class="recommend-item col-2">
  143.                     <img src="static/images/recommend/1.jpg" alt="">
  144.                     <div class="desc">hehehe</div>
  145.                     <div class="price">
  146.                         <div class="left">$123</div>
  147.                         <div class="right">销量：0</div>
  148.                     </div>
  149.                 </div>
  150.                 <div class="recommend-item col-2">
  151.                     <img src="static/images/recommend/2.jpg" alt="">
  152.                     <div class="desc">hehehe</div>
  153.                     <div class="price">
  154.                         <div class="left">$123</div>
  155.                         <div class="right">销量：0</div>
  156.                     </div>
  157.                 </div>
  158.                 <div class="recommend-item col-2">
  159.                     <img src="static/images/recommend/3.jpg" alt="">
  160.                     <div class="desc">hehehe</div>
  161.                     <div class="price">
  162.                         <div class="left">$123</div>
  163.                         <div class="right">销量：0</div>
  164.                     </div>
  165.                 </div>
  166.                 <div class="recommend-item col-2">
  167.                     <img src="static/images/recommend/4.jpg" alt="">
  168.                     <div class="desc">hehehe</div>
  169.                     <div class="price">
  170.                         <div class="left">$123</div>
  171.                         <div class="right">销量：0</div>
  172.                     </div>
  173.                 </div>
  174.                 <div class="recommend-item col-2">
  175.                     <img src="static/images/recommend/5.jpg" alt="">
  176.                     <div class="desc">hehehe</div>
  177.                     <div class="price">
  178.                         <div class="left">$123</div>
  179.                         <div class="right">销量：0</div>
  180.                     </div>
  181.                 </div>
  182.                 <div class="col-1"></div>
  183.             </div>
  184.             <!-- 第二行 -->
  185.             <div class="row recommend">
  186.                 <div class="col-1"></div>
  187.                 <div class="recommend-item col-2">
  188.                     <img src="static/images/recommend/6.jpg" alt="">
  189.                     <div class="desc">hehehe</div>
  190.                     <div class="price">
  191.                         <div class="left">$123</div>
  192.                         <div class="right">销量：0</div>
  193.                     </div>
  194.                 </div>
  195.                 <div class="recommend-item col-2">
  196.                     <img src="static/images/recommend/7.jpg" alt="">
  197.                     <div class="desc">hehehe</div>
  198.                     <div class="price">
  199.                         <div class="left">$123</div>
  200.                         <div class="right">销量：0</div>
  201.                     </div>
  202.                 </div>
  203.                 <div class="recommend-item col-2">
  204.                     <img src="static/images/recommend/8.jpg" alt="">
  205.                     <div class="desc">hehehe</div>
  206.                     <div class="price">
  207.                         <div class="left">$123</div>
  208.                         <div class="right">销量：0</div>
  209.                     </div>
  210.                 </div>
  211.                 <div class="recommend-item col-2">
  212.                     <img src="static/images/recommend/9.jpg" alt="">
  213.                     <div class="desc">hehehe</div>
  214.                     <div class="price">
  215.                         <div class="left">$123</div>
  216.                         <div class="right">销量：0</div>
  217.                     </div>
  218.                 </div>
  219.                 <div class="recommend-item col-2">
  220.                     <img src="static/images/recommend/10.jpg" alt="">
  221.                     <div class="desc">hehehe</div>
  222.                     <div class="price">
  223.                         <div class="left">$123</div>
  224.                         <div class="right">销量：0</div>
  225.                     </div>
  226.                 </div>
  227.                 <div class="col-1"></div>
  228.             </div>
  229.             <!-- 第三行 -->
  230.             <div class="row recommend">
  231.                 <div class="col-1"></div>
  232.                 <div class="recommend-item col-2">
  233.                     <img src="static/images/recommend/11.webp" alt="">
  234.                     <div class="desc">hehehe</div>
  235.                     <div class="price">
  236.                         <div class="left">$123</div>
  237.                         <div class="right">销量：0</div>
  238.                     </div>
  239.                 </div>
  240.                 <div class="recommend-item col-2">
  241.                     <img src="static/images/recommend/12.webp" alt="">
  242.                     <div class="desc">hehehe</div>
  243.                     <div class="price">
  244.                         <div class="left">$123</div>
  245.                         <div class="right">销量：0</div>
  246.                     </div>
  247.                 </div>
  248.                 <div class="recommend-item col-2">
  249.                     <img src="static/images/recommend/13.webp" alt="">
  250.                     <div class="desc">hehehe</div>
  251.                     <div class="price">
  252.                         <div class="left">$123</div>
  253.                         <div class="right">销量：0</div>
  254.                     </div>
  255.                 </div>
  256.                 <div class="recommend-item col-2">
  257.                     <img src="static/images/recommend/14.webp" alt="">
  258.                     <div class="desc">hehehe</div>
  259.                     <div class="price">
  260.                         <div class="left">$123</div>
  261.                         <div class="right">销量：0</div>
  262.                     </div>
  263.                 </div>
  264.                 <div class="recommend-item col-2">
  265.                     <img src="static/images/recommend/15.webp" alt="">
  266.                     <div class="desc">hehehe</div>
  267.                     <div class="price">
  268.                         <div class="left">$123</div>
  269.                         <div class="right">销量：0</div>
  270.                     </div>
  271.                 </div>
  272.                 <div class="col-1"></div>
  273.             </div>
  274.             <!-- keep space -->
  275.             <div class="row"></div>
  276.             <div class="row"></div>
  277.         </div>
  278.     </main>
  279.     <!-- footer -->
  280.     <footer class="footer">
  281.     </footer>
  282. </body>
  283. </html>
上一条：【JS基础入门】JavaScript基础之值与引用传递、模板字面量、解构赋值、this指向、访问器属性、流程控制等知识点笔记下一条：立即执行函数 箭头函数等
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多