这个星期我们团队做了一次内部的技术分享, 南瓜小米粥为我们分享了他对 CSS z-index 的理解和引入层级树这个概念. 这个分享的现场效果很好, 所以我也将 z-index 和层级树话题搬到博客来谈一谈.

本文谈及多个影响节点显示层级的规则, 其中用到的所有例子全部罗列在《position 属性和 z-index 属性对页面节点层级影响的例子》中.

目录

• 顺序规则
• 定位规则
• 参与规则
• 默认值规则
• 从父规则
• 层级树规则
• 参与规则 2
• 总结

顺序规则

如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点.

<div id="a">A</div>
<div id="b">B</div>

定位规则

如果将 position 设为 static, 位于文档流后面的节点依然会遮盖前面的节点浮动, 所以 position:static 不会影响节点的遮盖关系.

<div id="a" style="position:static;">A</div>
<div id="b">B</div>

如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高.

<div id="a" style="position:relative;">A</div>
<div id="b">B</div>

在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.

<div id="a">
	<div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>

上面互相覆盖在什么时候用到这样的实现? 看起来偏门, 其实很常用, 比如说, 电子商务网站侧栏的类目展示列表就可以用这个技巧来实现.

下图是某网站的类目展示区域, 二级类目的悬浮层覆盖一级类目列表外框, 而一级类目的节点覆盖二级类目的悬浮层. 如果使用 CSS 实现展示效果, 一级类目的外框相当于上面例子中的 A, 一级类目的节点相当于 A-1, 二级类目的悬浮层相当于 B.

参与规则

我们尝试不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用.

<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>

W3C 对 z-index 属性的描述中提到 在 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

The z-index property specifies the stack order of an element. Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).

<div id="a" style="z-index:2;">A</div>
<div id="b" style="position:relative;z-index:1;">B</div>
<div id="c" style="position:relative;z-index:0;">C</div>

默认值规则

如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.

<div id="a" style="position:relative;z-index:1;">A</div>
<div id="b" style="position:relative;z-index:0;">B</div>
<div id="c" style="position:relative;">C</div>
<div id="d" style="position:relative;z-index:0;">D</div>

通过检查我们还发现, 当 position 设为 relative, absolute 或者 fixed, 而没有设置 z-index 时, IE8 以上和 W3C 浏览器 (下文我们统称为 W3C 浏览器) 的 z-index 默认值是 auto, 但 IE6 和 IE7 是 0.

从父规则

如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

<div id="a" style="position:relative;z-index:1;">
	<div id="a-1">A-1</div>
</div>
 
<div id="b" style="position:relative;z-index:0;">
	<div id="b-1">B-1</div>
</div>

如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

<div id="a" style="position:relative;z-index:0;">
	<div id="a-1" style="position:relative;z-index:2;">A-1</div>
</div>
 
<div id="b" style="position:relative;z-index:0;">
	<div id="b-1" style="position:relative;z-index:1;">B-1</div>
</div>

很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级.

层级树规则

可能你会觉得在 DOM 结构中的兄弟节点会拎出来进行比较并确定层级, 其实不然.

<div id="a" style="position:relative;z-index:2;">
	<div id="a-1" style="position:relative;z-index:0;">A-1</div>
</div>
 
<div id="b">
	<div id="b-1" style="position:relative;z-index:1;">B-1</div>
</div>

我们认为同时将 position 设为 relative, absolute 或者 fixed, 并且 z-index 经过整数赋值的节点, 会被放置到一个与 DOM 不一样的层级树里面, 并且在层级树中通过对比 z-index 决定显示的层级. 上面的例子如果用层级树来表示的话, 应该如下图所示.

图中虽然 A-1 (z-index:0) 的值比 B-1 (z-index:1) 小, 但因为在层级树里 A (z-index:2) 和 B-1 在一个层级, 而 A 的值比 B-1 大, 根据从父规则, A-1 显示在 B-1 前面.

参与规则 2

前面提到的参与规则认为只要节点的 position 属性为 relative, absolute 或者 fixed, 即可参与层级比较, 其实不准确. 如果所有节点都定义了 position:relative, 并且将 z-index 设为整数值, 根据从父规则, 父节点的层级决定了子节点所在层级.

<div id="a" style="position:relative;z-index:0;">
	<div id="a-1" style="position:relative;z-index:100;">A-1</div>
</div>
 
<div id="b">
	<div id="b-1" style="position:relative;z-index:0;">
		<div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>
	</div>
</div>
 
<div id="c" style="position:relative;z-index:0;">
	<div id="c-1">
		<div id="c-1-1">
			<div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>
		</div>
	</div>
</div>

例子中 A, B-1, C-1-1 作为父节点, z-index 的值相同, 根据顺序规则, C-1-1 在 B-1 之前, B-1 在 A 之前; 又根据从父规则, 无论子节点的 z-index 值是什么, C-1-1-1 在 B-1-1 之前, B-1-1 在 A-1 之前.

如果我们将所有父节点的 z-index 属性去除, 诡异的事情发生了. IE6 和 IE7 浏览器显示效果不变, 而 W3C 浏览器的子节点不再从父, 而是根据自身的 z-index 确定层级.

<div id="a" style="position:relative;">
	<div id="a-1" style="position:relative;z-index:100;">A-1</div>
</div>
 
<div id="b">
	<div id="b-1" style="position:relative;">
		<div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>
	</div>
</div>
 
