<!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. 浅谈JavaScript、ES5、ES6

    // http://es6.ruanyifeng.com/#docs/intro (ES6 文档) 什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来 ...

  2. juery学习总结(二)——juery操作页面元素

    所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...

  3. ThinkPHP Where 条件中使用表达式

    本文转自:这里 Where 条件表达式格式为: $map['字段名'] = array('表达式', '操作条件'); 其中 $map 是一个普通的数组变量,可以根据自己需求而命名.上述格式中的表达式 ...

  4. R自动数据收集第二章HTML笔记2(主要关于htmlTreeParse函数)

    包含以下几个小的知识点 1htmlTreeParse函数源码和一些参数 2hander的写法 3关于missing函数 4关于if-else语句中else语句的花括号问题 5关于checkHandle ...

  5. 纯CSS 图片演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. ssh

    ssh的配置文件有两个:服务端:/etc/ssh/sshd_config 客户端:/etc/ssh_config 服务端配置文件:/etc/ssh/sshd_config [root@localhos ...

  7. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  8. javadoc生成出现错误“编码 GBK 的不可映射字符”

    https://my.oschina.net/tiancai/blog/155299 http://heweina2007.iteye.com/blog/1561387 http://blog.csd ...

  9. 前端网老姚浅谈：怎么学JavaScript？

    作者:小不了链接:https://zhuanlan.zhihu.com/p/23265155来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 鉴于时不时,有同学私信问我( ...

  10. css清除浮动深度解析

    首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...