主要是利用 position 属性的 absolute 和 relative 配合 z-index 来实现的，通过position:absolute将需要平铺的背景层叠在另一背景上，这样即可以实现同一位置的两个背景，再使用z-index将内容提升到最高阶显示。

<div id=”a”>
<div id=”b”>
<ul>
<li><a href=”http://www.prower.cn/category/internet”>互联网谈</a></li>
<li><a href=”http://www.prower.cn/category/interaction”>交互设计</a></li>
<li><a href=”http://www.prower.cn/category/technic”>技术言论</a></li>
</ul>
<div id=”c”></div>
</div>
<div id=”d”></div>
</div>

首先将其中一个背景样式写在<div id=”a”>上，然后是将另一个背景样式写在<div id=”d”>上，<div id=”b”>为内容层，<div id=”c”>是另一个背景样式层，可以自由的出现在<div id=”b”>里面的任何一个位置。如土豆网中间的那个有弧线的背景。

然后是样式方面：

#a {background:#f00; height:50px; position:relative; width:100%;}
#b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;}
#c {background:#ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;}
#d {background:#f60; height:50px; position:absolute; left:0; top:0; width:50%; z-index:1;}
ul {line-height:50px; position:relative; z-index:9001;}

具体代码参见：两侧背景自动延伸的CSS实现方法

原主题发布页里的主题包已经更新了，最新下载的不需要再修改了。

日期问题

主题中使用的日志时间调用是：

<?php the_data () ?>

这个函数是可以通过后台的设置来修改时间的显示方式的，但也存在一个问题就是，如果一天之内发布了两个或以上的日志，那么只会在最新发布的日志显示时间，同一天内的其他日志将不会在列表里显示日期出来，只需要将index.php里的这个函数修改为：

<?php the_time(‘Y-m-d’) ?>

这样日期问题即可解决，但这样日期的设置就是固定的，不能通过后台去修改。

侧边栏样式问题

Prower V3主题支持小工具挂件，但启用小工具之后标题样式会有些问题，这是因为当时写主题的时候疏忽造成的，functions.php文件中的：

if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ”,
‘after_title’ => ”,
));

只需修改下以下代码皆可：

if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));

另，最近即将推出Reeoo.com这个主题，不过是以付费的方式提供，想尝试一下付费主题是否在国内行得通，欢迎留言讨论。

比如这个示例图中的边框，取一个DIV将A、B两部分都包容起来，然后写border：1px solid #000;再给A容器写右边框border-right:1px solid #000;B容器也写边框border-left:1px solid #000;这样不管哪边高哪边低，都会保证起码有一条边框线是从头到底的。

但这样两条边框线就会造成重复，于是可以给B容器写margin-left:-1px;这样让两条边框重叠在一起，即可解决边框重复的问题。

PS:回头一看，写了个这么囧的日志，算了，既然写了就发了吧。

今天在写页面的时候，碰到了折行的问题，正好复习一下CSS中关于断行处理的问题，在这里纪录一下心得：

HTML结构及CSS样式如下：

<ul>
<li><a href=”#”>…</a></li>
<li><a href=”#”>…</a></li>
<li><a href=”#”>…</a></li>
</ul>

li {float:left; margin-right:10px; line-height:20px;}

这是不定宽的浮动，可是当这段结构在IE6及IE7下显示却变成了这样，文字被折行显示：

这个折行显示的问题，只要强制文本不换行显示就可以解决，在CSS中关于换行的属于有两个分别是word-break以及white-space，其中word-break是IE的专有属性，由于这个折行问题只在IE下会出现，所以先试一下word-break。

word-break有三个参数：normal、break-all、keep-all

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

由于是要不允许文本字间断行，所以使用第三个参数keep-all，但是当文字中有空格的时候，依然会出现折行的现象：

而white-space则是检索对象的空格处理方式的，同样有三个参数：normal、pre、nowrap

normal : 默认处理方式

pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象

nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。参阅td，div等对象的nowrap属性（特性）

所以当文本对象中存在空格，导致文本显示折行的话，可以使用white-space:nowrap，即可解决文本折行的问题。

网页设计师与平面设计师都归类为设计师，其实这两个职业是跨行业的，虽然有很多设计师一直在跨行业工作着。这两个职业的最大区别应该是在思维上，对于平面设计师来说，天马行空般的创新思维很重要，他们需要的是在一张白纸上勾画出符合客户需求的绚丽创意；而对于网页设计师来说，更多的是需要考虑创意在网络上实现的成本以及可能性，天马行空般的思维成了次要的。

这也就是为何很多时候，网页设计师去做平面设计师的工作要比反过来容易得多。也许可以用这样一个比喻来形容：网页设计师去做平面设计师的工作就像是放开圈养在马棚里的马，也许没了撒野的能力，但还能奔跑；而平面设计师去做网页设计师的工作，则更像是原本狂奔的野马突然被圈养在马棚里，框架的束缚会让野马变成手足无措。

回到标题提出的问题，为什么视觉设计师需要懂HTML？

HTML就是那束缚野马的框架。任何天马行空的创意都需要限定在这个框架之中，并非是创意无法实现，而是需要考虑实现创意的成本。

对于平面设计师来说，画面是设计的核心，画面就是他们所想要表达的内容；而对于网页设计师来说，画面则是用来衬托内容的一种形式，内容才是网页设计师所要表达出来的核心。

相对于平面设计的单一性来说，网页设计更多的还有注重设计的可重用性。每个网站都是由很多的页面构成的，而这些页面中的样式大部分都是可重用的。

如果视觉设计师不懂HTML，不能准确的分析一个网页的结构，那将可能给开发的成本带来很大的提高。而互联网产品的一个特点是更新迭代的时间快，如果投入的成本过高则会影响更新迭代的速率，最终将会影响到产品的发展。

最后说一点，如果视觉设计师不懂HTML，那对开发人员来说，则是一种灾难。

有朋友觉得这个样式好看些，希望共享样式出来，所以在这里就把样式共享出来。这里的修改只针对Prower V2这个主题。

先下载这个图片上传到主题的images文件夹里：

然后复制这段HTML结构到主题的rsidebar.php文件里替换原来的RSS结构，当然你要修改其中的订阅地址为你自己博客的订阅地址：

<div id=”rss”>
<link title=”RSS 2.0″ type=”application/rss+xml” href=”http://feed.prower.cn” rel=”alternate” />
<a id=”rssGoogle” title=”用Google阅读器订阅” href=”http://fusion.google.com/add?feedurl=http://feed.prower.cn” target=”_blank”>用Google阅读器订阅</a>
<a id=”rssIcon” title=”RSS订阅” href=”http://feed.prower.cn” target=”_blank”>RSS订阅</a>
<a id=”rssXiangou” title=”用鲜果阅读器订阅” href=”http://www.xianguo.com/subscribe.php?url=http://feed.prower.cn” target=”_blank”>用鲜果阅读器订阅</a>
</div>

再复制以下样式到style.css文件里，替换原来的RSS样式：

#rss {width:290px; height:50px; overflow:hidden;}
#rssGoogle,#rssIcon,#rssXiangou {float:left; padding-top:50px; overflow:hidden; display:block; background:url(images/rssBg.png) no-repeat;}
#rssGoogle:hover,#rssIcon:hover,#rssXiangou:hover {background:url(images/rssBg.png) no-repeat -290px 0;}
#rssGoogle {background-position:0 0; width:113px;}
#rssGoogle:hover {background-position:-290px 0;}
#rssIcon {background-position:-113px 0; width:79px;}
#rssIcon:hover{background-position:-403px 0;}
#rssXiangou {background-position:-192px 0; width:98px;}
#rssXiangou:hover {background-position:-482px 0;}

完成以上三步，侧边栏的订阅样式就可以和我现在的一样了。

更新：如果复制过去后不能显示图片，请手动修改HTML结构里的双引号。

从前年开始微软就说要强制升级用户电脑中的IE6到IE7，结果事实证明这只是个不是愚人节的愚人玩笑而已，直到今天IE6仍在用户桌面浏览器的份额中领先着。

而最为让开发人员头痛的是，一台电脑默认情况下只能装一个版本的IE，所以开发时即使要调试IE浏览器也只能是通过安装绿色版或是其他模拟IE的软件去进行调试，但由于这些软件并不是原生的IE浏览器，所以有些时候开发人员不得不面临在软件里调试正常的页面到了原生的IE下又出现问题的尴尬局面。

IETester则是个很优秀的IE调试软件，可调试的IE版本从IE5.5到IE8，基本上完全覆盖了市面上所存在的IE版本，当然如果还有比IE5.5更老的IE版本的话，那就直接抛弃外加鄙视他吧。

一般情况下，WEB开发调试比较好的顺序是先Firefox然后再IE，有不对的地方再写Hacks，而如果这个调试顺序反过来的话，整个调试过程显然就要困难上一些。

在Firefox下有个前端开发人员必备的优秀插件——Firebug，而IE下也有个优秀的插件——DebugBar，而最新发布的IETester版本集成了DebugBar插件，很大程序上方便了开发人员。当然新版的IETester安装文件里没有集成DebugBar的安装，需要另外手动安装。

提供最新的DebugBar V5.2.2版下载：DebugBar V5.2.2

网页的呈现速度直接影响到网站的用户访问数量，所以网站优化是网站建设中必不可少的步骤。虽然网页加载过程中的大部分时间是耗在图片及FLASH等元素的加载上，但很多时候，这些图片或是FLASH等元素是网站的建设者很难控制的，所以大部分的网站优化还是从网站的代码优化着手。

减少HTTP请求数则是代码优化中很基础也很重要的一个环节，而一个网页中的所使用到的图片（诸如小图标之类的）往往占有很大部分的HTTP请求，所以将这些图片合并成一张大的背景图时，不但可以减少图片整体的大小外，最重要的还是可以减少HTTP请求数。

对于CSS的背景图属性相信大部分人都知道，其中有一个属性是“background-position”，即是背景图像定位，利用这个属性可以很容易的定位到图像的某个位置，这就是CSS Sprites的原理。

通过将多个小图片合并成一张大图片，然后利用背景图像定位指定地方所需要的图片，这样子浏览器只需要下载一次这张图片，就可以用于多个地方的图片显示。

虽然利用CSS Sprites可以减少HTTP请求数，也可以减少图片的总体大小，但并不是所有的网页中的背景图都可以利用CSS Sprites来解决的，比如有平铺行为的背景图就不太适合使用CSS Sprites来处理。因为小图片合并而成的大图片可能会产生空隙，如果有空隙的话，就无法使用CSS Sprites来处理平铺背景。

虽然CSS Sprites有很多好处，但同样有让开发人员郁闷的地方，那就是要计算大图片里的小图片的精确位置，图片大了的话计算起精确位置时会让很多同学抓狂的。

因为默认情况下在网页中添加的Flash在浏览器中是以窗口模式存在的，是独立于浏览器的HTML结构渲染的，所以这种情况下的Flash会遮盖住与它重叠的HTML。

比如这个页面：Flash的层叠顺序（z-index）

在Adobe Flash的发布设置里关于HTML的设置有一项是“窗口模式”，这里面提供了三个选项，分别是：窗口(window)、不透明无窗口(opaque)、透明无窗口(transparent)。

这三种模式分别表示着Flash在页面中的三种表现形式，根据这三种表现形式，我们就找到了解决这个问题的方法，就是将页面中的Flash模式(wmode)设置为不透明无窗口(opaque)或者是透明无窗口(transparent)，在这两种模式下页面中的Flash将与HTML结构是处于同一级别的，所以就可以通过z-index来控制页面中的重叠部分到底是Flash显示在上还是HTML结构显示在上。

比如这个页面：Flash的层叠顺序(z-index)

当我们需要在页面中加载一个弹出Flash广告时，并且不希望它被页面中的其它Flash所遮挡时，就可以使用这种方法来解决。同样的如果这个弹出Flash是不规则形状的时候，就可以将模式(wmode)设置为透明无窗口(transparent)，这样即可以除去Flash本身所带有的背景。

在使用Wordpress程序搭建的博客（其它程序搭建的博客也可能有）的页面代码里会有一句这样的代码：

<head profile=”http://gmpg.org/xfn/11″>

而当我们在博客的后台添加友情链接时如果标注一下链接关系的话，就能得到这样的代码：

<a href=”http://www.etcis.com/” rel=”friend” target=”_blank”>阿猎的SEO博客</a>

在这个链接中的rel=”friend”即是对这个链接的关系声明，声明我与该链接的主人是朋友关系，当然除朋友关系外还有很多其他关系可选，具体请查看XFN1.1。

在之前日志中的声明中我们即可得知，如果没有一份统一的规则约束的话，浏览器们可以根据自己设定的默认样式来呈现网页，呈现出来的效果可能就会有很大的偏差。而对于这种关系网络来说，如果没有一份统一的规则约定的话，就变得没有丝毫的意义，比如你把朋友定义成“frieng”，而我要按照拼音来定义成“pengyou”，这个定义的数据将变得毫无意义。

所以我们在HTML文档的<head />标签中使用“profile”属性引入一个声明，声明在这个HTML文档中使用了 XML Friends Network (XFN) 微格式，然后按照这份XFN微格式中约定的方式来描述关系网络，于是即使是不同用户代理器访问这些数据只要其遵循XFN的约定即可正确的读取出其中的关系数据。

当然，这其中的微格式数据对于平常通过浏览器来阅读HTML文档的用户来说，没有什么实际性的意义，可是对于某些用户代理器来说，通过读取这份XFN微格式数据再加上其它的诸如hCard等微格式数据，那么即可在互联网上呈现出人与人之间的关系网络。

对于不同的数据声明需要为其指定描述的位置，而profile的值即是对这个数据的描述的位置，或者可以简单的理解成是为不同的用户代理器指定相同的约定规则。

