zoukankan      html  css  js  c++  java
  • 布局

    圣杯和双飞燕都是实现 3 栏布局的方式,即两边栏固定,中间自适应,不同的是对中间栏不被遮挡的处理方式不一样。

    圣杯:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style>
     7     *{
     8         margin: 0;
     9         padding: 0;
    10     }
    11     .container{
    12         padding: 0 300px 0 200px;
    13     }
    14     .left,.main,.right{
    15         min-height: 130px;
    16         float: left;
    17         position: relative;
    18     }
    19     .main{
    20         width: 100%;
    21         background-color: green;
    22     }
    23     .left{
    24         width: 200px;
    25         float: left;
    26         background-color: red;
    27         margin-left: -100%;
    28         left: -200px;
    29     }
    30     .right{
    31         width: 300px;
    32         background-color: blue;
    33         margin-left: -300px;
    34         right: -300px;
    35     }
    36     </style>
    37 </head>
    38 <body>
    39     <div class="container">
    40         <div class="main">main</div>
    41         <div class="left">left</div>
    42         <div class="right">right</div>
    43     </div>
    44 </body>
    45 </html>

    双飞燕:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
    
        }
        .left,.main,.right{
            float: left;
            min-height: 130px;
        }
        .main{
            background-color: blue;
            width: 100%;
        }
        .content{
            margin: 0 300px 0 200px;
        }
        .left{
            background-color: green;
            width: 200px;
            margin-left: -100%;
        }
        .right{
            background-color: red;
            width: 300px;
            margin-left: -300px;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="main">
                <div class="content">main</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>
    </html>

    Flex 布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
            min-height: 130px;
        }
        .main{
            flex-grow: 1;
            background-color: green;
        }
        .left{
            order: -1;
            flex-basis: 200px;
            background-color: red;
        }
        .right{
            flex-basis: 300px;
            background-color: blue;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="main">main</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>
    </html>

    绝对定位布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
        }
        .main,.left,.right{
            min-height: 130px;
            position: absolute;
            top: 0;
        }
        .main{
            /*margin: 0 300px 0 200px;*/
            right: 300px;
            left: 200px;
            background-color: green;
        }
        .left{
            left: 0;
            width: 200px;
            background-color: red;
        }
        .right{
            right: 0;
            width: 300px;
            background-color: blue;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="main">main</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>
    </html>
  • 相关阅读:
    如何用kaldi做孤立词识别三
    如何用kaldi做孤立词识别二
    脚本注释3
    [转] kaldi中FST的可视化-以yesno为例
    如何用kaldi做孤立词识别-初版
    [转]语言模型训练工具SRILM
    [转]kaldi 神经网络
    [转]kaldi ASR: DNN训练
    [转]Kaldi命令词识别
    [转] 如何用kaldi训练好的模型做特定任务的在线识别
  • 原文地址:https://www.cnblogs.com/jiujiaoyangkang/p/9389100.html
Copyright © 2011-2022 走看看