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

最新推荐文章于 2024-11-15 19:51:40 发布

weixin_30268921

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量115

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/carol1987/p/5504516.html

版权

百度前端技术学院

任务八：响应式网格（栅格化）布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IFE Task1-8</title>
    <style>
    body{
        margin:0;
    }
    .container{
        box-sizing: border-box;
        padding: 10px;
    }
    /*清除浮动*/
    .row:before, 
    .row:after {
        content:"";
        display:table;
        clear:both;
    }
    /*给每个块添加基础样式*/
    [class*='col-']{
        box-sizing: border-box;
        float: left;
        background-color: #eee;
        border: 1px solid #999;
        height: 50px;
        margin: 10px; 
        font-size: 12px;
        text-align: center;
        line-height: 50px;
    }
    /*大于768px*/
    @media (min-width: 769px) {
        .col-md-1{
            width: calc( 8.333% - 20px );
        }
        .col-md-2{
            width: calc( 16.666% - 20px );
        }
        .col-md-3{
            width: calc( 25% - 20px );
        }
        .col-md-4{
            width: calc( 33.333% - 20px );
        }
        .col-md-6{
            width: calc( 50% - 20px );
        }
    }
    /*小于768px*/
    @media (max-width: 768px) {
        .col-sm-2{
            width: calc( 16.666% - 20px );
        }
        .col-sm-3{
            width: calc( 25% - 20px );
        }
        .col-sm-6{
            width: calc( 50% - 20px );
        }
        .col-sm-8{
            width: calc( 66.666% - 20px );
        }
        .col-sm-12{
            width: calc( 100% - 20px );
        }
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">1-1</div>
            <div class="col-md-4 col-sm-6">1-2</div>
            <div class="col-md-4 col-sm-6">1-3</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-3">2-1</div>
            <div class="col-md-6 col-sm-6">2-2</div>
            <div class="col-md-3 col-sm-3">2-3</div>            
        </div>
        <div class="row">
            <div class="col-md-1 col-sm-2">3-1</div>
            <div class="col-md-1 col-sm-2">3-2</div>
            <div class="col-md-2 col-sm-8">3-3</div>
            <div class="col-md-2 col-sm-3">3-4</div>
            <div class="col-md-6 col-sm-3">3-5</div>            
        </div>
    </div>
</body>
</html>