zoukankan      html  css  js  c++  java
  • 圣杯布局(2)>>>>>

    (2)利用弹性盒实现圣杯布局

    HTML

     1 <body>
     2     <div class="box">
     3         <header>header</header>
     4         <section>
     5             <!--与定位方法实现圣杯的区别, 这里的布局顺序正常 -->
     6             <aside>1</aside>
     7             <section>2</section>
     8             <article>3</article>
     9         </section>
    10         <footer>footer</footer>
    11     </div>
    12 </body>

    CSS

     1 <style>
     2         * {
     3             margin: 0;
     4             padding: 0;
     5             box-sizing: border-box;
     6         }
     7         html,
     8         body {
     9             height: 100%;
    10         }
    11         body {
    12             background: #ccc;
    13         }
    14         .box {
    15             width: 100%;
    16             height: 100%;
    17             display: flex;
    18             flex-direction: column;
    19         }
    20         .box>header {
    21             height: 100px;
    22             width: 100%;
    23             font-size: 50px;
    24             background: tomato;
    25         }
    26         .box>section {
    27             flex: 1;
    28             background: yellow;
    29             display: flex;
    30         }
    31         .box>section aside {
    32             width: 200px;
    33             background: #0ff;
    34             font-size: 150px;
    35         }
    36         .box>section section {
    37             background: #0cc;
    38             flex: 1;
    39             font-size: 150px;
    40         }
    41         .box>section article {
    42             width: 200px;
    43             font-size: 150px;
    44             background: #0ff;
    45         }
    46         .box>footer {
    47             height: 100px;
    48             width: 100%;
    49             font-size: 50px;
    50             background: tomato;
    51         }
    52     </style>

    效果:

  • 相关阅读:
    scrapy高级操作
    scrapy多url爬取
    scrapy基础使用
    selenuim
    数据解析
    python字典转为对象,用"."方式访问对象属性
    python AES.MODE_ECB(128位) pkcs5padding 加密算法
    maven
    maven在idea中的配置
    idea使用技巧
  • 原文地址:https://www.cnblogs.com/jny1990/p/10955475.html
Copyright © 2011-2022 走看看