<div id="c" style="position:relative;">
	<div id="c-1">
		<div id="c-1-1">
			<div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>
		</div>
	</div>
</div>

根据默认值规则, IE6 / IE7 和 W3C 浏览器上的元素存在 z-index 默认值的区别. 我们相信, 仅当 position 设为 relative, absolute 或者 fixed, 并且 z-index 赋整数值时, 节点被放置到层级树; 而 z-index 为默认值时, 只在 document 兄弟节点间比较层级. 在 W3C 浏览器中, A, B-1 和 C-1-1 的 z-index 均为 auto, 不参与层级比较.

而在 IE6 和 IE7 中, 因为 z-index 的默认值是 0, 所以也参与了层级比较.

设置了 position 而没有 z-index 的节点虽然不参与层级树的比较, 但还会在 DOM 中与兄弟节点进行层级比较.

<div id="a" style="position:relative;">
	<div id="a-1" style="position:relative;z-index:100;">A-1</div>
</div>
 
<div id="b">
	<div id="b-1">
		<div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>
	</div>
</div>
 
<div id="c" style="position:relative;">
	<div id="c-1">
		<div id="c-1-1">
			<div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>
		</div>
	</div>
</div>

我们对上个例子改造一下, 将 B-1 的 position 属性删除后, W3C 浏览器显示如下图. 根据定位规则, A 和 C-1-1 会显示在 B-1 的前面; 而根据顺序规则, C-1-1 又显示在 A 前面.

在 IE6 和 IE7 中, 因为 A 和 C-1-1 设置了 position:relative, 而且 z-index 的默认值为 0, 所以也参与层级树比较, 所以有如下效果.

总结

浏览器节点显示层级是一个费力的活, 今天你觉得 A 区块会永远置顶, 但明天因为需求变动, 突然出现 B 元素需要置顶. 一层一层往上堆砌, 某天回头一看, 发现很多区块交错在一起, 而且他们的值一个比一个大, 根本搞不清头绪. 我觉得在操刀干活之前, 最好先将 position, z-index 和层级的关系搞搞清楚, 以免后患无穷.

另外, 非情非得已, 切勿用 JavaScript 计算 z-index, 并将某个节点的 z-index 设置成所有节点中层级最高.

因为篇幅太长, 本文仅从节点属性角度进行讨论, 没有涉及 select 和 iframe 等特殊页面节点考虑, 如果有机会下次再为大家分享.

• CSS 菜单列表设计
• CSS: 突破框框的设计
• CSS 中背景图片定位
• CSS 属性 background-position 的 W3C 定义
• 为什么将多个图标放在一个图片里?

关于 960px 网格系统

960 网格系统的构造如下:
页面总宽度 960px
12 栏布局, 每栏 60px
每栏两边保留 10px 的外边距, 相当于 20px 的槽
内容区域总宽度是 940px

960 布局无疑是非常好的网格系统, 因为相当灵活. 它帮助网页设计者快速地构造以下栏栅数目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用.

存在的问题

问题在于 960 网格系统槽空间和内容宽度. 除去外边距, 实际的内容区域只有 940px. 以往能很好被使用是因为大部分设计者使用 12px 的字号. 而现在大多设计者喜欢将字体大小设为 13px, 甚至更大. 既然文字变大, 你不认为我们同样需要加大内容区域吗?

978 网格

我 (文章作者) 在 Themify 主题中使用 978px 宽度, 分 12 栏, 每栏 54px, 槽宽 30px. 我发现这种结构相当好用, 而且在 1024 x 768 分辨率下表现极佳. 我将槽的宽度增加到 30px, 所以你内容有更多的呼吸的空间. 效果如下:

原文链接: 960 Grid System is Getting Old

译者的看法

我会翻译这个文章是因为本文的作者思考问题的角度与我不一样. 我写过一个类似的文章: 关于页面宽度的选择, 950px 布局与 960px 布局的比较.

我认为作者的想法是对的, 但是不能接受. 我的观点是: 管他 950, 960 还是 978, 最终是为了设计出能充分利用空间的, 灵活且美观的网站, 适合就好. 网格系统对大型的网站很有用, 它可以兼顾多种页面布局的需要, 以减少设计和维护成本. 但对几个页面的小网站来说, 网格系统更可能令网站变得复杂.

一个破小博客搞什么网格, 扯淡嘛.

• 关于页面的宽度: 950 还是 960?
• CSS3 基础知识
• CSS3 下拉菜单
• CSS 菜单列表设计
• 线上 JSON 编辑工具

960 的优势

记得大概一年前, 我到学校给师弟妹们讲网页布局的时候, 还以 Alibaba.com 为例引出 960 经典布局. 960 的最大好处是什么? 它是 2, 3, 4, 5, 6, 8, 10, 12, ... 很多常用的分栏和 gallery 分列数量的公倍数. 如果采用通栏布局, 那么我们可以轻松地算出每列的宽度.

前几天在做一个项目, 通栏无边框布局, 分 4 列, 如果我们的宽度是 960, 那我可以将列宽定义为 25%. 但就现在的 950, 我需要加一个外边距, 并将其一并算入, 如果列宽是 x, 外边距是 y, 那么 4x + 3y = 950.

请不要迷恋 960

嗯, 960 的最大优势是, 它是能支持 1024 显示宽度的, 兼容分栏方式最多的宽度值, 所以并广泛应用. 但是反过来想, 如果我的网站有固定的侧边栏, 那还有必要纠结于是否使用 960 布局吗?