对于一个页面中引用的多份数据声明，只需要在profile的值中将其用空格隔开即可：

<head profile=”http://www.gmpg.org/xmdp/samplehtmlprofile http://www.solitude.dk/blogprofile/011/”>

同样的道理，因为浏览器们各自的内核不同，对于默认样式的渲染也不尽相同，所以就需要一份各浏览器都遵循的规则来保证同一个网页文档在不同浏览器上呈现出来的样式是一致的，这个规则就是DOCTYPE声明。

因为互联网是互通的，所以任意的两个或者以上的网页文档都可能会涉及到数据交换，而因为XML语言是允许用户自定义标签的，所以任意两个交换的文档就可能会出现相同的标签，从而导致相同标签的冲突，所以就需要一个命名空间以区分开交换文档中可能存在的相同标签。

XHTML做为HTML向XML过渡的一种语言，并不能实现XML语言中的用户自定义标签，所以XHMTL文档中的命名空间都是相同的：

<html xmlns=”http://www.w3.org/1999/xhtml”>

xmlns即是XHTML namespace的缩写，也就是所谓的“命名空间”。与DOCTYPE声明一样，xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是，在HTML文档是不存在xmlns的，我们平常所见到的xmlns都是出现在XHTML文档中的。

在制作一个网页的时候，除了在开始的时候声明DOCTYPE（文档类型）之外，如果是XHTML文档还需要声明命名空间，而第三个需要声明的就是网页文档的字符编码类型：

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

为了能被浏览器正确的解释以及通过W3C验证，每个XHTML文档都应该声明所使用的字符编码。很多时候网页文档出现乱码大部分都是由于字符编码不对而引起的。

utf-8是unicode的一种变长度的编码表达方式，做为一种全球通用型的字符编码正越来越多的网页文档所使用，使用utf-8字符编码的网页可最大程度的避免不同区域的用户访问相同网页时因字符编码不同而导致的乱码现象。

但是当我们打开国内的大多数网站看，特别是门户型的大型网站，关于字符编码的声明却并非是utf-8，而是gb2312：

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

当然，除了gb2312外还有一些网站使用gbk或者是gb18030编码，这三种字符编码都是属于简体中文字符集。也就是说，如果一台电脑没有安装简体中文字符集时，当它访问字符编码为gb2312的中文网页时，则显示出来的是乱码。

既然使用gb2312字符编码时会因为不同区域的用户访问而可能出现乱码现象，那为何不使用utf-8呢？

其中一个原因可能历史遗留的原因，而另一个更重要的原因应该是由于两种编码的存储方式不同而造成的文档体积不同。

使用gb2312字符编码集时，一个汉字是占用2个字节的大小，而一个汉字在utf-8编码中所占的字节数却往往都是在3个字节，甚至是3个以上的字节。所以对于同一个中文文档来说，使用gb2312字符编码来进行存储的体积是要小于utf-8编码所存储的文档大小的。

而对于文字多访问量大的中文网站来说，使用gb2312编码的网页文档在下载传输上可以节省下不小的流量，再者是因为中文网站的用户群体基本上都锁定在中文用户上，这些也就是很多网站使用gb2312编码而不是utf-8编码的原因。

但是文字多访问量大的网站，国内并不多，再加上可能成对的乱码问题，所以在制作网页的时候推荐使用utf-8编码。

当然，不管用何种编码，最重要的是整站使用的编码要统一。

对于字符编码的声明除了上面的方式，还可能看到另一种声明方式：

<meta http-equiv=”Content-Language” content=”gb2312″ />

<meta http-equiv=”Content-Language” content=”zh-CN” />

这种声明方式是针对老版本的浏览器的，在浏览器已经普遍更新换代的今天已经不推荐使用这种声明方式。

<html>

<head>

<title>这是一个网页</title>

<meta name=”…” content=”…” />

……

</head>

<body>

……

</body>

</html>

很显然的，这种结构的网页代码是不符合Web标准规范的，但是浏览器仍然可以很好的呈现出这个网页来，只要代码没出什么错误。这个其实就像是用Table布局的页面跟Div构架的页面一样，浏览器都可以呈现出来，关健是哪个页面呈现的质量会更高。

做出一个页面，跟做好一个页面，中间有着很遥远的距离。

在浏览器的发展历程中，微软凭借着将Internet Explorer捆绑进Windows操作系统中，从来成为浏览器市场上的霸主，从而也造成了一系列的IE对W3C组织所制定的Web标准于不顾的事情，微软的IE一直都只遵循自家的Web标准。很庆幸的是，微软决定在他的IE8中支持Web标准，虽然这事还没最终确定。除微软的IE外，Mozilla Firefox、Apple Safari、Opera、Chrome等浏览器则以支持Web标准的名义与IE做得长久的对抗。

浏览器的不同，于是就造成了对HTML代码默认解析的不同，所以即使同样的代码在不同的浏览器下也可能呈现出不同的样式来，于是这就需要有一份众浏览器都遵循的规则来协调众浏览器之间的差异，这份规则需要一个声明来引用它，这个声明就是DOCTYPE——document type（文档类型）。

DOCTYPE声明是标准网页中必不可少的部分，所以，想要制作一个符合W3C标准的网页，首先就需要为这个页面声明一个文档类型。

DOCTYPE所声明的DTD（文档类型定义）分为三种，分别是：

Transitional（过渡的）：要求不是很严格的DTD，允许你继续在页面中使用HTML4.01的标签；

Strict（严格的）：这是制作页面时理想的DTD方式，但是这个文档类型定义不允许使用任何的表现层上的标签和属性；

Frameset（框架的）：这个专门针对页面设计中包含有框架的DTD。

由于框架型的设计可能对网页在搜索引擎中收录的影响，很多网页中都不使用框架设计；而Strict的DTD对于大多数人来说还只是一种理想化的方式；Transitional型的DTD则是目前最适用也是使用最广泛的文档类型定义。

现在随便打开一个符合Web标准的网页，都可以在页面的最开始处看到这样一句声明：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

这是一个关于XHTML网页文档的DOCTYPE声明。当然并不是说DOCTYPE声明只能针对XHTML网页文档，对于使用HTML4.01的网页文档来说，同样可以使用DOCTYPE声明：

过渡的DTD：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

严格的DTD：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

唯一需要注意的是，DOCTYPE声明的位置必须是位于页面的最开始处，在DOCTYPE声明代码之前不能出现任何的代码或是标签，否则页面中的标签或是CSS样式可能会失效。

Table式的页面布局因为其本身的简便以及有Dreamweaver这样的可视化操作的Web制作软件的存在，从而引领了Web制作的一个时代，也正是因此而导致了过多的Web设计人员从来没有真正关注过HTML标签的真正语义，当Web标准开始兴起的时候，于是就直接被理解成是div+css的布局。

于是Web标准中的结构标签几乎变成了div的秀场。

