CSS3简单的栅格系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高仿栅格系统</title>
    <!--栅格系统-->
    <link rel="stylesheet" href="css/small-grid.css">
    <!---->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="main small-container">
        <!--一列12个-->
        <div class="small-row">
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
            <div class="col-1 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-1 have-border">A</div>
            <div class="col-11 have-border">B</div>
        </div>
        <!--一列6个-->
        <div class="small-row">
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-2 have-border">A</div>
            <div class="col-10 have-border">B</div>
        </div>
        <!--4个-->
        <div class="small-row">
            <div class="col-3 have-border">A</div>
            <div class="col-3 have-border">A</div>
            <div class="col-3 have-border">A</div>
            <div class="col-3 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-3 have-border">A</div>
            <div class="col-9 have-border">B</div>
        </div>
        <!--3个-->
         <div class="small-row">
            <div class="col-4 have-border">A</div>
            <div class="col-4 have-border">A</div>
            <div class="col-4 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-4 have-border">A</div>
            <div class="col-8 have-border">B</div>
        </div>
        <div class="small-row">
            <div class="col-5 have-border">A</div>
            <div class="col-7 have-border">B</div>
        </div>
        <div class="small-row">
            <div class="col-6 have-border">A</div>
            <div class="col-6 have-border">B</div>
        </div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    box-sizing: border-box;
}

.small-container{
    width: 100%;
}
.small-container,.small-row{
    box-sizing: border-box;
}
.small-row::before,
.small-row::after{
    content: ‘‘;
    display: block;
    visibility: hidden;
    clear: both;
    zoom: 1;
}
[class*=‘col-‘]{
    float: left;
    padding: 1%;
}
.col-1{
    width: 8.33%;
}
.col-2{
    width: 16.66%;
}
.col-3{
    width: 25%;
}
.col-4{
    width: 33.33%;
}
.col-5{
    width: 41.66%;
}
.col-6{
    width: 50%;
}
.col-7{
    width: 58.33%;
}
.col-8{
    width: 66.66%;
}
.col-9{
    width: 75%;
}
.col-10{
    width: 83.33%;
}
.col-11{
    width: 91.66%;
}
.col-12{
    width: 100%;
}

时间： 2024-08-24 01:30:48

CSS3简单的栅格系统的相关文章

用Bootsharp搭建简单网页二--栅格系统

小白.刚开始使用bootsharp做网页的时候,不懂得什么栅格系统.容器,什么响应式布局.视口(viewport).秉着不懂就上网寻找答案,加上bootsharp官网上又很多现成的例子,自己动手试了下,大概明白了,什么是流式栅格系统. 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中. Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.如果一"

Bootstrap3基础 form-horizontal 响应式栅格系统简单示例

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Firefox / Chrome bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

Bootstrap 栅格系统简单整理

Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 总结一下我近期的学习Bootstrap的一些理解: 一..col-xs-1, .col-sm-1, .col-md-1 这些都是什么意思? .col-xs-超小屏幕手机 (<768px). .col-sm-小屏幕平板 (≥768px). .col-md-中等屏幕桌面显示器 (≥992px). 不管在哪种屏幕上,栅格系统都会自动的分12列 col-x

css3 Grid栅格系统

Grid 栅格系统的使用定义容器 .coninater { display: grid; } 多种方式定义单格 1. 按百分比划分 .coninater { display: grid; grid-template-rows: 50% 50%; grid-template-columns: 20% 20% 20% 20% 20%; } 2. 按比例划分 .coninater { display: grid; grid-template-rows: repeat(3, 1fr); grid-te

bootstrap 栅格系统 HTTP协议软件架构 B/S C/S 常见的WEB服务器

Day32 bootstrap Bootstrap就是响应式布局最成功的实现,为了兼容不同的浏览器采用jQuery,为了适配不同的终端采用CSS3 Media Query (媒体查询) 1.1.1 栅格系统 l 帮助手册:全部CSS样式/栅格系统,http://v3.bootcss.com/css/#grid-options l Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. l 栅格特点 n "行(ro

Layui栅格系统与后台框架布局

一.栅格布局规则: 1. 采用 layui-row 来定义行,如:<div class="layui-row"></div> 2. 采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内.其中: 变量md 代表的是不同屏幕下的标记(可选值见下文) 变量* 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12 如果多个列的"等分数值"总和等于12,则刚好满行排列.如果大于12,多余的

Bootstrap_栅格系统

一.栅格系统原理 1. 栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我们在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 行(row)必须包含在.container中,以便为其赋予合适的排列(aligment)和

巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

Bootstrap 栅格系统（布局）

1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再