响应式栅栏布局

最新推荐文章于 2023-10-11 16:59:00 发布

njit_peiyuan

最新推荐文章于 2023-10-11 16:59:00 发布

阅读量214

点赞数

原文链接：http://www.cnblogs.com/sysuhanyf/p/5310412.html

版权

任务八 : 响应式网格(栅格化)布局

目标:实现效果如图

效果图

知识点

CSS3 属性 box-sizing 的使用: 当元素的宽度、高度确定时, { box-sizing : border-box }将元素的padding, border都将在设定的高度和宽度内绘制;也就是说,无论你的padding和border如何变化,它都不会超出预先设定好的宽度和高度.
清楚浮动防止高度塌陷: 设外层元素为container, 内层为content,应用了float属性的内层元素content高度一旦超过container,container就无法完全包裹content,就造成了高度塌陷.解决办法:父级元素应用::after选择器.

        .container: after {
            content: " ";
            display: table;
            clear: both;
        }

CSS3属性: @media主要用于为不同设备提供不同的属性, 参考文档: CSS|MDN、
CSS3 media querise;
***

本次练习代码示例:

index.html文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./public/index.css">
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="content"></div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="content"></div>
        </div>
        <div class="col-md-4 col-sm-12">
            <div class="content"></div>
        </div>
        <div class="col-md-3 col-sm-3">
            <div class="content"></div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="content"></div>
        </div>
        <div class="col-md-3 col-sm-3">
            <div class="content"></div>
        </div>
        <div class="col-md-1 col-sm-2">
            <div class="content"></div>
        </div>
        <div class="col-md-1 col-sm-2">
            <div class="content"></div>
        </div>
        <div class="col-md-2 col-sm-8">
            <div class="content"></div>
        </div>
        <div class="col-md-2 col-sm-3">
            <div class="content"></div>
        </div>
        <div class="col-md-6 col-sm-3">
            <div class="content"></div>
        </div>
    </div>
</body>
</html>

master.css文件

      * {
    box-sizing: border-box;
}

[class*= 'col-'] {
    float: left;
    height: 70px;
    padding: 10px;
}

.content {
    border: 1px solid #999;
    background-color: #eee;
    height: 50px;
}

@media only screen and (min-width: 768.1px) {
    .col-md-1 {
        width: 8.333%;
    }
    .col-md-2 {
        width: 16.666%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.333%;
    }
    .col-md-5 {
        width: 41.666%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-8 {
        width: 66.666%;
    }
    .col-md-12 {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .col-sm-1 {
        width: 8.333%;
    }
    .col-sm-2 {
        width: 16.666%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.333%;
    }
    .col-sm-5 {
        width: 41.666%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-8 {
        width: 66.666%;
    }
    .col-sm-12 {
        width: 100%;
    }
}

.row:after {
    display: table;
    content: " ";
    clear: both;
}

(如有错漏欢迎指正);

转载于:https://www.cnblogs.com/sysuhanyf/p/5310412.html

njit_peiyuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式栅栏布局

任务八 : 响应式网格(栅格化)布局目标:实现效果如图知识点CSS3 属性 box-sizing 的使用: 当元素的宽度、高度确定时, { box-sizing : border-box }将元素的padding, border都将在设定的高度和宽度内绘制;也就是说,无论你的padding和border如何变化,它都不会超出预先设定好的宽度和高度.清楚浮动防止高度塌陷: 设外层元素为...
复制链接

扫一扫