div标签的过度使用，已经导致了很多人对于Web标准的误解，最明显的一点就是，当网页切换到使用div标签布局后，table标签便被无情的抛弃，俨然Web标准已经被理解成就是div+css。而事实上，table标签是不能被抛弃的，当需要显示数据内容时，由table标签构建的HTML结构的优势要强于div标签构建的布局，table标签仍然是显示数据时最符合HTML语义的标签。

Table页面布局所生成的过多的冗长代码，以及混杂其中的HTML样式属性，已经严重影响到页面的性能，尤其是对于大访问量的网站，解决的方法即是对页面进行基于Web标准的重构。然而对Web标准的误解，造成页面整体结构上div被过多的使用；以及Table布局所遗留下来的思想，造成页面上的结构嵌套过多。这些仍然影响着页面的整体性能。

所以，以更符合语义化的标签来构建页面，是Web标准推崇的理念。在这个理念下构建的页面还应该尽量的精简代码，使页面代码尽量的保持轻简，让浏览器更快速呈现的同时也便于日后的代码维护。

Web标准并不是某一个单独的标准，而是一系列标准的集合，包括结构、表现、行为三部分。这里的结构并不是指div，而是指标准化的语言——XHTML、XML。

明明<strong />标签可以实现粗体样式，为什么还要用<span />标签再搭配粗体样式去实现呢？

WordPress2.7也从最初的Beta1版到Beta2版再到Beta3版，之前所出现的BUG等也一一的解决，所以官方每发出一次新的Beta版我都会去下载过来直接在博客上使用，对于网上所说的一些BUG也没有出现过。但是今天却发现一个问题——在Wordpress2.7 Beta3版之前在系统自动生成的当面页面下都会有一个“current_page_item”的Class，但是在Wordpress2.7 Beta3的版本中不再自动生成这个Class属性，这个Class可以很方便的让主题制作者定义当面页面的导航样式，比如：

根据这个Class属性定义的样式可以很方便的让用户得知当前在哪个页面下，可是这个Class属性竟然在Wordpress2.7 Beta3版中不再自动生成，于是之前关于当前页面的定义样式就不能被读取出来。

不知道这个问题是属于Wordpress2.7 Beta3版中的BUG，还是官方故意去掉这个Class属性的。

因为按照常理来讲，日志分类才是更适合做为导航来呈现的，而现在把页面做为导航是不太合理的做法，而在当前日志分类下也会自动生成一个“current-cat”的Class属性，通过这个属性依然可以定义当前日志分类下的导航样式。

但即使官方故意去掉页面中自动生成的“current_page_item”这个Class属性，用意是让用户更多的把日志分类当成博客导航而不是把页面当成博客导航，也显然是极不合理的。

在Wordpress2.7正式版没有出来之前，这个问题不能最终确认是BUG还是官方故意去掉的，一切只有等正式版出来才能得知。在不改动Wordpress程序的前提下，似乎目前没有解决办法，有解决办法的高手请赐教。

——————————————–华丽丽的分割线—————————————–

2008.12.02

刚升级到了Wordpress2.7 RC1版，这个问题已经修正了，看来是个BUG。

正是这样的理论这样的思想，导致学习HTML的人都不把它当回事，认为HTML仅仅只是诸如“加粗用<B />标签，斜体用<I />标签”之类的应用。这样的思想尤其是在初学者当中流传，而一旦真正深入的了解学习HTML之后，才会发现HTML远非想像中的那么简单。

而随着WEB标准大潮的席卷互联网，更多的人索性就差不多抛弃HTML众多标签般的只用DIV，似乎DIV+CSS就是WEB标准的核心。这个错误的理论与HTML超简单的理论被绑在了一起，在互联网中传播着。思想改变行动，最终造成了WEB标准在国内互联网推行的困难重重。

真正的WEB标准应该是推崇以更合适的语义标签来制作网页结构，完全不是在整个页面写满DIV就是符合WEB标准。与此相同的道理是，HTML远远不是你所想像中的那么简单。

一个网站在浏览器中呈现效果的好坏，视觉因素占一半的比重，而另一半的比重就在于网页的结构上。

我们可以在网上看到很多整个页面都是由DIV架构的网页，这些DIV结构的页面在配合上CSS时，整个页面在浏览器中呈现的也许很正常，并看不出什么问题。可是如果用户禁用掉CSS之后呢？浏览器还能否正确的理解网页结构并呈现出来，就成了判断这个网页结构好坏的很重要的一个标准。而对于这些完全由DIV结构组成的页面，很显然的，在CSS被禁用之后，浏览器就很难呈现出一个结构清晰明了的页面来，而用户自然也很难从结构上去判断哪些内容是标题，哪些内容是真正的内容。

而如果在页面中采用了更符合语义的HTML标签的话，即使CSS样式在被禁用之后，浏览器依然可以根据<h />标签来显示成标题，根据<p />标签来显示成段落，最终仍然可以为用户呈现出结构清晰明了的页面。

如果把网站建设比喻成是建造一栋大厦，那么HTML无疑就是这栋大厦的基石，如果基石不够坚稳的话，那么这栋大厦就很有可能会面临倾倒的危险。

从深层次理解并学习HTML的标签语义，从思想上重视HTML，别忘了，整个网站都是基于HTML结构来呈现的。

可是很多时候由于字体或是字体大小的原因，列表项前通过list-style-type来设置的标记符号会显得过大或是其它原因而不能达到要求，这个时候就需要另外的解决方法。

当需要在新闻列表项前标记出自定义的图案时，可以采用list-style-image来设置。于是可以尝试使用这个方法来处理list-style-type无法解决的图案大小问题，可是由于受行高等因素的影响，有时图标并不能出现在预先设定好的位置上，可能是偏上或者是偏下，于是又需要另外一种解决方法。

之前有介绍过CSS背景图像，在CSS中可以任意的设置背景图像的铺排、定位、滚动等，由此就引出了列表项前标记符号的另一种设置方法——通过背景图像设置。

通过背景图像设置，可以很容易的就达到所需要的效果：

ul li {list-style:none; background:url(images/liImg.gif) no-repeat 0 50%; padding-left:10px;}

首先设置list-style为none，清除掉li元素自带的属性值，然后设置li的背景图像，设置背景图像的铺排方式为不平铺，然后通过数值去控制背景图像出现的位置（前一个数值表示横坐标的位置，后一个表示纵坐标的位置），最后再设置li元素的左边内边距，以保证背景图不会被内容覆盖到。

自定义的列表项标记符号就设置好了，不用担心字体或是行高等其他因素的影响了。

同样的布局<dl />与<ul />都可以实现，并且就最终的表现来看并不存在区别，那么这两者之间到底有什么区别呢？或者说使用哪一个来完成布局才更为合理呢？

<ul />与<ol />是最常见两种列表表现形式，这两种列表最本质上的区别就是<ul />指的是无序列表而<ol />指的是有序列表。最常见的两种不同表现是：平常所见的新闻标题列表基本上都是由<ul />来完成布局的，而很多网站的侧边栏上会有一些新闻点击数排行榜之类的列表，这个时候就需要使用到有序列表<ol />，因为可以很容易的通过<ol />标注出排行顺序来。

