zoukankan      html  css  js  c++  java
  • 结构与布局-紧贴底部的页脚

    <style>
            *{margin:0;padding: 0;}
            /*第一种方法*/
            /*body{color:#fff;text-align: center;}
            header{background: #000;height:3.5em;}
            main{
                min-height: calc(100vh - 3.5em - 3.5em);
                box-sizing: border-box;
                background: #0b7c4b;
            }
            footer{background: #103582;height:3.5em;}*/
            /*第二种方法*/
            body{display: flex;flex-flow: column;text-align: center;}
            main{flex:1;background: #103582;min-height: 100vh;}
            footer{background: #000;color:#fff;}


        </style>
    <header>
            <h2>41.紧贴底部的页脚</h2>
            <p>我是头部</p>
        </header>
        <main>
         <h2>I am main</h2>
            <h2>what can be the meaning of that</h2>
            <p>emphatic exclamation </p>
        </main>
        <footer>
         <p> Iam footer</p>
            <p>@2018 no right reserve.</p>
            <p>made with by song</p>
        </footer>
     
  • 相关阅读:
    jmeter实战
    安卓学习进度_11
    安卓学习进度_10
    安卓学习进度_9
    安卓学习进度_8
    安卓软件学习进度_7
    安卓学习进度_6
    安卓软件学习进度_5
    安卓软件学习进度_4
    安卓软件学习进度_3
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/10742262.html
Copyright © 2011-2022 走看看