2.3　打下基础

要做的第一件事是先看看要处理的标记。下面是文档中头2 张照片和它们的

信息：

这里有很多类，我们应当明白它们的含义。

. pic标志着包含照片和相关信息的div。这有助于将这些div与任何其他

用途的div分开。

. ls意味着照片的横向布局（它的宽度比高度大），而pt则是指纵向布局

（高度比宽度大）。

. tn标志着缩略图周围的超链接。

. title表示照片的标题，catno表示它的目录编号，至于price，噢，含

义很明显。

真正比较重要的类是ls和pt，正如很快就能看到的那样。但是，所有这些

类早晚都会派上用场。例如，使用这些类设置照片的宽度和高度，这些都没有在

HTML 中定义。我们知道，横向缩略图的宽度是128 像素，高度是96 像素（纵

向布局就是96×128），但是，在项目完成之前，必须在CSS 中这样表述。

参见如何从网站下

载文件的说明。

空格的忧虑

仔细看一下标记，注

意ul元素是如何移

动到紧靠它前面链

接的右边，结束标

记div是如何放在

它后面的。这样做

是为了避免IE 老版

本中某些空白字符

引发的Bug 。糟糕的

是，这些空白字符对

某些老式浏览器来

说又特别重要，有时

候添加或者去掉一

些空白字符可以解

决一些布局问题。

第2 章　设置相册样式

第一步

边框问题

并不是所有的浏览

器都会在链接的图

片周围添加一个边

框，但有些浏览器

是这样的， 因此，

明确去掉图片的边

框是一个英明的主

意。况且这样做也

不会对那些没有边

框的浏览器带来任

何坏处。

开始工作之前，先添加一些基本的文档和页脚样式。对body元素来说，只

添加淡褐色的背景和一些外边距。我们已经知道将大量使用float，也想将页脚

显示在照片的后面，因此，我们需要清除（clear）它。这些做法在图2-1 中得以

说明。

图2-1

这些样式在整个项目的其他部分都不会再修改，因此，我们不必再担心它

们。以此为起点，让我们正式开始工作吧。