zoukankan      html  css  js  c++  java
  • css grid页面骨架布局

           * {
           margin: 0;
           padding: 0;
          }
            html,
            body,
            .container {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            
            .container {
                display: grid; /* 开启grid布局 */
                grid-template-columns: 1fr repeat(3, 3fr); /* 4列 */
                grid-template-rows: 1fr 12fr 1fr; /* 3行 */
                /* 定义区域 */
                grid-template-areas: "header header header header"
                                     "aside main main main"
                                     "footer footer footer footer";
            }
            
            header {
                background: skyblue;
                grid-area: header;
            }
            
            aside {
                background: slateblue;
                grid-area: aside;
            }
            
            main {
                background: orchid;
                grid-area: main;
            }
            
            footer {
                background: salmon;
                grid-area: footer;
            }
    <div class="container">
        <header>header</header>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
    为之则易,不为则难。
  • 相关阅读:
    新生题目集
    C语言课程设计
    Java学习-8
    Java学习-7
    Java学习-6
    Java学习-5
    HTML学习
    Java学习-4
    强大的项目管理工具maven
    java学习-3
  • 原文地址:https://www.cnblogs.com/coderDemo/p/13389836.html
Copyright © 2011-2022 走看看