zoukankan      html  css  js  c++  java
  • html5 css练习,弹性三栏布局

    *{
        margin: 0;
        padding: 0;
    }

    body,html{
         100%;
        height: 100%;
            font: bold 24px 隶书;
    }

    header,footer{
        background: rgba(30,10,10,0.6);
        padding: 15px;
        text-align: center;
        line-height: 2em;
        color: #fff;
    }

    section{
        background: rgba(5,5,5,0.5);
        flex-grow: 1;
        display: flex;
        flex-flow: row;
    }

    article{
        background: orange;
        min- 500px;
        flex-grow: 1;
    }
    nav,aside{
        background: rgba(80,20,20,0.5);
         180px;
    }
    body{
        display:flex;
        flex-flow: column;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>弹性三列布局</title>
        <link rel="stylesheet" type="text/css" href="style15.css">
    </head>
    <body>
    <header>头部</header>
    <section>
        <nav>左导航</nav>
    <article>内容部分</article>
        <aside>右边栏</aside>
    </section>
    <footer>底部</footer>


    </body>
    </html>

    天道酬勤,厚积薄发。 君子之行,静以修身,俭以养德。 非淡泊无以明志,非宁静无以致远。 如有恒,何须三更起,半夜眠;最怕莫,三天打鱼两天晒网,竹篮打水一场空。
  • 相关阅读:
    常用dos命令
    反射
    干货|技术小白如何在45分钟内发行通证(TOKEN)并上线交易(附流程代码
    基于以太坊发布属于自己的数字货币(代币)完整版
    基于以太坊实现代币发布
    FTRL的理解
    FM-分解机模型详解
    深度学习总结
    DIN
    git上传新项目
  • 原文地址:https://www.cnblogs.com/houweidong/p/9783667.html
Copyright © 2011-2022 走看看