回过头来我们看Wordpress侧边栏的结构代码：

<div id=”sidebar”>
<ul>
<li><h2>栏目标题一</h2>
<ul>
<li>新闻标题一</li>
…
<li>新闻标题N</li>
</ul>
</li>
…
<li><h2>栏目标题N</h2>
<ul>
<li>新闻标题一</li>
…
<li>新闻标题N</li>
</ul>
</li>
</ul>
</div>

很显然，这是一个<ul />嵌套<ul/>的结构，通过<h2 />去显示栏目标题（补充一点：对于博客来说，就页面中的内容重要程度而言，这里并不适合使用<h2 />标签来显示栏目标题，<h2 />标签应该是用在日志标题上的）。

很多使用<dl />来布局的网站的结构代码如下：

<div id=”sidebar”>
<dl>
<dt>栏目标题一</dt>
<dd>
<ul>
<li>新闻标题一</li>
…
<li>新闻标题N</li>
</ul>
</dd>
…
<dt>栏目标题N</dt>
<dd>
<ul>
<li>新闻标题一</li>
…
<li>新闻标题N</li>
</ul>
</dd>
</dl>
</div>

这是一个复杂表现上的定义列表，与上一个结构代码的最大的区别是使用<dt />来替代<h2 />标签。简单意义上的定义列表结构如下：

<div id=”sidebar”>
<dl>
<dt>标题一</dt>
<dd>内容一</dd>
…
<dd>内容N</dd>
…
<dt>标题N</dt>
<dd>内容一</dd>
…
<dd>内容N</dd>
</dl>
</div>

这种结构的代码也可以表现出列表的形式，但事实上这种结构并不太适合做为一个列表来使用，这种简单的<dl />更适合做为不同内容段的描述。比如：

<dl>
<dt>我的照片</dt>
<dd>作者：摄氏度</dd>
<dd>相机：佳能400D</dd>
<dt>我的博客</dt>
<dd>作者：摄氏度</dd>
<dd>程序：wordpress</dd>
</dl>

于是我们可以理解为：<dl />标签结构更多的是表现一种描述性的列表，它本身并不具备做为列表显示的意义。当<dl />与<ul />或是<ol />标签结构组合起来使用时，才能更好的表现出描述列表的作用。

之前的那个被指为不符合标签语义的试验《使用UL进行宽度固定的多行多列布局》，现在换成<dl />标签来做是否就适合标签语义化了呢？

解决这个问题的方法是，在外部DIV的CSS样式属性里设置“word-wrap:break-word;”或者“word-break:break-all;”，即可强制文本在外部DIV宽度之内换行。

但是很不幸的是，这个目前只在IE下有效，在Firefox下依然无法完成换行。

在CSS背景属性中有一项是background-position，即是背景图像的定位，属性值可用英文（top | center | bottom | left | center | right）来定位，也可使用数值来定位，使用数值需要注意的是，当只有一个数值时，这个值将用于横坐标，纵坐标将默认是50%，如果有两个数值时，则分别是横坐标、纵坐标。通过background-position这个属性可以让背景图像随意定位在需要的位置。

在CSS背景属性中还有另外一项是background-repeat，即背景图像是否平铺。通过这个属性可以决定背景图像的平铺方式，是在纵向上平铺，还是在横向上平铺，或者是不平铺。

结合上面的两个背景属性，不使用绝对定位制作圆角导航的思路就出来了，即可通过两个分别定位左右背景图像的DIV再嵌套中间导航正文部分的UL，利用三者的长度错位来实现。HTML结构代码与CSS样式代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Nav</title>
<style type=”text/css”>
body{font-size:12px;}
#navBox {background:#f00 url(images/left.jpg) no-repeat left bottom;    height:24px; padding-left:5px;}
#nav {background:#f00 url(images/right.jpg) no-repeat right bottom; padding-right:5px; height:24px;}
ul {list-style:none; line-height:24px; background:#f00 url(images/navBg.jpg) repeat-x; height:24px; margin:0; padding:0;}
li {float:left; width:60px; text-align:center;}
</style>
</head>

<body>
<div id=”navBox”>
<div id=”nav”>
<ul>
<li>导航一</li>
<li>导航二</li>
<li>导航三</li>
<li>导航四</li>
</ul>
</div>
</div>
</body>
</html>

从上面的结构代码可以看出，在<ul />标签外面套两个DIV，给每个DIV设定一个背景图像，然后分别设定背景图像的平铺方式为不平铺，再设定两个DIV的背景图像一个靠左一个靠右，最后是<ul />也就是导航条中间部分的背景，设定它的平铺方式为横向平铺。

圆角的可自动伸缩适应的导航条就做完了，这其中还有一些小地方是值得注意的：

1、外面两个DIV的padding数值是圆角图片的宽度；

2、在背景图像属性中增加与图片颜色相近的颜色值，这样可以在图片丢失或未加载完成时保证易读性；

3、如果在一开始没有设定全局样式*{margin:0; padding:0;}时，那么<ul />的属性里就必须设定“margin:0; padding:0;”，否则在IE下，导航条的<ul />前面会出现一段空白，这在Firefox下是没有的。

圆角导航由于可以不用考虑高度的自适应，所以相对于圆角边框来说要容易上一些，但圆角边框的制作依然可以根据制作圆角导航的方式来制作，分为上中下三个DIV，上下两个DIV就跟圆角导航的一样。

中间定宽，左右两侧自适应：

左右两侧定宽中间自适应的布局已经完成了，那么是否可以反过来呢？让中间定宽，而左右两侧自适应呢？答案是当然可以！HTML结构代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head>

<body>
<div id=”a”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</body>
</html>

同样的三列结构，变换的只是CSS代码：

#a{background:#aaa; float:left; margin-left:-100px; width:50%;}
#b{width:200px; background:#f00; float:left;}
#c{background:#777; width:50%; float:right; margin-right:-100px;}

我们让中间列居中显示，也就是让左右两侧的宽度各占50%，然后各减去中间栏占的100px，于是效果达到了。可是当预览的时候就会发现三个问题：

1、左右两侧的内容部分各被截取了宽度为100px的内容；

2、左右两侧的内容延伸到浏览器边缘，超出了<body />标签默认的宽度；

3、由于IE的BUG，当缩放IE浏览器的时候右侧会掉下去，造成显示错位。

要解决1、2两个问题，只需要在内容处嵌套DIV即可解决：

<div id=”box”>
<div id=”a”><div id=”contentA”>我是左边</div></div>
<div id=”b”>我是中间</div>
<div id=”c”><div id=”contentB”>我是右边</div></div>
</div>

CSS代码如下：

#box{width:100%; overflow:hidden;}
#a{background:#aaa; float:left; margin-left:-100px; width:50%;}
#b{width:200px; background:#f00; float:left;}
#c{background:#777; width:50%; float:right; margin-right:-100px;}
#contentA{margin-left:100px;}
#contentB{margin-right:100px;}

内容溢出的问题截取了，但是在IE下缩放的问题还是存在，于是就需要使用到绝对定位，设中间列为绝对定位：

#b{width:200px; background:#f00; position:absolute; left:50%; margin-left:-100px;}

于是中间列定宽，左右两侧自适应的三列浮动布局就解决了。

左侧中间定宽，右侧自适应：

因边左侧跟中间都是定宽的，只有右侧是自适应宽度的，所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理，HTML结构代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head>

<body>
<div id=”a”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</body>
</html>

只需在两列浮动的CSS样式代码上再做轻微的改动：

#a{float:left; width:200px; background:#aaa;}
#b{float:left; width:200px; background:#f00;}
#c{background:#777; margin-left:400px;}

当然这里要记住一点，那就是必须给b对象一个左浮动。

左侧自适应，中间右侧定宽：

与左侧中间定宽右侧自适应一样的道理，当然前提是要把a、b、c三个对象在HTML的结构代码上更换一下顺序，浏览器的解释顺序应该是c-b-a，因为浮动在未浮动之前：

<body>
<div id=”c”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”a”>我是右边</div>
</body>

CSS代码如下：

#a{background:#aaa;}
#b{float:right; width:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}

左右两侧定宽，中间自适应：

这个布局应该是用得最多的，因为两边侧边栏的定宽，然后中间内容区自适应，这是很多网站常用的布局方式。很多人会在这里使用四个DIV来完成布局，即：

<body>
<div id=”a”>我是左边</div>
<div id=”box”>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</div>
</body>

通过一个嵌套的DIV来帮助完成三列浮动，这样的确是可以完成浮动布局的目的，但是不用这个嵌套仍然可以完成三列浮动的目的，既然可以省略一个嵌套，那为什么不省略一个呢？仅仅只需改变b跟c两者的顺序即可达到目的：

<body>
<div id=”a”>我是左边</div>
<div id=”c”>我是右边</div>
<div id=”b”>我是中间</div>
</body>

CSS代码如下：

#a{float:left; width:200px; background:#aaa;}
#b{margin-left:200px; margin-right:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}

这样，在基于两列浮动的基础之上，三列浮动的布局也完成了。

来看一下几种常见的CSS两列浮动，CSS代码见以下各分类，HTML结构代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head>

<body>
<div id=”a”>开始我是在左边，后面可能到右边</div>
<div id=”b”>开始我是在右边，后面就可能跑到左边去</div>
</body>
</html>

左侧定宽右侧自适应：

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00;}

