Tagged

网格

A collection of 4 posts

css

15个非常有用的CSS网格布局生成器

译自:[webDesignBooth](http://www.webdesignbooth.com/15-extremely-useful-css-grid-layout-generator-for-web-designers/) 中文原文:[15个非常有用的CSS网格布局生成器](http://www.qianduan.net/15-extremely-useful-css-grid-layout-generators.html) 版权所有,转载请注明出处,多谢! - - - - - - 网上有很多在线生成器可以帮助设计师快速的完成某项任务,这些在线生成器包括收藏夹图标生成器、背景图片生成器、按钮生成器、徽章生成器等。Balkhis曾经为我们写过一篇文章介绍[非常有用的在线生成器](http://www.balkhis.com/web-designs-resources/55-extremely-useful-online-generators-for-designers/ "超过55个非常有用的在线生成器")。 除了这些在线生成器之外,设计师还需要花费大量的时间来做重复的事情。还好现在已经有了很多不错的CSS框架,现在让我们看看一些很有用的CSS网格布局生成器吧。 1.Blueprint Grid CSS Generator 2.Variable Grid

css

CSS框架:The Golden Grid

The Golden Gird是一个网格系统,是vladocar开发的一款比较新的CSS框架,可以为现代网站设计提供一个全新的布局参考。它非常小巧,所以很容易学习上手。其中的某些处理布局的方法是很值得借鉴的。如果你了解960网格系统,那么这个框架,你会更加容易使用。 访问官网 | 下载 Golden Grid Demos grid system(6 column) grid system (12 column) grid system grid system(most common images and video ratios) grid system columns grid system visual tutorial

css 框架

Emastic CSS框架发布beta3版本

这是一个轻量级的CSS框架,也是一个较新的CSS框架,不过它更新的挺快的,也有很多地方值得学习,所以在这里推荐一下。 官方简介: Emastic 是一个CSS框架,它将持续任务是:探索未知的新世界,寻找新的生活和新的网络空白,大胆发现CSS框架没有到达的地方。 emastic的优点: 轻量级 (压缩后小于4kb) 个性化宽度(em,px,%) 在网格中使用固定的或非固定的列 Elastic使用”em”布局 Beta3更新: percent-grid.css (Plugin) absolute-grid.css (Plugin) semantic.css (Plugin) Beta2更新: gadgets.css (Plugin) 垂直间距 改良排版 (基于网格) 官方网站:http://code.google.com/p/emastic/

960

960 CSS框架解析及重构

960CSS框架是一个非常流行的CSS框架,它是国外最成熟的CSS框架之一,而且结构清晰,代码简洁,容易上手。 960的基本原理是网格技术,而且960是CSS 网格技术的最完美实现。 网格技术是最近两年才出现的一种网页布局方法,它的原理是将页面平均分割成N列,然后通过组合相应数量的列来完成对页面的布局。 关于网格技术的更多信息,请查看我之前写的《美丽网格》。 960的方法是,将页面平均分成12列或16列,然后列与列之间是完全独立的,每一列的margin和padding都是相同的,这样,每列之间就不会出现那些常见的bug。 BluePrint和YUI也有网格技术,但是它们的列与列之间的空白,是通过单边的margin来实现的,这样就需要在第一列或最后一列添加额外的样式。 然而,我之前也有一个关于网格框架的想法,后来发现与960差不多,而且在某些方面,它的实现比我的设想要好些。但是它也有点儿方法我觉得不是太 好,重用度不够,比如,对于每列的公用样式,它是通过.grid_1,.grid_2,.grid_3, …… .grid_16{display:inline;float:left;margin-left:10px;margin-right: