1.自己制作栅格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .grid{
            width:100%;
            
        }
        .grid *{box-sizing: border-box;}
        
        .row:before,
        .row:after{
            content:'';
            display:table;
            clear: both;
        }

        [class*='col-']{
            float:left;
            min-height:1px;
            width:16.66%;
            box-sizing: border-box;
            
        }
        .col-1 { width: 8.33333333%; }
        .col-2 { width: 16.66666667%; }
        .col-3 { width: 25%; }
        .col-4 { width: 33.33333333%; }
        .col-5 { width: 41.66666667%; }
        .col-6 { width: 50%; }
        .col-7 { width: 58.33333333%; }
        .col-8 { width: 66.66666667%; }
        .col-9 { width: 75%; }
        .col-10 { width: 83.33333333%; }
        .col-11 { width: 91.66666667%; }
        .col-12 { width: 100%; }

        @media (min-width: 768px) {
          .container {
            width: 750px;
          }
        }
        @media (min-width: 992px) {
          .container {
            width: 970px;
          }
        }
        @media (min-width: 1200px) {
          .container {
            width: 1170px;
          }
        }

        .col-o-1 { margin-left: 8.33333333%; }
        .col-o-2 { margin-left: 16.66666667%; }
        .col-o-3 { margin-left: 25%; }
        
        /* 网站统一边距规范*/
        .pl8{ padding-left: 8px;}
        .pl10{ padding-left: 10px;}
        .pl20{  padding-left: 20px;}

        .pr8{ padding-right: 8px;}
        .pr10{ padding-right: 10px;}
        .pr20{  padding-right: 20px;}

        .pt8{ padding-right: 8px;}
        .pt10{ padding-right: 10px;}
        .pt20{  padding-right: 20px;}

        .pb8{ padding-right: 8px;}
        .pb10{ padding-right: 10px;}
        .pb20{  padding-right: 20px;}
        

        .ml8{ margin-left: 8px;}
        .ml10{ margin-left: 10px;}
        .ml20{  margin-left: 20px;}

        .mr8{ margin-right: 8px;}
        .mr10{ margin-right: 10px;}
        .mr20{  margin-right: 20px;}

        .mt8{ margin-right: 8px;}
        .mt10{ margin-right: 10px;}
        .mt20{  margin-right: 20px;}

        .mb8{ margin-right: 8px;}
        .mb10{ margin-right: 10px;}
        .mb20{  margin-right: 20px;}
        

        .text{
            width: 500px;
            height: 600px;
            border: 1px solid red;
        }
        .sidebar{
            height: 300px;
            border: 1px solid blue;
        }
        .text1{
            border: 1px solid yellow;
            height: 300px;
            
        }
        .text2{
            border: 1px solid red;
            height: 200px;
        }

        


    </style>
</head>
<body>

<div class="test" style="width:600px;height:600px;">
    <div class="row mt20">
        <div class="col-6 pt10 pr10 pb10 pl20" style="height:200px;">
            <div style="height:30px;line-height: 30px;">
                这是一个标题
            </div>
            <div class="row mt10" style="height:50px;">
                <div class="col-10">11</div>
                <div class="col-2">22</div>
            </div>

        </div>
        <div class="col-6 pt10 pr10 pb10 pl20">bb</div>
        
    </div>
</div>
<div class="mydemo">
    <div class="row" height="3000">
        text

    </div>
    <div class="row">
        <div class="col-4" height="300px">side</div>
        <div class="col-8" height="300px">main</div>
    </div>
</div>
<div class="text">
    <div class="row">
        <div class="col-2 sidebar">sidebar</div>
        <div class="col-10">
            <div class="row">
                <div class="col-4 text1">
                    <div class="text2"></div>
                </div>
                <div class="col-4 text1" ><div class="text2"></div></div>
                <div class="col-4 text1"><div class="text2"></div></div>
            </div>
        </div>
    </div>
</div>
        <div class="grid outline">
                <div class="row">
                    <div class="col-2"><p>col-1</p></div> 
                    <div class="col-2"><p>col-1</p></div> 
                    <div class="col-2"><p>col-1</p></div> 
                    <div class="col-2"><p>col-1</p></div> 
                    <div class="col-2"><p>col-1</p></div> 
                    <div class="col-2"><p>col-1</p></div> 
                </div> 
                <div class="row">
                    <div class="col-2"><p>col-2</p></div> 
                    <div class="col-2"><p>col-2</p></div> 
                    <div class="col-2"><p>col-2</p></div> 
                </div> 
                <div class="row">
                    <div class="col-3"><p>col-3</p></div> 
                    <div class="col-3"><p>col-3</p></div> 
                </div> 
            </div>
</body>
</html>
1.自己制作栅格布局

猜你喜欢