当需要左侧定宽而右侧自动时，则只需要设定a对象为左浮动即可，b对象默认是占整个屏幕的宽度的，但因为a为左浮动并且占了200PX的宽度，b则自动位于a后面。

当然这样会有一个问题，那就是当左侧的内容高度超过右侧时，右侧的高度并不能随之而增高，而当右侧内容高于左侧时，右侧的内容就会流到左侧内容的底下去。

解决这个问题的一个办法是，给b也设置一个浮动，当然并不是设置右浮动，如果是设置的右浮动，当右侧内容少不够一行的宽度时左右两侧中间则会出现空白：

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:right;}

给b设置左浮动时，则可以解决中间出现空白的问题，但同样的道理，当b对象内容少不够一行的宽度时时，右侧就会出现空白：

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:left;}

当然有另外一种两全的解决办法，即设置b对象距离左边的位置，这样即可以达到浮动的目的也可以解决b对象内容过多而流入到a对象下面的问题：

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}

右侧定宽左侧自适应：

与左侧定宽右侧自动一样的道理，右侧定宽左侧自动同样可以实现：

#a{background:#f00; margin-left:200px;}
#b{float:right; width:200px; background:#aaa;}

如果按照上面的代码，那么你会发现这个代码并不能实现右浮动，b对象显示在a对象的下面，并没有如预期的那样显示成右侧定宽左而自动的效果。因为HTML结构的原因，浮动DIV应该出现在没有浮动的DIV前面，也就是说，如果是按上面的代码，那么<div id=”a”>…</dia>与<div id=”b”>…</dia>的顺序应该调换一下：

<div id=”b”>开始我是在右边，后面就可能跑到左边去</div>
<div id=”a”>开始我是在左边，后面可能到右边</div>

当然，也可以在不改动HTML结构的情况下，利用CSS样式去调整浮动顺序，这也是CSS的优点之一，即可以在不改动原HTML结构的情况下，完成对页面的修改：

#a{float:right; width:200px; background:#aaa;}
#b{background:#f00; margin-right:200px;}

background : background-color  | background-image  | background-repeat  | background-attachment  | background-position

从属性值的名字就可以很明白的看出来，分别是：颜色、图像、铺排、滚动、定位，其中background-repeat、background-position必须是在指定了background-image属性值后才有效。

background-color:transparent | color 。“transparent”是background-color的默认属性值（红色字表示默认值），意为背景色透明，也就是无背景色；而“color”则指的是颜色了，可以是HTML语言支持英文单词，也可以是十六进制的颜色值，当然推荐还是使用十六进制的颜色值来表示，比如黑色使用“#000”。

background-image:none | url 。默认属性值是无背景图，需要使用背景图时可用url进行导入。

background-repeat:repeat | no-repeat  | repeat-x  | repeat-y 。默认属性值是背景图像在纵向和横向上平铺，如果不希望图像平铺而是以一个完整的衬图来显示的时候则使用“no-repeat”，相同的道理在横向上平铺则是使用”repeat-x”纵向上平铺则使用”repeat-y”。

background-attachment:scroll | fixed 。“scroll”是背景图像随对像内容滚动，“fixed”则是背景图像固定。

background-position:position(length)  | position(length) 。对象的背景图像位置有两种方式可选择，一种是使用position（top | center | bottom | left | center | right）来定位背景图像位置，而另一种方式则是使用lefgth（数值）来定位，使用数值需要注意的是，当只有一个数值时，这个值将用于横坐标，纵坐标将默认是50%，如果有两个数值时，则分别是横坐标、纵坐标。

了解并熟悉了以上background属性及属性值之后，很容易的就可以对网页的背景图像做出合适的处理。但是在这里有一个小技巧，那就是在定义了background-image属性之后，应该定义一个与背景图像颜色相近的background-color值，这样在网速缓慢背景图像未加载完成或是背景图像丢失之后，仍然可以提供很好的文字可识别性。比如背景图像是一张黑色的底图，那么文字的颜色自然而然会选择浅色调的甚至白色，如果此时背景图像未加载完成或者图像丢失，那么就需要定义一个黑色的背景颜色，才可以保持文字的可识别性。

本人所在江西省就是这样一个互联网发展缓慢的城市。

