<!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. js原生dom方法总结

    1.document document方法getElementById (Node)返回指定节点的引用getElementsByTagName (NodeList)返回文档中所有匹配元素的集合quer ...

  2. 项目中运行报错： Loading XML bean definitions from class path resource [applicationContext.xml]

    记录一下: org.springframework.context.support.AbstractApplicationContext prepareRefresh Refreshing org.s ...

  3. win10连vpn

    1.首先卸载网络适配器下所有的WAN Miniport 2.打开命令提示符,输入:netsh interface ipv4 uninstall 卸载TCP/IPv4协议. 3.重启电脑后再次打开“命令 ...

  4. python3.5.2本地环境搭建

    OS:win7 Download URL:https://www.python.org/downloads/release/python-352/ install 下载二进制安装文件之后,点击安装,一 ...

  5. 排序算法总结第二弹----冒泡排序---javascript描述

    上篇博文总结了选择排序,这篇来看冒泡排序,接上篇. 冒泡排序思想:若是正再将一组数据升序排序, 第一趟:比较相邻的数据,当左侧值大于右侧值将他们进行交换,将较小值向前浮动,大值向后冒泡,直至比较到最后 ...

  6. pdfbox加载pdf时遇到wrappedioexception报错处理方式

    现在一个项目要对pdf做处理.由于其中一个pdf约为80M左右,用pdfbox读取pdf时遇到了wrappedioexception错误.监控得到说内存不足.于是请教项目经理.他告诉我在Open De ...

  7. [每日一记] Python报错 IndentationError: unexpected indent

    IndentationError: unexpected indent 代码缩进出现错误 今天这个报错的原因是,早些时候的代码里Tab和空格混起来用了,,,[不是我...是编辑器的锅 不过我已经把Su ...

  8. Git的checkout, reset, revert

    不管是修改还是新建文件,都必须通过git add把这次修改从工作区加到暂存区: commit只是提交暂存区的修改,还没add到暂存区处于工作区的修改是不会commit的:   git checkout ...

  9. 修改组策略，禁止用户修改IP

    运行中打开gepdit.msc,依次打开用户配置,管理模板,网络,网络连接:在右侧将“禁止访问LAN链接组建的属性”.“为管理员启用windows2000网络连接设置”设置为已启用即可令用户无法访问网 ...

  10. Mosquitto搭建Android推送服务番外篇一：各种报错解决

    文章钢要: 目前笔者在开发搭建Mosquitto服务器,在此期间遇到很多实际问题,所以走了很多弯路,在这里写出来为大家提供一些帮助. 1.安装完成后启动Mosquitto报错 执行mosquitto客 ...