百度前端技术学院任务八：响应式网格（栅格化）布局

来源：互联网发布：软件测试感想编辑：程序博客网时间：2024/05/17 04:24

响应式网格（栅格化）布局

作者：梁远超

页面展示

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>栅格系统</title>        <link rel="stylesheet" type="text/css" href="css/css.css"/>    </head>    <body>        <div id="Frame">            <div class="col-sm-4 col-md-6" >                <div class="box"></div>            </div>            <div class="col-sm-4 col-md-6">                <div class="box"></div>            </div>            <div class="col-sm-4 col-md-12">                <div class="box"></div>            </div>            <div class="col-sm-3 col-md-3">                <div class="box"></div>            </div>            <div class="col-sm-6 col-md-6">                <div class="box"></div>            </div>            <div class="col-sm-3 col-md-3">                <div class="box"></div>            </div>            <div class="col-sm-1 col-md-2">                <div class="box"></div>            </div>            <div class="col-sm-1 col-md-2">                <div class="box"></div>            </div>            <div class="col-sm-2 col-md-8">                <div class="box"></div>            </div>            <div class="col-sm-2 col-md-3">                <div class="box"></div>            </div>            <div class="col-sm-6 col-md-3">                <div class="box"></div>                 </div>          </div>    </body></html>

body{    margin: 0px;    width: 100%;}#Frame{    padding: 10px;/*使内部方块与浏览器之间的距离为20px*/}[class*="col-"]{    box-sizing: border-box;    padding: 10px;/*使内部方块之间的距离为20px*/    float: left;}.box{    background-color: #eee;    border: 1px solid #999;    height: 48px;}/*width大于768px时*/@media only screen and (min-width: 769px){    .col-sm-6{        width:50%;    }    .col-sm-4{        width:33.33%;    }    .col-sm-3{        width: 25%;    }    .col-sm-2{        width: 16.66%;    }    .col-sm-1{        width: 8.33%;    }}/*width大于768px时*/@media only screen and (max-width: 768px){    .col-md-12{        width: 100%;    }    .col-md-8{        width: 66.66%;    }    .col-md-6{        width:50%;    }    .col-md-3{        width: 25%;    }    .col-md-2{        width: 16.66%;    }}

0 0

百度前端技术学院 任务八：响应式网格（栅格化）布局

响应式网格（栅格化）布局

作者：梁远超

页面展示

百度前端技术学院任务八：响应式网格（栅格化）布局