网页栅格系统研究(4):技术实现
作者:玉伯 来源:Taobao.com UED Team 发布时间:2008-11-06 11:44:00
标签:栅格系统,栅格,框架,css
前三篇文章中,明确了栅格系统的设计细节和适用范围。这一篇将集中讨论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都是采用浮动来实现布局的,主容器需要添加额外标签来清除浮动(可以参考这里)。当然,这也不是什么大问题,请看这篇文章的总结,不添加额外标签也可以清除浮动。
0
投稿
猜你喜欢
- 可变参数可变参数应该最简单,在C/C++和Java等语言中都有,就是用*号来表示,例如def testArg(*arg)你可以传入任意多个元
- 今天开发时,使用axios返回的response中data有多个数据:如果是获取cn里的数据的,可以用:response.data.cn但是
- 本文实例讲述了python socket多线程通讯方法。分享给大家供大家参考,具体如下:#!/usr/bin/evn python"
- 如下所示:# -*- coding: utf-8 -*-# @Author: xiaodong# @Date: just hid
- 获取CPU信息我们先来获取CPU的信息:>>> import psutil>>> psutil.cpu_
- 本文实例讲述了Flask框架中request、请求钩子、上下文用法。分享给大家供大家参考,具体如下:request就是flask中代表当前请
- 事务控制的核心——Connection在开始之前,先让我们回忆一下数据库较原始的JDBC是怎么管理事务的: //仅
- <?phphighlight_file(__FILE__);error_reporting(0);$content = $_POST[
- Django Model的外键自关联在django的model定义中,有时需要某个Field引用当前定义的Model,比如一个部门(Depa
- 本文介绍基于Python语言gdal模块,实现多波段HDF栅格图像文件的读取、处理与像元值可视化(直方图绘制)等操作。另外,基于gdal等模
- #! -*- coding:utf-8 -*- import string s = 'Ye
- python3.6.4安装opencv3.4.2使用pip安装OpenCV直接安装最新版:pip3 install opencv_pytho
- 一、迭代器(foreach)1、可迭代的对象内置有__iter__方法的都叫可迭代的对象。Python内置str、list、tuple、di
- 前言2015年,HTTP/2 发布,直到2021年公司的项目才开始在实践中应用;自己对http2诸多特点的理解只存在于字面上,于是尝试在no
- 本文实例讲述了python自动化测试的过程,分享给大家供大家参考。具体代码如下:import unittest ##############
- 本文实例讲述了Python整型运算之布尔型、标准整型、长整型操作。分享给大家供大家参考,具体如下:#coding=utf8def integ
- 近日,某个QQ 群里的一个朋友提出一个问题,如何将一个DB 的表结构同步给另一个DB。针对这个问题,我进行了思考与实践,具体的实现代码如下所
- Innodb:[fb]# ll -hs url_comment_*.ibd633M -rw-rw---- 1 mysql mysql 632
- 错误1:wizard安装最后一页,出现cannot create Windows service for mysql.error:0 错误解
- 对于跟我一样,自学javascript且没有其他语言学习经验的人来说,一开始的时候,javascript的调试也是一个比较大的难点,很多基础