网页栅格系统研究(4):技术实现
作者:玉伯 来源:Taobao.com UED Team 时间:2008-11-06 11:44:00
前三篇文章中,明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。
Blueprint的实现
Blueprint是一个完整的CSS框架,栅格系统是它的一部分功能。我们来看demo页面:
以上三栏布局的代码为:
<style type="text/css"> .container { margin: 0 auto; width: 950px } .span-8 { float: left; margin-right: 10px } div.last { margin-right: 0 } hr { clear: both; height: 0; border: none } </style> <div class="container"> <div class="span-8"></div> <div class="span-8"></div> <div class="span-8 last"></div> <hr /> </div>
上面是基本功能,Blueprint还支持append-n, prepend-m, border
等“高级”功能,这些就不细说了。Blueprint的特点简单总结如下:
采用浮动来实现布局,简单明了
950两侧没有margin, 最后一列的class需要加上
last
采用额外标签来清除浮动
960.gs的实现
谈到960栅格系统,不得不提960.gs. Nathan Smith在这篇文章中,详细阐述了他的想法和设计思路。这里有个demo页面,核心代码很简单:
<style type="text/css"> .container_12 { margin: 0 auto; width: 960px } .grid_4 { float: left; margin: 0 10px } </style> <div class="container_12"> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> <div class="clear"></div> </div>
margin是均匀放在950两侧的
所有grid除了宽度不同,左右边距都一致
margin: 0 10px;
代码简单清晰,起始和结束列不需要添加额外class
很明显,Blueprint和960.gs都是采用浮动来实现布局的,主容器需要添加额外标签来清除浮动(可以参考这里)。当然,这也不是什么大问题,请看这篇文章的总结,不添加额外标签也可以清除浮动。
标签:栅格系统,栅格,框架,css
0
投稿
猜你喜欢
查询数据表中的记录(SELECT)
2009-02-27 16:06:00
DIV+CSS设计时容易犯的一些错误
2007-11-13 12:42:00
ASP日期和时间函数用法详解
2007-10-13 19:33:00
最新CSS兼容方案
2008-08-13 13:20:00
闲聊html和body标签
2009-02-21 10:50:00
MySQL实现SQL Server的sp_executesql
2008-11-20 15:01:00
Javascript程序优化
2008-06-02 13:12:00
AspJpeg组件:介绍、注册、高级使用方法
2010-01-25 12:42:00
CSS中expression的用法
2008-09-11 14:18:00
SQL重复记录处理(查找,过滤,删除)
2008-11-17 20:47:00
CSS 的优先规则
2009-01-08 12:40:00
MYSQL数据库常用命令集合
2009-02-26 16:01:00
激发你的灵感:50个优秀的Favicons设计
2007-10-21 19:52:00
mysql 存储过程 使用小结
2010-10-25 20:02:00
asp MYSQL出现问号乱码的解决方法
2011-04-15 11:13:00
好用的JS图片预加载类
2007-08-13 13:49:00
几个javascript显示加载进度条代码
2008-01-19 10:52:00
为自己的网站添加RSS功能
2007-11-05 19:18:00
启动iis出现发生意外0x8ffe2740的解决方法
2011-03-31 11:19:00
混乱的标记语言XHTML2/HTML5
2009-07-31 14:27:00