我认为是没有必要的. 如果网站上有固定侧边栏, 那需要考虑的点有二.
1. 我的侧边栏要放些什么? 要多大宽度才足够?
2. 正文区域要取多少才方便内容分栏和读者阅读? (如果正文会出现 gallery, 还是要考虑分栏的)

为什么选择 950?

细心的同学可能会发现, 阿里系很多网站都是 950, 为什么呢? 我问过比我先来的同事, 有人说到我们用的一个 Column Grid Reset, 为了网站统一, 我们就只能用这样的布局. 显然这不是我想要的答案, 依我来看, 这个可能跟外边距有关.

列于列之间存在边距, 所以边距数量比列数少 1, 如 4 列的布局存在 3 个边距. 如果常用的外边距是 10, 那么有下面的分法.
2 栏: 470*2 + 10*1
3 栏: 310*3 + 10*2
4 栏: 230*4 + 10*3
5 栏: 182*5 + 10*4
6 栏: 150*6 * 10*5
8 栏: 110*8 + 10*7
...

也就是说, 如果是带外边距的布局, 那么 950 更加灵活. 由此看来, 做一个带侧边栏的网站, 或许 950 的扩展性或许更好.

后话

其实 980 的布局也很常用, 为什么? 交给大家自己思考.
950, 960, 还是 980 自己选择, 适合自己的最好.

• 960 网格系统即将过时
• CSS Naked Day 2008
• CSS3 下拉菜单
• CSS: 突破框框的设计
• CSS 菜单列表设计

查看 CSS3 下拉菜单演示页面

预览

下面的图片展示出如果浏览器不支持 CSS3 时菜单将是什么的样子.

使用了一个渐变图片

一个由白色过渡到透明的图片被用来实现渐变效果. 因为新的 CSS3 渐变特性还没有被所有浏览器支持, 渐变的背景图片是更保险的选择.

渐变的强度可以通过更改图片的上下偏移量来实现. 并且渐变颜色可以简单地通过更换背景颜色来实现.

CSS 代码

我不会逐行地解释 CSS 代码. 但会在下面的图片中将重点标出, 说明这个下拉菜单是这样编写出来的.

译者的话

昨天翻译了《CSS 基础知识》一文, 因为没有实例觉得不完整, 自己对 CSS3 的了解确实有限, 所以厚着脸再翻译了这位同学较早前的一个文章. 文中内容同样通俗易懂, 效果相当好而且实用.
原文链接: CSS3 Dropdown Menu

最近 CSS3 说得很火, 近如咫尺, 但是鄙人认为这是一个假象, CSS3 要普及还需要经历一个悠长而曲折的阶段. 在为 CSS3 欢呼的同时, 我们不能否认 CSS2 的可用性更高. 我认为 Windows XP 和 Vista 离场的时候将是 CSS3 普及之时, 而在 PC 之前, Mobile Phone 可能会捷足先登.

• CSS3 基础知识
• CSS 菜单列表设计
• WordPress 3.0 导航菜单 (开发篇)
• WordPress 多级导航菜单
• WordPress 3.0 导航菜单 (使用篇)

RGBA

前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明)

RGBA 可以应用到所有与颜色相关的属性中. 例如: 文字颜色, 边框颜色, 背景颜色, 阴影颜色, 等等.

文本阴影

文本阴影由下列顺序的参数构成: x-offset, y-offset, blur, and color.

将 x-offset 设置为负数即将阴影移动到左侧. 将 y-offset 设置为负数即将阴影移动到上方. 请不要忘记你可以使用 RGBA 来控制阴影的颜色.

同时你还可以为 text-shadow 指定一个阴影列表 (以逗号分隔). 下列例子使用了两个 text-shadow 定义来控制页面输出效果 (1px 上阴影和 1px 的下阴影).

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

圆角

圆角的定义方式与 padding 和 margin 属性类似 (如: border-radius: 20px). 便于浏览器渲染圆角, 为 webkit 添加 "-webkit-", 为 Firefox 添加 "-moz-".

你可以为每个角设定不同的值. 请注意 Firfox 和 webkit 对圆角属性的不同命名方式.

Box 阴影

构成 Box 阴影的参数序列与 text-shadow 属性相同: x-offset, y-offset, blur, and color.

再一次说明一下, 你可以应用一个或多个 Box 阴影. 下列例子定义了三个 Box 阴影.

-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

译者的话

今天看到一篇关于 CSS3 的文章, 很基础, 但很实用. 这翻译一下, 希望更多人会为 CSS3 的到来做好准备.
原文链接: The Basics of CSS3

• CSS3 下拉菜单
• 在主题中添加 LavaLamp 菜单效果
• 纯代码打造圆角边框
• CSS 菜单列表设计
• JavaScript 放大镜 - 移动镜片

如果图片高度或者宽度不足 150px, 这样做必然将图片拉伸, 很不美观. 用什么办法可以让图片都显示为 150x150, 并居中显示? 可以用 CSS 实现...

跟帖中有同学给出了一些解决办法, 都说得很好, 但是我还是想说说自己常用的处理办法. 我这也不是什么高明的办法, 5 年前就有人在用, 但它方便快捷.