查看江西排名靠前的十大网站，竟然有七个还是停留在Table布局的时代：大江网、今视网、中国江西网、江西热线、江西人才人事网、小刀在线、江西搜房网，其中江西人才人事网2008版、江西搜房网新版这两个网站最近出台或即将出台的新版竟然仍然停留在Tabel布局的时代！似乎基于WEB标准化的布局对于它们来说还是无限遥远的事情；剩下的三个已经开始采用DIV+CSS的布局方式：地宝网、易圈网、南昌网吧协会，然后这仅剩的这三个网站中，南昌网吧协会的布局依然很烂，即使在不完全支持WEB标准的IE7浏览器下显示错位的情况都相当严重，不过所知情人士透露，这个网站也即将推出新版，新版网站将完全基于DIV+CSS的方式制作，版面布局也更显大气条理清晰，因为这个新站就是他本人制作的。

上面做的统计数据只是说明有多少网站仍然用着古老的Table来布局制作网站，而不是说用DIV+CSS制作的网站就是WEB标准化的网站，事实上它们离WEB标准化还有很长的一段路要走。

很多国人都认为WEB标准实际上就是DIV+CSS，还有很多的教程什么的都挂着DIV+CSS这样的噱头来欺骗读者，其实这是一个完全错误的理解，DIV+CSS仅仅只是一个表现而已，引用一下百度百科里关于WEB标准的简介：

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。

确切的说，DIV仅仅只是一个容器，他本身的作用并不大，只在当它配合了CSS后才能突显出它的强大来，所以很多人天天都号称着要用DIV+CSS来制作基于WEB标准的网站，于是很多的教材也挂着DIV+CSS的噱头来欺骗读者，其实这也是一个的理解。

从上面的简介也可以看出来，结构标准指的并不是DIV，而是标准化的语言：XHTML和XML。一个真正基于WEB标准化的网站的结构并不是一味的DIV，而是推崇以更合适的语义标签来制作网页结构。但是我们仍然可以看到很多网页的结构还是清一色的DIV，既然是明明可以用<h1 />等标签来表示的标题依然使用DIV来包含着，然后用CSS来调整它的样式。

如果一个站全用DIV来进行布局，加载了CSS样式后，也许你看它很正常没什么不对劲，可是一旦撤掉这个CSS样式表后，这个网站所显示出来的页面数据就会让用户找不着北，因为完全不能体现出网页的架构，用户甚至都不可能分得清哪个是标题哪个是正文。

举办CSS裸体日这个活动并不是为了好玩，更为重要的意义是为了验证网站的结构。

由于本人才疏学浅，对于行为标准不熟悉，所以在此略过不谈，望有才学之人补充。

基于WEB标准制作的网站，在难度是比Table布局的时代要高上一个等级，可是“付出就会有回报”这句话不会有假，制作出一个基于WEB标准的网站，所带来的好处也是显而易见的：

对于访问者：
● 文件下载与页面显示速度更快。
● 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）。
● 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机等等）。
● 用户能够通过样式选择定制自己的表现界面。
● 所有页面都能提供适于打印的版本。

对于网站所有者：
● 更少的代码和组件，容易维护。
● 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。
● 更容易被搜寻引擎搜索到。
● 改版方便，不需要变动页面内容。
● 提供打印版本而不需要复制内容。
● 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

在开发基于WEB标准的网站时，所带来的好处也同样显而易见，因为WEB标准的结构、表现、行为的分离，开发人员的分工可以更加明确，程序员完全不必像以前一样为在纷杂的Table的中寻找位置而苦恼，甚至只需要轻松的将数据绑定在诸如<li />这样的标签即可；而页面制作人员也不必为了怕担心页面效果程序无法实现而不得不去改动设计好的页面。

如何制作一个基于WEB标准的网站，记住一点：WEB标准不等于DIV+CSS。

一．文件命名规范

全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；

二．常用类/ID命名规范

页　眉：header
内　容：content
容　器：container
页　脚：footer
版　权：copyright　
导　航：menu
主导航：mainMenu
子导航：subMenu
标　志：logo
标　语：banner
标　题：title
侧边栏：sidebar
图　标：Icon
注　释：note
搜　索：search
按　钮：btn
登　录：login
链　接：link
信息框：manage
……

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……

CSS书写规范及方法

一. 常规书写规范及方法

1. 选择DOCTYPE：

XHTML 1.0 提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2. 指定语言及字符集：

为文档指定语言：

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：
常用的语言定义：

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
标准的XML文档语言定义：
<?xml version=”1.0″ encoding=” utf-8″?>
针对老版本的浏览器的语言定义：
<meta http-equiv=”Content-Language” content=” utf-8″ />
为提高字符集，建议采用“utf-8”。

3. 调用样式表：

外部样式表调用：

页面内嵌法：就是将样式表直接写在页面代码的head区。 如：

<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />

在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：

根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；

尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；

5、派生选择器：

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：

.mainMenu ul li {background:url(images/bg.gif;)}

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

<div id=”mainMenu”>
<ul>
<li><a href=”#” >首页</a></li>
<li><a href=”#” >介绍</a></li>
<li><a href=”#” >服务</a></li>
</ul>
</div>

/*=====主导航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主导航结束=====*/

9、鼠标手势：

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”

二．注释书写规范

1、行间注释：

直接写于属性值后面，如：

.search{
border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
}

2、整段注释：

分别在开始及结束地方加入注释，如：

/*=====搜索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索条结束=====*/

三．样式属性代码缩写

1、不同类有相同属性及属性值的缩写：

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：

#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}

两个不同类的属性值有重复之处，刚可以缩写为：

#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}

2、同一属性的缩写：

同一属性根据它的属性值也可以进行简写，如：

.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}

3、内外侧边框的缩写：

在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：

.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}

则可缩写为：

.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}

而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：

.btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}

缩写为：

.btn {margin:10px 5px;}

而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：

.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}

缩写为：

.btn{margin:10px;}

4、颜色值的缩写：

当RGB三个颜色值数值相同时，可缩写颜色值代码。如：

.menu { color:#ff3333;}

可缩写为:

.menu {color:#f33;}

四．hack书写规范

因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。

1、 IE6、IE7、Firefox之间的兼容写法：

写法一：

IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
根据上述表达，同一类/ID下的CSS 　hack可写为：
.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666　!important; /*仅IE7*/
*background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为：FF、IE7、IE6.

写法二：

IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：
.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*仅IE6可识别*/
}

写法三：

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：

select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px  !important;} /*FF的专用*/
select:empty {font:12px  !important;} /*safari可见*/

IE6可识别：

这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

select { display /*IE6不识别*/:none;}

IE的if条件hack写法：

所有的IE可识别：

<!–[if IE]> Only IE <![end if]–>
只有IE5.0可以识别:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包换IE5.5都可以识别:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
仅IE6可识别:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可识别:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅IE7可识别:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>

2、清除浮动：

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

———————–分割线———————

有喜欢的朋友可以点击这里下载本文档：css命名及书写规范

或者从BOX.NET下载：http://www.box.net/shared/wnl9yweg4g

申明：本文部分资料搜集于网络！

