网页设计中有一个怎么也绕不开的问题,那就是布局问题。一般来说,一个div可能会分割成很多部分,同样是横向分割成两部分,但是在不同的项目中,我们可能会用不同的css代码,网格系统其实就是为这一类似的问题提供一个统一的解决办法。
网格布局有很多,但是有很多非常复杂,往往无法二次开发。Responsive Grid System是国外的一个网站,他们提供了一种非常简单的实现。其实每一个前端开发人员都可以写出这样的框架,但是,从头开始也许会让很多人动力不足。这个框架代码很简单,对我而言,采用它的原因仅仅是我能修改它,沿用它的结构和命名规则,很多时候,让我们无从开头一个系统的css代码的原因恰恰是因为不知道如何命名。
我对这个框架的态度是:它给我们开了个好头,我可以按照我的想法继续下去。还有就是兼容性,国外那些特立独行的设计师们很少会考虑不支持html5的浏览器,他们或许做出来很多酷的效果,但别高兴早了,都是些在ie上没法用的。这个css框架可以兼容ie6.
来看看这个框架的例子程序,以3列和4列为例:
html代码:
<div class="section group"> <div class="col span_1_of_3"> This is column 1 </div> <div class="col span_1_of_3"> This is column 2 </div> <div class="col span_1_of_3"> This is column 3 </div> </div> <div class="section group"> <div class="col span_1_of_4"> This is column 1 </div> <div class="col span_1_of_4"> This is column 2 </div> <div class="col span_1_of_4"> This is column 3 </div> <div class="col span_1_of_4"> This is column 4 </div> </div>
css代码: 可以500%提高开发效率的前端UI框架!
/* SECTIONS */ .section { clear: both; padding: 0px; margin: 0px; } /* COLUMN SETUP */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* GRID OF THREE */ .span_3_of_3 { width: 100%; } .span_2_of_3 { width: 66.1%; } .span_1_of_3 { width: 32.2%; } /* GRID OF FOUR */ .span_4_of_4 { width: 100%; } .span_3_of_4 { width: 74.6%; } .span_2_of_4 { width: 49.2%; } .span_1_of_4 { width: 23.8%; } /* GROUPING */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; }
虽然代码谁都能看懂,但是对于善于学习的人来说,关注的往往不是实现本身,而是为什么这样实现,如果是我,会怎么实现。所以我还是简单的讲讲这个网格系统的“原理”:
How It Works
.section
section元素将页面横向分割成几部分。可以500%提高开发效率的前端UI框架!
.group
group元素解决浮动的问题,这类似于网上的clearfix。兼容ie6以上。
.col
col将section分割成小栏目。每一栏都有一定的margin值。每一栏的宽度是用的百分比。百分比值应该是作者根据经验得出来的。
相关推荐
VueJS的响应式可拖动和可调整大小的网格布局。 它的响应能力基于断点(类似于Bootstrap)。 它基于 消息 现在,您可以进行常规布局和响应式布局。 它也可以与Vuex一起使用。 并且它部分地用Typescript编码。 从...
Responsive 是一个超级轻量级的 HTML, SASS, CSS, 和 JavaScript 框架,用来构建响应式 Web 网站。Responsive 合并压缩后只有 24.8K 标签:Responsive
宽屏医疗器械响应式企业整站HTML模板_宽屏 医疗 医疗器械 响应式 企业 中文 简洁 线条 responsive 科技 互联网宽屏医疗器械响应式企业整站HTML模板_宽屏 医疗 医疗器械 响应式 企业 中文 简洁 线条 responsive 科技 ...
紫色大图幻灯响应式手机模板下载_紫色 幻灯 响应式 博客 整站 手机 responsive wap html5 html.zip紫色大图幻灯响应式手机模板下载_紫色 幻灯 响应式 博客 整站 手机 responsive wap html5 html.zip
responsive web design 1.响应式设计意味着什么? 2.怎么做响应式设计?
紫色大图幻灯响应式手机模板下载_紫色 幻灯 响应式 博客 整站 手机 responsive wap html5 html
宽屏医疗器械响应式企业整站HTML模板_宽屏 医疗 医疗器械 响应式 企业 中文 简洁 线条 responsive 科.rar
紫色大图幻灯响应式手机模板下载_紫色 幻灯 响应式 博客 整站 手机 responsive wap html5 html.rar
简单的响应式网格 “简单响应式网格”是一种响应式,可移动的第一流体网格系统,随着设备或视口尺寸的增加,该系统最多可扩展至6列,并且也可以扩展和嵌套。 它包括用于简化布局选项的预定义类。 它受启发 介绍 网格...
一个强大的类似Bootstrap的响应式网格系统,用于React。 :warning_selector: 升级到v7 react-grid-system v7为超大屏幕添加了新的屏幕类xxl 。 这可能会对您的应用造成影响。 要退出此新屏幕类别,请使用以下命令...
响应式网格布局和Flutter列表 响应式网格布局 使用ResponsiveGridRow和ResponsiveGridCol您可以获得网格系统的相同行为 假设总宽度为12,则为每个col赋予每个尺寸类别应占用的宽度 ResponsiveGridRow ( children :...
React网格轮播响应带有网格布局的响应式轮播组件轻松创建旋转木马,如照片库、购物产品卡或任何您想要的东西特征后轮驱动多个项目多行无限循环支持任何组件作为项目放入网格显示/隐藏点显示/隐藏箭头按钮自动播放为...
网格是一个 12 列响应式网格,可以是流动的或固定的宽度。 支持的断点有(任意命名): iPhone:320px 宽 安卓手机:420px宽 Kindle Fire:600px宽 iPad:768px 宽 桌面:960px 宽 用法 将“_responsive-grid.scss...
一个具有响应式网格布局和动态 json 加载的 AngularJs 项目 #安装 凉亭安装 如何使用 在 IDE 上设置源代码 启动 index.html 并尝试示例布局 如何配置新布局 创建一个新的 json 文件并将其命名为 N.json(其中 N 是...
黑色扁平化汽车车展专题响应式整站模板_黑色 扁平化 简洁 汽车 赛车手 跑车 车展 专题 响应式 整站 企业 汽车俱乐部 摄影 图片 展示 responsive 商务 宽屏 商业 大气 漂亮 纯色.rar
全屏Metro扁平化大气设计师html5模板_黑色 绿色 全屏 宽屏 大气 精品 漂亮 扁平化 摄影 图片 展示 相册 工业设计 画册 设计 设计师 工作室 手机 响应式 html5 css3 responsive.rar
享誉国外的很有名的一本书,响应式网页设计 - Responsive WebDesign,高清PDF版本!火速分享!
wc响应网格Web组件,可使用CSS Grid简化响应式内容区域的布局。 由提供的行为。安装npm i wc - responsive - grid例子< style > : root { --wc-responsive-grid-gap : 2 rem ; } article { width : 85 % ; ...
大气商业体育健身运动企业响应式模板_大气 精品 漂亮 手机 响应式 简洁 大图 幻灯 菜单 responsive 健美 商业 体大气商业体育健身运动企业响应式模板_大气 精品 漂亮 手机 响应式 简洁 大图 幻灯 菜单 responsive ...