原理很简单, follow me.
1. 给 IMG 元素一个透明图片. 可以选用 GIF 图片, 因为文件头比较小, 图片 1px*1px 就可以了. (真扣!)
2. 设定图片的宽和高. width="150" height="150"
3. 然后通过 style 属性的 background 将需要显示的图片地址作为背景显示在 IMG 元素上.
4. 图片的 background-position 设为 50% 50%.

Okay, 我们已经得到一个不拉伸的, 垂直和水平居中的缩略图. 例子看下面.

<img src="{某透明图片的 URL}" alt="Google 别走!" style="background:url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat 50% 50%;width:150px;height:150px;" />

另外, 比较常用的方法还有用 JavaScript 在 DOM ready 的时候将图片载入, 并通过计算图片和外框的大小为图片加上 margin 令图片居中. 这样可以让 document 优先加载, 保证页面显示速度, 但是, 一旦图片数量比较多, IE 可能会卡.

好了, 技术说完了八卦一下. 5 年前发生了什么? 记得当时我刚买计算机, 上网下载图片总是下载到一个透明的 GIF 图片, 百思不得其解, 所以研究了一番 (当年的小白很杯具). 后来发现网站上的图片都是通过背景的方式显示出来的. 虽然网站要防止用户在网页上下载图片几乎是不可能的, 但是这个简单的方法起码可以做到两点.
1. 保证另存网页的时候不会下载页面上的图片.
2. 粗心的用户下载了大量图片后才发现下载下载的全部是透明图片.

• CSS 中背景图片定位
• CSS 属性 background-position 的 W3C 定义
• 纯代码打造圆角边框
• CSS 菜单列表设计
• CSS: 突破框框的设计

最近在编写 CSS 的过程中, 发现 W3C 组织对 background-position 的验证有所调整, 虽然只是个小变动, 但可能影响很多人的编码习惯, 所以我决定提出来讲讲.

我们先来看看 W3C 对 background-position 的定义, 值的编写规则如下:

