zoukankan      html  css  js  c++  java
  • 圣杯布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{
            margin:0;padding:0;
        }
        .container{
            display: flex;
            height: 100vh;
            flex-direction: column;
        }
        header{
            background: #000;
        }
        section{
            flex:1;
            background: pink;
            display: flex;
        }
        footer{
            background: #000;
        }
        .left{
            background: red;
            flex:0 0 100px;
        }
        .center{
            flex:1;
            background: blue;
        }
        .right{
            flex:0 0 100px;
            background: red;
        }
        </style>
    </head>
    <body>

    <div class='container'>
            
        <header>头部</header>
        <section>
            <div class='left'>左</div>
            <div class='center'>中</div>
            <div class='right'>右</div>
        </section>
        <footer>底部</footer>

    </div>
        
    </body>
    </html>
  • 相关阅读:
    vue——项目技术储备
    Framework7—— 混合开发
    CSS——常见的问题
    Vue——常见问题
    Vue——使用 watch 注意项
    Node——微服务架构(二)
    C——基本词汇
    Go——空接口与断言
    Node——PM2
    Vue——组件异步加载与路由懒加载
  • 原文地址:https://www.cnblogs.com/1609359841qq/p/12967822.html
Copyright © 2011-2022 走看看