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

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

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

10.29

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

  1. .col-12 {
  2. grid-column: span 12;
  3. }
  4. .col-11 {
  5. grid-column: span 11;
  6. }
  7. .col-10 {
  8. grid-column: span 10;
  9. }
  10. .col-9 {
  11. grid-column: span 9;
  12. }
  13. .col-8 {
  14. grid-column: span 8;
  15. }
  16. .col-7 {
  17. grid-column: span 7;
  18. }
  19. .col-6 {
  20. grid-column: span 6;
  21. }
  22. .col-5 {
  23. grid-column: span 5;
  24. }
  25. .col-4 {
  26. grid-column: span 4;
  27. }
  28. .col-3 {
  29. grid-column: span 3;
  30. }
  31. .col-2 {
  32. grid-column: span 2;
  33. }
  34. .col-1 {
  35. grid-column: span 1;
  36. }
12列栅格布局组成的页面

css

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

html

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

案例图片

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议