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%;
}
CSS3简单的栅格系统的更多相关文章
- 用sass写栅格系统
为了验证学习sass的效果,自己写了个简单的栅格系统.
- Bootstrap 栅格系统简单整理
Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 总结一下我近期的学习Bootstrap的一些理解: 一.. ...
- bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门
<!DOCTYPE html> <html> <head> <title>bootstrap</title> <!-- 引入boots ...
- css3 Grid栅格系统
Grid 栅格系统的使用 定义容器 .coninater { display: grid; } 多种方式定义单格 1. 按百分比划分 .coninater { display: grid; grid- ...
- bootstrap 栅格系统 HTTP协议 软件架构 B/S C/S 常见的WEB服务器
Day32 bootstrap Bootstrap就是响应式布局最成功的实现,为了兼容不同的浏览器采用jQuery,为了适配不同的终端采用CSS3 Media Query (媒体查询) 1.1.1 栅 ...
- Layui栅格系统与后台框架布局
一.栅格布局规则: 1. 采用 layui-row 来定义行,如:<div class="layui-row"></div> 2. 采用类似 layui-c ...
- BootStrap栅格系统原理 笔记
1.内容居中:效果 关键代码: <div class="container"> .........之前上面添加在body标签下的代码 </div>添加cla ...
- 深入理解BootStrap之栅格系统（布局）
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
- [bootstrap] 栅格系统和布局
1.简介 栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁.是从平面栅格系统演变而来. Bootstrap建立在12列栅格系统.布局.组件之上.以规则 ...
随机推荐
- SpringMVC工作原理
SpringMVC的工作原理图: SpringMVC流程 1. 用户发送请求至前端控制器DispatcherServlet. 2. DispatcherServlet收到请求调用HandlerMa ...
- Excel—SUMPRODUCT用法指南
1.最简单的SUMPRODUCT函数等同与SUM函数. 2.SUMPRODUCT可以设置多参数,其输出值为各参数对应值的乘积之和. E2=6*7+8*6+2*8+9*8+3*8+5*9 3.SUMPR ...
- GridLayout 使用
上次做了一个小键盘,请见:PopupWindow 使用. 效果是这样的: 可以看到,上面的按键是不一样大小的.因为是用LinearLayout布局,用的Button样式也是默认的.数字键和文字键的大小 ...
- centos7 打开mysql 3306端口并 设置外部访问
mysql安装后默认是localhost访问,如果需要外部访问可以设置一个新的账号把host改为%,意味着所有ip均可以访问 grant all privileges on *.* to 'outUs ...
- 推荐一些国内的Jquery CDN免费服务
Jquery是个非常流行的JS前端框架,在很多网站都能看到它的身影.很多网站都喜欢采用一些Jquery CDN加速服务,这样网站加载jquery会更快.之前火端网络的一些网站都是使用Google的jq ...
- 从sum()求和引发的思考
sum()求和是一个非常简单的函数,以前我的写法是这样,我想大部分和我一样刚开始学习JS的同学写出来的也会是这样. function sum() { var total=null; for(var i ...
- phpcms 表单提交发送邮件
修改 phpcms\modules\formguide index.php 找到 foreach ($mails as $m) { sendmail($m, L('tips'), $this-> ...
- Centos7下面配置静态IP
修改网卡配置文件(操作前先备份一下该文件),/etc/sysconfig/network-scripts/ifcfg-enp0s3 ,如下: TYPE=Ethernet BOOTPROTO=stati ...
- Winform自定义控件基础（一）
1.设置图像和文字以抗锯齿的方式呈现 g.SmoothingMode = SmoothingMode.AntiAlias; g.TextRenderingHint = TextRenderingHin ...
- python 端口扫描
#!/usr/bin/env python #-*- coding:utf-8 -*- import socket #iptable=[] nmapport=[21, 22, 23, 80, 110] ...