[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

从编写规则我们可以看出, background-position 的值可以是代号, 数值, 百分比; 可以是一个单值, 双值; 还可以是 inherit.

background 属性中可以包含 background-position 属性, 其编写规则一致. W3C 列出的例子如下:

body { background: url("banner.jpeg") right top }	/* 100%   0% */
body { background: url("banner.jpeg") top center }	/*  50%   0% */
body { background: url("banner.jpeg") center }		/*  50%  50% */
body { background: url("banner.jpeg") bottom }		/*  50% 100% */

前两行列出了横向和纵向两个位置, 第一个是横向的, 第二个是纵向的. 后两行只有一个值, 另一个值缺省, 缺省值将被浏览器默认为 center.

我也是一直这样写的, 也就是当需要双值的时候写两个值, 不需要的时候单值. 但是今天发现这样书写的 CSS 代码会被 W3C 的 CSS Validator 认为是错误的, 将 Profile 设置为 CSS 2, CSS 2.1, CSS 3 进行校验都会出错, 出错信息如下:

Value Error : background Parse Error [empty string]

也就是说, 今后在 background 标签上不能再使用单值为图片定位, 否则不能通过 W3C 认证.

还没结束, 因为我对此好奇, 所以也在 background-position 属性上使用单值去校验了几次, 发现并不会报错. 也不知道 W3 组织是基于什么考虑, 让两个属性的编写规则进行差异处理, 否定了自己的文档而且还不能统一.

好吧, 我就改一下吧. 于是我在迷惑和无奈中把值补全了, 并不断地安慰自己说, 把东西写全是有好处的, 起码浏览器解析速度将有所提高 (尽管微乎其微).

• CSS 中背景图片定位
• CSS 菜单列表设计
• 为什么将多个图标放在一个图片里?
• CSS: 突破框框的设计
• 用 CSS 背景属性代替图片 SRC

英文原文: CSS: Design Out Of The Box

案例 1: Huge Inc

真正迷住我的是 Huge 网站的顶部设计. 注意看这是如何将页面元素扩展到框框之外的.

案例 2: Jason Santa Maria

从 Jason 在他网站上放置的作品数量和页面细节来看, 毫无疑问地他是网站设计领域最好的设计师之一. 点击进入文章, 你会发现几乎所有的文章页面都是独一无二的, 它们拥有与众不同的式样表. 一些视觉图像在栏栅和框框之内, 有些在其之外.

案例 3: A Brief Message

和 Jason Santa Maria 相似, ABriefMessage.com 上的所有文章都拥有独特的图片和 CSS 样式表. 不想其他传统的博客, 网站正文被完美的放置, 文字环绕着图片 (就像在阅读出版物一样).

案例 4: Trent Walton

TrentWalton.com 专注于网站顶部的设计, 所有文章里都显示不一样的背景和标题排版.

案例 5: Wonderbra Ultimate Strapless

虽然可以在 Wonderbra 网站是一个令人喜爱的设计. 它的内容和图片恰当地放置在一起. 咋一看以为是 Flash 网站. 然后我查看页面代码才发现它是用 CSS 和 JavaScript 来实现的. (感谢 #26 楼朋友的更正)

案例 6: Fox

Fox - Fringe 网站打破了边框布局, 使用展开的背景图片将顶部和底部连接在一起. 而且框框之间的倾斜切入的分割看起来很有意思. 请不要忘记也去看一下其他的 Fox TV 秀网站.

案例 7: Mezzoblue

Mezzoblue 将图片延伸至网格之外. 这种效果可以通过使用负值的 margin-left 属性轻易地获得.

速成 CSS 教程

使用 CSS 绝对位置 (演示)
下面的教程将使用 position 属性模仿 Huge 网站. 使用 position:absolute 来放置每一个元素. 然后为 logo, 导航和内容部分较高层次的 z-index 属性 (这样它们就可以显示在图片上方).

使用背景图片 (演示)
在本例中, logo 和正文将被嵌入图片里面. 为使 logo 的文字可以被点, 首先得为 H1 标签定义绝对位置, 然后用文本缩进的方法将 H1 a 的文字隐藏起来 (这里也可以看一下 NeoEase 以前介绍的例子).

使用绝对位置将 Click Here 按钮放置于精确的位置. 为之定义背景图片并使用文本缩进将文字隐藏起来. 当鼠标移动到按钮上方则切换一个背景图片.

使用 margin-left 属性 (演示)
这个技巧极其简单. 只是定义一个为负值的 margin-left 属性并使用 float:left.

译者的话

以上案例中, 案例 7 的 Mezzoblue 是我最喜欢的一个. 美观是美观, 实用始终第一, 制作网页的时候使用大量图片会带来一定的副作用, 如产生大量流量费用, 打开图片耗时等等, 所以在仿效以上案例时应懂得取舍.

制作网页时, 在可选的情况下不建议使用 position 属性, 大量的使用 position 属性会令网页难以维护.

可能有人会问, 如果做成这样的效果, 为什么不干脆做成 Flash 网站呢? 因为 Flash 的封闭性, 令搜索引擎不能抓取信息, 用户也不能对其使用浏览器的页面文字搜索, 无论是 SEO 还是 UED 优化都不是好的选择. 所以, 请尽量使用文字和图片, 而非 Flash.

• CSS 菜单列表设计
• 用图片代替文字标题
• CSS 中背景图片定位
• 在主题中添加 LavaLamp 菜单效果
• CSS 属性 background-position 的 W3C 定义

这是一个速成的 CSS 教程, 将向您展示如何使用 CSS 线条属性或者背景图片创建一个菜单列表. 这个技巧会在 <li> 元素上定义 border-bottom 属性, 并使用绝对位置的将嵌套在里面的元素覆盖在线上. 这是非常灵活的, 你可以通过修改边线和背景图片轻易地更改设计. 如果浏览器的字体是可缩放的, 那么它会相当的好用.

演示页面: Demo: CSS Menu Design

原文链接: CSS: Menu List Design

1. HTML 代码

请看一下这里的 HTML 代码和图解, 这有助于你更好地理解后面的 CSS.

<ul>
	<li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>
</ul>

2. CSS 代码

重点在这里.

• 为 <li> 元素添加 position:relative 和应用 border-bottom 风格.
• 使用 position:absolute 和负数的 bottom 定位属性将下横线两端的元素下移并覆盖在线条上面.
• 注意: 请使用相对于字体尺寸 (em) 去控制边距.

.menu {
	width: 500px;
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
	font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
	clear: both;
	margin: 0;
	padding: 0 0 1.8em 0;
	position: relative;
	border-bottom: dotted 2px #999;
}
.menu strong {
	background: #fff;
	padding: 0 10px 0 0;
	font-weight: normal;
	position: absolute;
	bottom: -.3em;
	left: 0;
}
.menu em {
	background: #fff;
	padding: 0 0 0 5px;
	font: 110%/100% Georgia, "Times New Roman", Times, serif;
	position: absolute;
	bottom: -.2em;
	right: 0;
}
.menu sup {
	font-size: 60%;
	color: #666;
	margin-left: 3px;
}

3. 变换线条风格

你可以简单地通过修改 CSS 和边距来变换 <li> 元素的风格.

li {
	border-bottom: dashed 1px #000;
	padding: 0 0 2.3em 0;
}

4. 使用图片作为线条

你同样可以使用背景图片来实现菜单列表的线条.

演示页面

li {
	background: url(images/circle.gif) repeat-x left bottom;
}

5. IE6 版本

如果你还在使用满是 bug 的 IE6 浏览器, 你会发现布局不正常. 为了解决这个问题, 可以为 <li> 元素加入一些修复处理, 代码如下:

演示页面

/* clearfix */
.menu li:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.menu li {display: inline-block;}
/* Hides from IE-mac \*/
* html .menu li {height: 1%;}
.menu li {display: block;}
/* End hide from IE-mac */

• 在主题中添加 LavaLamp 菜单效果
• 纯代码打造圆角边框
• 将 iNove 菜单上的小屋图标换成文字
• 话说前端 (1)
• CSS 属性 background-position 的 W3C 定义

又是 4 月 9 日, 一年一度的 CSS 裸奔节, 今年已经是第四届了.

我去年已经参加过了, 好玩! 也通过这个活动找到了网页上不少的问题. 如 textarea 的 rows 和 cols 忘记设置了, span 和 div 标签混用等问题. 而今年... 我不参加了. 不是不想参加, 只是我现在的网页做了一些 SEO 处理, 把网站的 "衣服" 扒掉绝对会很难看, 就免得恶心大家了. 再说, 最近 Great Firewall 升级, 网页访问速度不佳, 就不想折腾了.

Anyway, 裸奔节很好玩, 没玩过的朋友绝对要玩一次, 说不定会有意外收获哦.

CSS 裸奔节是全世界 Webmasters 的狂欢派对, 旨在提升网页标准, 重视语义标记, 保持良好结构, 让网页保持整洁和简洁. 参与方法很简单, 你只需要在这一天去除页面上所有的 CSS 样式和广告, 到 CSS Naked Day '09 页面提交你的网址, 就可以了. 如果审核通过, 组织会为你生成一个永久链接指向你的网站.

活动主页: CSS Naked Day '09

• CSS Naked Day 2008
• 用 CSS 背景属性代替图片 SRC
• 点名桌面秀
• CSS: 突破框框的设计
• CSS 中背景图片定位

目前我的机器上已经安装了 8 款浏览器, 听说 IE8 要发布了, 真叫人惊心动魄. 这不, 以后又多一个标准要兼容了, 感谢微软给我增加工作负担. 玩 WordPress 有一年多了, 做了很多主题, 自己从中也总结了一点心得体会, 在恶魔来世之前总结一下方便以后使用, 同时分享出来希望对初学者会有所帮助.

开发平台的选择

我很幸运, 我接触网页前台的时候 Firefox2 已经十分红火, 我的所有工作都是在 Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在 IE 做好再到别的浏览器兼容来得容易, 因为 IE 对老标准支持还是很不错的, 而 IE 的一些特有功能人家却不支持. 所以我推荐以 Firefox 结合 Firebug 扩展作为平台.

Hack 的顺序

使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE7 -> 其他

Hack 的方法

说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.

1. 同一文件中处理.
如: id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.

#bgcolor {
	background:red !important; /* Firefox 等其他浏览器 */
	background:blue; /* IE6 */
}
*+html #bgcolor {
	background:green !important; /* IE7 */
}

IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.

上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (JavaScript 除外).

2. 不同文件中处理.
为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为 IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C 验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.

<!-- 放置所有浏览器的样式 -->
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- 只放置 IE 必须的, 而不能通过 W3C 的代码 -->
<!--[if IE]>
	<link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->

浏览器的 CSS Hack 方法有很多, 比如 @import 引入, > 过滤等等方法, 但以上就是我用过的全部.

网页前台的兼容不应该仅限于对过去的浏览器支持 (向前兼容), 更应该对未来的浏览器服务 (向后兼容). 因为浏览器的发展很快, 而经常上网的人更新软件的频率是非常高的, 所以向后兼容的意义甚至比先前兼容还来得重要. 如何向后兼容呢? 只要符合标准你的网站就永远不会过时 (IE 系列除外). 所以我的宗旨是尽量做到标准, 不得已才 Hack, 并尽量使用比较简单的方法去解决.

最后骂一句收场: IE8 同样是垃圾!

• 在主题上添加风格切换功能 (1)
• CSS 属性 background-position 的 W3C 定义
• iNove 中鼠标悬浮显示 @ 评论
• 纯代码打造圆角边框
• CSS 中背景图片定位

CSS 很直观, 但显然不够灵活, 导致页面设计中出现大量冗余代码. 不能使用变量和循环, 若想清除某个类型所有属性的值还需要一句一句的清除, 而不是一句完成. 而最令人痛心的莫过于现实圆角边框, 或许以下的代码是我们梦寐以求的:

.roundbox { round:3px; } /* 圆角大小为三像素 */

奈何事与愿违, W3C 里面没有这样的东西. 某些浏览器支持一些特殊的属性可以实现类似功能, 但那并不能得到其他浏览器的支持. WordPress 后台就使用了这样的属性, Firefox 等一些浏览器上显示非常好看, 但 IE 上却惨不忍睹.

为了实现小圆角, 各网站是各出奇招, 什么方法都有. 而我比较喜欢百度知道的实现办法, 因为零图片, 并且易于控制, 因为圆角部分是在 box 外部, 随时可以无害删除. 比很久之前我介绍的纯代码打造小圆角强多了.

百度知道的方法借用了 div 在 float:none 时占用全行的特性, 在 box 上方和下方各都放置几个 div, 并对这些 div 设置背景色, 边框和外边距. 也就是说, 我们只要固定了外层的宽度, 其他的就不需要操心了. 我模仿百度知道的样式做了一个例子, 效果可以参考一下右边的截图. 实现代码如下:

<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="background:#E1E7E9; border:1px solid #B0BEC7; border-width:0 1px;">
	<div style="font-size:12px; font-weight:bolder; font-family:Verdana; color:#258; padding:2px 10px 5px;">
		Cascading Style Sheets
	</div>
	<div style="background:#FFF; margin:0 3px; font-size:11px; font-family:Verdana; color:#333; padding:5px 10px; overflow:hidden;">
		Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc.
	</div>
</div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>

其中有一点是很重要的, 记得为上下圆角所在的行添加 overflow:hidden 属性, 否则在 IE 中将会相当的恶心.

圆角是实现了, 但并不是完美无瑕的, 边角有锯齿 (纯代码打造小圆角里面的方法可以消灭锯齿, 只要你不嫌麻烦). 为什么不能使用过渡颜色呢? 因为圆角所在的行只能控制背景和边框两处的颜色, 所以不能在同一行搞出比较复杂的颜色过渡. 因为颜色被限制了, 所以圆角的大小也被限制了 (有锯齿的圆角太大会显得很难看), 如果你的 box 有边线, 圆角大小建议不要超过 4 个像素, 如果没边线, 也不要超过 6 个像素. 有更大的圆角需要最好还是采用图片, 处理简单又方便.

