search

博客列表 >12列栅格布局的实现的页面

12列栅格布局的实现的页面

YwQ
YwQ原创
2020年11月02日 15:33:13715浏览

10.29

深刻理解grid，实现12列栅格布局的原理与实现，并用他写一个页面。

  1.   .col-12 {
  2.     grid-column: span 12;
  3.   }
  5.   .col-11 {
  6.     grid-column: span 11;
  7.   }
  9.   .col-10 {
  10.     grid-column: span 10;
  11.   }
  13.   .col-9 {
  14.     grid-column: span 9;
  15.   }
  17.   .col-8 {
  18.     grid-column: span 8;
  19.   }
  21.   .col-7 {
  22.     grid-column: span 7;
  23.   }
  25.   .col-6 {
  26.     grid-column: span 6;
  27.   }
  29.   .col-5 {
  30.     grid-column: span 5;
  31.   }
  33.   .col-4 {
  34.     grid-column: span 4;
  35.   }
  37.   .col-3 {
  38.     grid-column: span 3;
  39.   }
  41.   .col-2 {
  42.     grid-column: span 2;
  43.   }
  45.   .col-1 {
  46.     grid-column: span 1;
  47.   }
12列栅格布局组成的页面

css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.   }
  7.   body {
  8.     min-width: 98vw;
  9.     min-height: 100vh;
  10.     display: grid;
  11.     place-content: center;
  12.   }
  13.   a{text-decoration: none;
  14. color: #333;}
  16.   .container {
  17.     display: grid;
  18.     min-width: 98vw;
  19.     gap: 1em;
  20.   }
  21.   .item{
  22.     background-color: aquamarine;
  23.     width: 100%;
  24.     height: 100%;
  25.   }
  26.   .container > .top,header,.banner,main,footer {
  27.     display: grid;
  28.     grid-template-columns: repeat(12, 1fr);
  29.     gap: 0.5em;
  30.   }
  31.   header,.banner,main{
  32.       width: 80vw;
  33.       margin: auto;
  34.     }
  35.   .container > .top  {
  36.     font-size: 0.75em;
  37.     min-height: 3vh;
  38.     line-height: 3vh;
  39.     background-color: #ccc;
  40.   }
  41.   .container > .top >.item  {
  42.     background-color: #ccc;
  43.   }
  44.   .container > .top >.item > .top_left {
  45.     text-align: left;
  46.     margin-left: 10em;
  47.   }
  48.   .container > .top >.item > .top_right {
  49.     text-align: right;
  50.     margin-right: 10em;
  51.   }
  52.   .container > header {
  53.     min-height: 15vh;
  54.   }
  56.   .container > .banner {
  57.     min-height: 50vh;
  58.   }
  59.   .container > main {
  60.     min-height: 30vh;
  61.   }
  62.   .container > footer {
  63.     min-height: 30vh;
  64.   }
  65.  .item {
  66.     text-align: center;
  67.   }

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  11. <body>
  12.     <div class="container">
  13.         <div class="top">
  14.             <span class="item col-6">
  15.                 <div class="top_left">
  16.                     <a href="">欢迎来到xxx&nbsp;</a>
  17.                     <a href="">|&nbsp;商务中心&nbsp;</a>
  18.                     <a href="">|&nbsp;站内信(0)&nbsp;</a>
  19.                     <a href="">|&nbsp;新交谈(0)&nbsp;</a>
  20.                     <a href="">|&nbsp;退出登录&nbsp;</a>
  21.                 </div>
  23.             </span>
  24.             <span class="item col-6">
  25.                 <div class="top_right">
  26.                     <a href="">买家中心&nbsp;&nbsp;</a>
  27.                     <a href="">|&nbsp;&nbsp;卖家中心&nbsp;&nbsp;</a>
  28.                     <a href="">|&nbsp;&nbsp;客户服务&nbsp;&nbsp;</a>
  29.                     <a href="">|&nbsp;&nbsp;我的采购(2)&nbsp;&nbsp;</a>
  30.                 </div>
  31.             </span>
  32.         </div>
  34.         <header>
  35.             <span class="item col-3">
  36.                 <div class="logo">logo</div>
  37.             </span>
  38.             <span class="item col-7">
  39.                 <div class="search">search</div>
  40.             </span>
  41.             <span class="item col-2">
  42.                 <div class="vx">vx</div>
  43.             </span>
  44.         </header>
  45.         <div class="banner">
  46.             <span class="item col-2">side</span>
  47.             <span class="item col-6">banner</span>
  48.             <span class="item col-2">assbanner</span>
  49.             <span class="item col-2">side</span>
  50.         </div>
  51.         <main>
  52.             <span class="item col-3">main</span>
  53.             <span class="item col-3">main</span>
  54.             <span class="item col-3">main</span>
  55.             <span class="item col-3">main</span>
  56.         </main>
  57.         <footer>
  58.             <span class="item col-12">banner</span>
  59.         </footer>
  60.     </div>
  61. </body>
  63. </html>

案例图片

上一条：栅格布局简单理解下一条：mysql建库建表语句
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多