【div+css】栅格化布局样式备用坑

林氏智造 于 2013-12-08 发布 6586 人已阅

什么叫栅格化布局

栅格是指用均匀矩阵网格来划分空间,在网页设计中设计师按照栅格划分好的空间规划自己的设计元素,让整个页面结构规范化(以上完全是林氏智造自我点评)

为什么要使用栅格化

在团队开始中,在未使用栅格化布局之前,当前端的朋友是否总有几次拿到设计稿有想撞墙的冲动,嘴里总会念到为什么大布局的间距怎么总是不一样,为什么各元素间距有大有小,此模块的宽度到底是多少; 这些问题都是团队没有按照一个特定的规范去执行流程导致,所以我们要把流程规范化尤其出来了个栅格化布局。

使用栅格化布局有什么好处

由于栅格化布局是把空间划分均匀的网格,设计师按照网格的数量可以把自己的页面布局划分为精准的等分,前端可以通过查看栅格化情况清楚了解相关间距和宽度,还可以通过栅格化图预先设计好通用的布局样式。

什么时候使用栅格化布局

既然栅格化布局有以上好处,那什么时候使用?这个要看整个团队的看法和公司的开发流程;不是说好东西各个都会用,这个要看整个 团队的接受能力。

自己整理的栅格化布局样式

950栅格化布局
/*
* 950栅格布局
* 栅格数:24
* 栅格宽度:40px(内容宽+间距)
* 间距:10px
* 总宽度:24*40-10=950
*/

.grid950{width:950px;margin:0 auto;}
.grid950 .grid{float:left;display:inline;}
.grid950 .grid_row:before,.grid950 .grid_row:after{display:table;line-height: 0;content:"";}
.grid950 .grid_row:after{clear:both;}
.grid950 .grid_1{width:30px;}
.grid950 .grid_2{width:70px;}
.grid950 .grid_3{width:110px;}
.grid950 .grid_4{width:150px;}
.grid950 .grid_5{width:190px;}
.grid950 .grid_6{width:230px;}
.grid950 .grid_7{width:270px;}
.grid950 .grid_8{width:310px;}
.grid950 .grid_9{width:350px;}
.grid950 .grid_10{width:390px;}
.grid950 .grid_11{width:430px;}
.grid950 .grid_12{width:470px;}
.grid950 .grid_13{width:510px;}
.grid950 .grid_14{width:550px;}
.grid950 .grid_15{width:590px;}
.grid950 .grid_16{width:630px;}
.grid950 .grid_17{width:670px;}
.grid950 .grid_18{width:710px;}
.grid950 .grid_19{width:750px;}
.grid950 .grid_20{width:790px;}
.grid950 .grid_21{width:830px;}
.grid950 .grid_22{width:870px;}
.grid950 .grid_23{width:910px;}
.grid950 .grid_24{width:950px;}
980栅格化布局
* 980栅格布局
* 栅格数:22
* 栅格宽度:45px(内容宽35px+间距10px)
* 间距:10px
* 总宽度:22*45-10=980
*/
.grid980{width:980px;margin:0 auto;}
.grid980 .grid{float:left;display:inline;}
.grid980 .grid_row:before,.grid980 .grid_row:after{display:table;line-height: 0;content:"";}
.grid980 .grid_row:after{clear:both;}
.grid980 .grid_1{width:35px;}
.grid980 .grid_2{width:80px;}
.grid980 .grid_3{width:125px;}
.grid980 .grid_4{width:170px;}
.grid980 .grid_5{width:215px;}
.grid980 .grid_6{width:260px;}
.grid980 .grid_7{width:305px;}
.grid980 .grid_8{width:350px;}
.grid980 .grid_9{width:395px;}
.grid980 .grid_10{width:440px;}
.grid980 .grid_11{width:485px;}
.grid980 .grid_12{width:530px;}
.grid980 .grid_13{width:575px;}
.grid980 .grid_14{width:620px;}
.grid980 .grid_15{width:665px;}
.grid980 .grid_16{width:710px;}
.grid980 .grid_17{width:755px;}
.grid980 .grid_18{width:800px;}
.grid980 .grid_19{width:845px;}
.grid980 .grid_20{width:890px;}
.grid980 .grid_21{width:935px;}
.grid980 .grid_22{width:980px;}
淘宝952栅格布局
* 淘宝952栅格布局
* 栅格数:24
* 栅格宽度:40px(内容宽32px+间距8px)
* 间距:8px
* 总宽度:24*40-8=952
*/
.grid952{width:952px;margin:0 auto;}
.grid952 .grid{float:left;display:inline;}
.grid952 .ml8{margin-left:8px;}
.grid952 .grid_row:before,.grid952 .grid_row:after{display:table;line-height: 0;content:"";}
.grid952 .grid_row:after{clear:both;}
.grid952 .grid_1{width:32px;}
.grid952 .grid_2{width:72px;}
.grid952 .grid_3{width:112px;}
.grid952 .grid_4{width:152px;}
.grid952 .grid_5{width:192px;}
.grid952 .grid_6{width:232px;}
.grid952 .grid_7{width:272px;}
.grid952 .grid_8{width:312px;}
.grid952 .grid_9{width:352px;}
.grid952 .grid_10{width:392px;}
.grid952 .grid_11{width:432px;}
.grid952 .grid_12{width:472px;}
.grid952 .grid_13{width:512px;}
.grid952 .grid_14{width:552px;}
.grid952 .grid_15{width:592px;}
.grid952 .grid_16{width:632px;}
.grid952 .grid_17{width:672px;}
.grid952 .grid_18{width:712px;}
.grid952 .grid_19{width:752px;}
.grid952 .grid_20{width:792px;}
.grid952 .grid_21{width:832px;}
.grid952 .grid_22{width:872px;}
.grid952 .grid_23{width:912px;}
.grid952 .grid_24{width:952px;}

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

React+webpack 部署概要

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

gulp前端自动化部署方案

gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快