网页栅格系统研究(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
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Django 设置admin后台表和App(应用)为中文名的操作方法
2023-01-31 13:37:54
![](https://img.aspxhome.com/file/2023/7/124757_0s.png)
PyTorch使用GPU训练的两种方法实例
2023-09-21 08:11:40
![](https://img.aspxhome.com/file/2023/9/85309_0s.png)
vue3 自定义指令详情
2024-05-09 15:08:31
Matplotlib绘制子图的常见几种方法
2022-04-04 06:19:47
![](https://img.aspxhome.com/file/2023/8/102338_0s.png)
优化MySQL数据库中的查询语句详解
2024-01-21 06:17:06
asp如何用通过Web访问OLAP数据?
2010-06-16 09:52:00
MySQL中使用replace、regexp进行正则表达式替换的用法分析
2024-01-15 13:34:02
colab中修改python版本的全过程
2022-10-31 07:18:38
![](https://img.aspxhome.com/file/2023/9/81609_0s.png)
python解析模块(ConfigParser)使用方法
2022-06-15 11:39:06
SQL Server数据库搭建农村信息化的方案
2009-01-23 14:16:00
![](https://img.aspxhome.com/file/UploadPic/20091/2009131151251116.jpg)
php+mysql实现简单登录注册修改密码网页
2024-04-30 08:49:54
![](https://img.aspxhome.com/file/2023/7/132787_0s.jpg)
Python实现类似jQuery使用中的链式调用的示例
2021-09-20 00:16:55
pytorch 限制GPU使用效率详解(计算效率)
2022-01-24 06:55:53
MSSQL数据库还原图解教程
2009-01-12 17:58:00
![](https://img.aspxhome.com/file/UploadPic/20091/12/34_20071005121043_mq==-29s.jpg)
Python设计模式之组合模式原理与用法实例分析
2023-04-12 16:15:28
![](https://img.aspxhome.com/file/2023/3/95563_0s.png)
女装类视觉设计分享
2009-10-30 18:36:00
![](https://img.aspxhome.com/file/UploadPic/200910/30/1256637795938-73s.jpg)
div中class与id的区别及应用
2007-09-22 08:37:00
pandas取出重复数据的方法
2021-03-23 09:12:52
详解用 python-docx 创建浮动图片
2021-07-16 13:32:12
![](https://img.aspxhome.com/file/2023/3/124923_0s.png)
C#调用Python脚本的简单示例
2021-04-03 13:22:25
![](https://img.aspxhome.com/file/2023/1/71751_0s.jpg)