访问过腾讯问问的朋友可能会发现, 它的样式是抄袭百度知道的. 但你知道吗? 其实它的圆角效果是使用图片实现的. 有兴趣的朋友可以去研究一下.

以下是我个人的一点建议, 希望对你有帮助.

什么时候使用纯代码制作圆角边框?
1. 你驱使代码的能力胜于图形.
2. 你追求更快的网页显示速度, 就算是微乎其微的差别.
3. 在模板或主题中使用.

什么时候使用图片制作圆角边框?
1. 你驱使图形的能力胜于代码.
2. 你不在乎所差不几的网页显示速度, 更注重直观和维护方便.
3. 在文章或其它动态内容中使用.

• 纯代码打造小圆角
• 将 Blogroll 分为两栏 (1)
• 用 CSS 背景属性代替图片 SRC
• CSS z-index 属性的使用方法和层级树的概念
• CSS 菜单列表设计

在制作网页时, 为什么要将多个图标放在一个图片文件里面呢?

经常在网上搜罗资源的朋友可能会发现, 很多网站喜欢将小图标拼在一个图片文件里. 然后在 CSS 中通过 background-position 定位访问图标, 访问量大的网站尤是如此. 为什么呢? 分开管理不是更加灵活吗?
大家都这么做当然有它的优点, 但这同样存在缺点.

优点:

1. 1 + 1 < 2
图标放在一起, 可以令图标的总容量稍小一点. 这不是最重要的, 但我可以告诉你, 很多程序员都是完美主义者.

2. 让连接次数大量减少
用过 Opera 的朋友可能会对它那个显示图片下载的进度条印象很深, 它会显示 "已下载图片/图片总数". 对于 Web 服务器上的每个独立资源, 都需要去连接和获取的. 所以大家都设法将很多图标放在一个图片上, 连接一次就全部取回来. 这也许是一图多标的主要目的.

3. 让浏览器将图标预先下载
浏览器为了尽快地显示页面, 一般只是将打开页面时用到的图片下载到本地, 而一些可能用到, 但没有立刻被用到的图片需要在应用的时候再进行下载. 最经典的例子可能是导航菜单的 Tab 图标, 如果普通状态的 Tab 图标和鼠标悬停时的图标都是独立放置的, 那么当你鼠标移动到 Tab 按钮时, 图标才开始下载, 这样会带给用户很不好的视觉效果. 所以我觉得遇到这种情况时, 将多个图标合并在一起的处理是必须的.

缺点:

1. 图片难以管理, 难以定位
如果你要更换一个图标, 那么你需要编辑整个大图片. 如果你要改变一个图标的大小, 很可能你需要重新计算它的位置, 甚至无从下手, 只能在别的位置再添加一个图标.

2. 2 > 1
两个图标合成的图片是肯定比其中一个图标独占的图片大的, 也就是说, 下载这个图片所需的时间将比单独一个图标用的时间长. 浏览器显示图片一般都是下载完则显示或者边下载边显示的, 如果你那几个图标组成的图片容量比较大, 那么它们不能逐个显示予用户, 会造成很不好的用户体验.

应用:

1. 让图标尽量排列得有规律
有规律地排放的图标跟容易定位和维护, 这里的间隔可以使用 16, 32, 48, 96 等标准尺寸.

2. 将背景颜色一致的图标放置在一起
如果背景颜色不一样, 最好分为两个或多个图片放置, 特别是背景颜色相近的, 很容易混淆.

3. 将相同栏目的图标放置在一起
这样可以少写一些 CSS 代码. 设置一个 background, 再在每个项设置 background-position 就行了.

4. 不要将大图绑在一块
大部分用户都不会耐心地等待页面的所以文件被下载完毕再进行阅读, "不耐烦" 会驱使他们去点 close.

关于图片定位, 可以看看这里: CSS 中背景图片定位

拓展:

万物都是相通的, 软件和互联网技术也一样. 如果图片作为网络资源需要每个进行连接来获取, 那么 .js 文件和 .css 文件也是如此. 我们应该将可能放在一起的资源绑起来. 这样可以为你省下一些资源, 也可以满足你追求完美的虚荣.

但切忌过度. 并不是所有东西都可以绑一块的, 没有人会将洗衣粉和饼干缠在一起的. 将有相关性的, 或者特别零碎的放在一起都是可以的, 我相信聪明的你一定会有自己的一套分类方法.

• CSS 属性 background-position 的 W3C 定义
• CSS 中背景图片定位
• 将 iNove 菜单上的小屋图标换成文字
• CSS 菜单列表设计
• CSS: 突破框框的设计

1. 关键字, 例如: background-position: top right;

优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制.

2. 像素, 例如: background-position: 0px 0px;

优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
缺点: 你必须知道确实的值.
原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.

3. 百分比, 例如: background-position: 80% 50%;

优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.
缺点: IE 中无法处理复杂的百分比定位. 你可以看看这个测试.
原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.

• CSS 属性 background-position 的 W3C 定义
• 为什么将多个图标放在一个图片里?
• 用 CSS 背景属性代替图片 SRC
• CSS 菜单列表设计
• CSS: 突破框框的设计

