<!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%;

}

　　

　　

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

  1. 用sass写栅格系统

    为了验证学习sass的效果,自己写了个简单的栅格系统.

  2. Bootstrap 栅格系统简单整理

    Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 总结一下我近期的学习Bootstrap的一些理解: 一.. ...

  3. bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门

    <!DOCTYPE html> <html> <head> <title>bootstrap</title> <!-- 引入boots ...

  4. css3 Grid栅格系统

    Grid 栅格系统的使用 定义容器 .coninater { display: grid; } 多种方式定义单格 1. 按百分比划分 .coninater { display: grid; grid- ...

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

    Day32 bootstrap Bootstrap就是响应式布局最成功的实现,为了兼容不同的浏览器采用jQuery,为了适配不同的终端采用CSS3 Media Query (媒体查询) 1.1.1 栅 ...

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

    一.栅格布局规则: 1. 采用 layui-row 来定义行,如:<div class="layui-row"></div> 2. 采用类似 layui-c ...

  7. BootStrap栅格系统原理 笔记

    1.内容居中:效果 关键代码: <div class="container"> .........之前上面添加在body标签下的代码 </div>添加cla ...

  8. 深入理解BootStrap之栅格系统（布局）

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  9. [bootstrap] 栅格系统和布局

    1.简介 栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁.是从平面栅格系统演变而来. Bootstrap建立在12列栅格系统.布局.组件之上.以规则 ...

随机推荐

  1. 源码包---linux软件安装与管理

    源代码推荐保存位置: /usr/local/src 软件安装位置: /usr/local 如何确定安装过程报错: 安装过程停止 并出现error / warning / no 的提示 ./config ...

  2. 感悟：搞了整整一天，拯救一个Ubuntu系统

    最开始,我在windows平台上,准备打开计算机组成原理的实验工程,突然来了一个想法:每次要用windows的时候,都要切换系统(win8以上的系统必须在关闭快速开机的状态下才能正常在Linux平台下 ...

  3. 1.2、Workspace中让Package分层显示

    有时候我们新建两个具有两个相同目录的Package(例如:com.st.collection和com.st.map这两个Package)时,在Workspace中是以平铺的方式显示的,如: 当Pack ...

  4. 对日期 ，和 master.dbo.spt_values 表操作

    if object_id('tempdb..#xs') is not null drop table #xs; ), date datetime, sale float) insert into #x ...

  5. 关于li元素嵌套的事儿

    今天阅读<锋利的jQuery>第二版2.6节案例研究部分的时候,遇到一个问题. <ul> <li class="a1"><a href=& ...

  6. iOS6新特征：UICollectionView介绍

    http://blog.csdn.net/eqera/article/details/8134986 1.1. Collection View 全家福: UICollectionView, UITab ...

  7. Picard报错“MAPQ should be 0 for unmapped read”的解决方法

    picard对bwa生成的sam文件进行reorder时,报错如下: Getting Help Exception in thread "main" htsjdk.samtools ...

  8. JS验证只能输入数字，数字和字母等的正则表达式

    JS判断只能是数字和小数点 0.不能输入中文1)<input onpaste="return false;" type="text" name=" ...

  9. Saving the entire git diff between two commits in a text file

    git diff A10..A1 > my.diff 转自: http://stackoverflow.com/questions/19067896/saving-the-entire-git- ...

  10. Python全栈【Socket网络编程】

    Python全栈[socket网络编程] 本章内容: Socket 基于TCP的套接字 基于UDP的套接字 TCP粘包 SocketServer 模块(ThreadingTCPServer源码剖析) ...