欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

圣杯布局(grid版)

程序员文章站 2022-03-07 18:42:55
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="UTF-8" />
    5. 

  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>圣杯布局(grid版)</title>
    8. 

  8.     <style>
    9. 

  9.         * {
    10. 

  10.             margin: 0;
    11. 

  11.             padding: 0;
    12. 

  12.             box-sizing: border-box;
    13. 

  13.         }
    14. 

  14.         body * {
    15. 

  15.             background-color: chartreuse;
    16. 

  16.         }
    17. 

  17.         body {
    18. 

  18.             display: grid;
    19. 

  19.             grid-template-columns: 200px minmax(400px, 1fr) 200px;
    20. 

  20.             grid-template-rows: 10em minmax(calc(100vh - 20em - 0.6em), 1fr) 10em;
    21. 

  21.             gap: 0.3em;
    22. 

  22.         }
    23. 

  23.         header,
    24. 

  24.         footer {
    25. 

  25.             grid-column: span 3;
    26. 

  26.         }
    27. 

  27.     </style>
    28. 

  28.     </head>
    29. 

  29.     <body>
    30. 

  30.         <header>页眉</header>
    31. 

  31.         <aside>左侧</aside>
    32. 

  32.         <main>主题</main>
    33. 

  33.         <aside>右侧</aside>
    34. 

  34.         <footer>页脚</footer>
    35. 

  35.     </body>
    36. 

  36. </html>
    37.

上一篇： php return什么意思

下一篇： css的color属性有继承性吗？

推荐阅读