当需要写一个三列布局的时候，一般情况下我会选择使用如下的DIV布局方式：

使用这样的嵌套方式无疑可以使代码出错的概率减少很多，但同时这样的布局也略显复杂，对于后期的维护也略显不便。我们在布局导航时经常会使用到一个方法，那就是使用<ul>列表来进行布局，而导航可以形容为多列式的布局，既然如此，那么我们也就可以使用<ul>来进行页面的多列布局。

这是一个固定宽度的布局，也就是说流动性不强，流动性的布局目前还没有试验过，等有时间了再试验一下，下面贴上这个布局的代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>使用UL进行多列布局</title>
<style type=”text/css”>
* {margin:0; padding:0;}
body {
width:100%;
height:100%;
background:#ddedfb;
}
#mainContent {
width:600px;
margin:10px auto;
}
#header,#footer {
background:#8AC7FA;
height:80px;
clear:both;
}
#footer {
clear:both;
padding-top:10px;
}
#content {
height:300px;
margin:10px auto;
}
#content ul {
list-style:none;
height:100%;
}
#content ul li {
width:150px;
height:100%;
background:#8AC7FA;
float:left;
}
#content ul li#li2 {
width:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
</style>
</head>

<body>
<div id=”mainContent”>
<div id=”header”>这是头部</div>
<div id=”content”>
<ul>
<li>这是左边</li>
<li id=”li2″>
<ul>
<li>这是中间的上部</li>
<li>这是中间的下部</li>
</ul>
</li>
<li>这是右边</li>
</ul>
</div>
<div id=”footer”>这是底部</div>
</div>
</body>
</html>

这段代码在IE7及FF3下都能正常显示，其他浏览器未做测试，如果你有更好的方法不妨提出来。

#test{margin:10px;padding:10px;width:100px;height:100px;}

如上一段的代码，很多时候我们会把它所占的位置计算成width:120px，height:120px，因为在正常的理解下，padding是内边距，应该是包括在width里面的，而margin是外边距，所以width＝margin-left + margin-right + width，但是浏览器对于CSS盒模型的解释却并非如此，所以最终我们会发现布局出来的网页宽度与高度都会超出我们预期的计算，最后造成显示上的错位。

其实不然，对于test所占的位置的真正计算应该是width=margin-left + margin-right + padding-left + padding-right + width，也就是宽度真正所占的大小应该是内边距+外边距+宽度本身，也就是说test真正的大小应该是140px才对。高度的计算与宽度的计算是一样的。

而如果给test加上边框的话，这个宽度与高度的算法还应该加上边框的大小。

#test{margin:10px;padding:10px;border:5px;width:100px;height:100px;}

这里的test的宽度就应该是外边框+内边框+边框+宽度本身，所以test的width是 150px。

如下图所示，width与height真正所占的位置并不是它本身的那一小块，而应该是一直到最外面深蓝色的那个层为止。

看下面一段CSS代码：

#header{margin:10px 15px;background:#333 url(Images/header.jpg);}
#content{margin:10px 15px;padding:10px;background:#999;}
#copyright{margin:10px 15px;border:1px solid #f00;}

在上面的三个ID中都有一个相同的属性“margin:10px 15px;”，如果就这样分开来写的话，这三个ID之间将保持各自独立的关系，但却生成了重复的代码，而我们可以将其写成如下格式：

#header,#content,#copyright{margin:10px 15px;}
#header{background:#333 url(Images/header.jpg);}
#content{padding:10px;background:#999;}
#copyright{border:1px solid #f00;}

将上面的ID换成Class也是一样的。这样写我们就成功的将重复代码“消灭”掉了。但是如果这里具有相同的属性的ID或Class过多的话，难免会造成代码可读性降到很低很低，所以除此之外当具有相同属性的都是Class时还有另外的一种写法：

.main{margin:10px 15px;}
.header{background:#333 url(Images/header.jpg);}
.content{padding:10px;background:#999;}
.copyright{border:1px solid #f00;}

当然这种写法时，调用时的写法也与平常不一样。

<div class=”header main”></div>
<div class=”content main”></div>
<div class=”copyright main”></div>

这样的写法同样可以达到效果，并且也不会再怕具有相同属性的Class多而造成代码可读性差的问题，但值得注意的一点就是，这种写法对于ID是无效的，不管其中是存在一个ID或者全部都是ID，都将造成这段代码的无效。

众所周之，在不影响整个网页构架与功能的情况下，网页文件越小越好，因为更小的网页文件有利于浏览器对网页的解释时间缩到更短，自然访客也就不用面临等待网页缓慢呈现的烦躁了，这一点对于那些带宽少网速慢的用户犹为明显。试想一下，你会是希望打开一个网站的时候整个站点马上呈现在你面前呢？还是喜欢花上十几秒甚至是几分钏来看整个站点一点一点的被浏览器解释出来呢？

在Table布局的时代，代码无数次的随着表格在页面里重复，致使整个网页文件变得臃肿无比，代码的可读性也降到最低，浏览器的解释时间自然也增加了不少。而自从DIV+CSS的布局替代Table布局之后，这一切都得到了极大的改善，让Table回归到它原本用于显示数据的位置上去，而布局就交给DIV+CSS来做，这样代码的可读性与复用性都得到了提高，而DIV+CSS更为重要的一点就是将网页文件的表现与结构区分开来，再也不用为了表现而去改动整个网页文件的结构了。

即使DIV+CSS的布局方式将以前Table布局时代码的臃肿降到了最低，但对于网页设计师来说，如何将网页文件的大小控制到最小是永远值得探索和追求的一个问题。

看如下一段代码：

#header {
                 margin-top:10px;
                 margin-right:15px;
                 margin-bottom:10px;
                 margin-left:15px;
                 backgroung-color:#333333;
                 background-images:url(Images/header.jpg);
 }

这样的一段CSS代码，在条理上很清晰，结构也很明了，可读性很强，可是这样的一段代码却没有做精简，也就是说它是最原始的CSS代码，下面看精简后的代码：

#header {
                  margin:10px 15px;
                  backgroung:#333 url(Images/header.jpg);
 }

在CSS中有复合属性这一说法，也就是说可以将很多属性参数整合在一起的，比如说上面的“margin-top;  margin-right;  margin-bottom;  margin-left;”可以整合成一个“margin”属性，然后为其配上参数。

通过这一点，我们就可以在原始CSS代码的基本上将代码进一步的精简。而且这样写的结构也合理，可读性也同样强。可是对于要精简到彻底来说，这还不够。为了让这段CSS代码的结构明了，我们用上了空格换行等占用空间的东西，如果将这些占用空间的去掉呢？

#header{margin:10px 15px;background:#333 url(Images/header.jpg);}

只这一句就替代了上面的一段代码，这样代码就已经精简到了最大化，当然，并不推荐所有人都这样写，这样写的CSS代码在可读性上要远远差于段落式的写法，除非你对自己写的代码有完全掌握的信心。

未完待续……