很多 Blogger 都会遇到这么一个问题: 当侧边栏某个列表中的项目过多时, 它看起来细长而不饱满, 浪费空间又不美观.
为解决这问题各施其法, 有的选择了一个三栏的主题, 感观上会和谐一点; 有的随机显示几个链接, 让它看起来不那么狭长; 有的是一不做二不休地, 首页不将它显示出来 (如: Blogroll 放 Links 页); 但还有一些人, 他们将列表的内容划分为两半, 空间得到充分利用, 界面也好看.
小弟也是看到别人的这个巧妙设计, 才得到启发的. 点子很好, 但我不能看别人代码呀, 只好自己想法子了...
半年前我写过一篇日志, 让侧边栏列表一分为二. 那是用 JavaScript 实现的, 是一个相当愚蠢的办法, 而且不能支持 Widget. 但其实可以用 PHP 生成我们想要的效果. 看! 看! 就是右图的效果...

计划:
整个教程将以 Blogroll 为例, 会分成几个部分开展.
第一部分, 也就是这次, 我将会分析一下页面结构, 为以后的部分做准备. 这是一个重要的环节, 因为要解决 IE 和其他浏览器间的不兼容现象. (过程中我们会见到 IE 的不可理喻)
第二部分, 我会尝试改写 WordPress 的源代码或者尝试自己写一个以达到我们的目标.
第三部分, 我将会介绍一下, 如何将第二部分的内容做成支持 Widget 的版本.
第四部分, ... (先计划这么多吧, 完成了前面的再说.)
这次介绍的第一部分需要一些 HTML 基础和 CSS 知识, 你准备好了吗?

原始版本:
我们先得看看 Blogroll 目前的结构.

<h3>Widget Title</h3>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
	<li>Item 6</li>
</ul>

再来看看它的显示效果: Firefox, IE6/7
嗯, 好! 还蛮工整的, 但是列表的右边空空的, 又浪费空间又难看. 最好我们可以将它分成两栏, 这样的话, 用三行就能够将六项给显示了. 看来需要改造一下看看...

改造版本 1
本来是一行放一个, 而改造的目标是一行放两, 改造后的代码如下:

<h3>Widget Title</h3>
<ul>
	<li>
		<div style="float:left;width:50%;">item 1</div>
		<div style="float:left;width:50%;">item 2</div>
	</li>
	<li>
		<div style="float:left;width:50%;">item 3</div>
		<div style="float:left;width:50%;">item 4</div>
	</li>
	<li>
		<div style="float:left;width:50%;">item 5</div>
		<div style="float:left;width:50%;">item 6</div>
	</li>
</ul>

改造版 1 的显示效果: Firefox, IE6/7
为了突出主要的样式, 我将 style 属性直接加到标签里面了.
在 IE6 和 IE7 中已经得到我们想要的效果了, 很好! 但是在 Firefox, 甚至其他任何内核的浏览器中, 都错位了, 这是因为两个浮动的标签没有固定下来, 跟它下方的东西重叠在一起了. 那么, 继续改...

改造版本 2
在这个版本中, 我们需要将浮动的标签固定起来. 为此我们选用 CSS 中的 clear:both 来让它左右两边都没有东西 (将 clear 后面的东西挤下去), 改造后的代码如下:

<h3>Widget Title</h3>
<ul>
	<li>
		<div style="float:left;width:50%;">item 1</div>
		<div style="float:left;width:50%;">item 2</div>
		<div style="clear:both;"></div>
	</li>
	<li>
		<div style="float:left;width:50%;">item 3</div>
		<div style="float:left;width:50%;">item 4</div>
		<div style="clear:both;"></div>
	</li>
	<li>
		<div style="float:left;width:50%;">item 5</div>
		<div style="float:left;width:50%;">item 6</div>
		<div style="clear:both;"></div>
	</li>
</ul>

改造版 2 的显示效果: Firefox, IE6/7
Firefox 中终于 fixed 了! 但这么一弄, 在 IE 中却多了一块来历不明的空白. 再改吧...

改造版本 3
网上很多人说, IE 中的 clear 是有高度的. 但我不这么觉得, 不信你将它的高度设为零看看...
怎么都好, 我确实不知道 IE 为什么要这样显示 (谁能告诉我?), 但我们可以将它解决掉, 只要在外面再套一层 DIV... 修改后的代码如下:

<h3>Widget Title</h3>
<ul>
	<li>
		<div>
			<div style="float:left;width:50%;">item 1</div>
			<div style="float:left;width:50%;">item 2</div>
			<div style="clear:both;"></div>
		</div>
	</li>
	<li>
		<div>
			<div style="float:left;width:50%;">item 3</div>
			<div style="float:left;width:50%;">item 4</div>
			<div style="clear:both;"></div>
		</div>
	</li>
	<li>
		<div>
			<div style="float:left;width:50%;">item 5</div>
			<div style="float:left;width:50%;">item 6</div>
			<div style="clear:both;"></div>
		</div>
	</li>
</ul>

改造版 3 的显示效果: Firefox, IE6/7
Bingo! 各浏览器中都没问题, 我们要的就是这个效果.

后记:
这就是我们要整出来的结构, 下回我们将用 PHP 写一个脚本, 让它自动生成.
你是不是已经看明白了? 如果你还没弄明白, 你可以下载演示代码回去温习一下.
如果你还有疑问或者好的建议, 请在此留言, 我们讨论讨论...

• 将 Blogroll 分为两栏 (4)
• 将 Blogroll 分为两栏 (3)
• 将 Blogroll 分为两栏 (2)
• WordPress 不同页面显示不一样的侧边栏
• 让侧边栏列表一分为二