当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

打好CSS布局的基础--HTML结构图示(二)

点击数:22542012-07-17 11:27:35 来源: 海盈网络

    图像替换

    这些额外的span标签还有个用途,那就是图像替换。这是为设计禅意花园的HTML时CSS设计领域中流行的一种全新的方法所准备的。让我们举例说明这个方法:若你想用图像替换页面上的某一个标题(例如一个h3标签)中的文字,那么就必须用两个标签(一个h3和一个span)将文字包围起来。

    然后我们可以用display:none之类的规则将span中的文字隐藏起来,并为h3应用背景图像,这样一个带有丰富图形效果的标题就做好了。因为禅意花园中所有的元素中都包含了这样的一个span,所以这种形式的扩展也就非常易于应用。

    但为什么宁可要这么麻烦,也不是用同样能实现该功能的img元素呢?同样也是出于灵活性方面的考虑。若是将图片的地址直接写入HTML中,就不可能只通过替换样式文件让页面来个“大变脸”了。但这个图像替换的方法也存在着一些问题,将在本书稍后部分介绍。

    Lighten up(“减肥”)

    这些决定及实现方法都是基于当时大家认同的最佳设计方案。与最近出现的一些技术相比,这种实现方式的代码量偏多,现在回顾起来,不难发现很多可改进的地方。

    禅意花园发布不久,一种新的、不需要额外span的图像替换方法横空出世,因此HTML文档中的大部分span自然也受到了冷落。98%的提交作品中都没有使用这些额外的span,所以基本上可以认为这些span是多余的。除了被某些设计师用于实现一些极为特殊的视觉效果之外,文档结尾部分的那些空的div和span也没有太大的用处。

    对于其他网站来说,文档结尾部分的那些空的div和span并没有什么意义。但在禅意花园中它们却有存在的必要,即为了实现最大的灵活性。因为并不是每一个网站都需要如此多样的设计,所以在为这些编写HTML时也不必考虑这些。

    若你决定以禅意花园的HTML为基础开始编写页面(我们祝愿你的老板同意你这样做),请记住基于标准的设计中很重要的一个目标就是避免不必要的元素。偶尔使用div元素将一些逻辑上相关的元素包围起来并没有什么问题,但若是把页面中的每一个段落或标题都用span元素包围起来,那么就有些过度了。关于如何正确、合理的组织文档结构,将在本章稍后讨论。
【责任编辑:(Top) 返回页面顶端