15.2 亲自动手设计“禅意花园”页面

下面在详细介绍比较复杂的作品之前，先自己动手为禅意花园制作一个CSS设计方案。希望读者在学习完本书之后，也能够制作出漂亮的作品，提交到禅意花园网站上。

首先制作的页面效果如图1示。本例最终效果文件位于本书网页学习网CSS教程资源中“第15章\9999.htm”。

图1 简单效果

一、结构分析

分析一下布局结局，效果如图2所示。希望读者，特别是英语不是很好的读者，能够记熟这几个id的英文单词，这样能够方便地理解其中的道理。

在这个布局方案中，整体的container宽度固定，水平居中。intro在最上面，pageHeader和preamble采用标准流方式，而quickSummary使用浮动方式，这样就形成了左右并列效果。在pageHeader中两个标题并排，只需要使h2向右浮动就可以了。lodidance.com

接下来的supportingText部分按照普通的标准流方式布局，为了给右边的linklist留出空间，可以将它的右侧margin或padding设置为适当的宽度。

此时linklist只能通过绝对定位放置到需要的位置了。它的上级元素是container，因此必须要设定到container的上边的距离。实际上，如果是我们自己来写这个HTML，那么可以把intro部分放到container的外面，这样就可以将top设置为O，而不用管intro部分的高度了。但是由于HTML结构已经定死了，因此只能给出固定的距离顶部的高度。

图2 页面的布局示意图

这里请读者思考一个问题，如果supportingText部分使用向左浮动布局，linklist向右浮动，是否可行？会产牛什么问题？应该如何解决？

最后，把supportingText中的最后-个div-foorer设置为绝对定位方式，放置到页面右下角，这个页面就全部完成了。

在了解基本结构和方法的基础上，下面来具体讲解一下制作过程，希望读者能够通过这个制作过程，熟悉这个页面的结构，并经常思考一下，如何把本教程前面各个章节中的技术灵活地运用到这里。

二、整体设置

首先设置页面的整体背景色，文字等样式。

然后时文字段落的上下margin进行设置，这是为了使段落之间的距离在各个浏览器中相同。如果不设置的话，IE和Firefox中段落的间距会不同，而linklist需要绝对定位，这样效果就有有较大不同，因此在这里设置p的上下margin为10像素。

接下来设置container的属性，宽度固定760像素，水平居中，白色背景，四周设置10像素padding。重要的一点是将container的定位属性设置为relaLive，这样做的目的是使它里面的绝对定位元素可以以它为基准进行定位。

三、设置页头

① 现在来设置页面的大标题。注意为了使副标题靠右，可以使它向右浮动，代码如下。

此时页面效果题目的标题部分已经形成了。

② 设置quickSummary部分的样式，使它的宽度为260像索，向右浮动。然后设置其内部的两段文字的样式，可以做一些装饰性的修饰。

此时效果quickSummary中的第一段文字设置了虚线的方框。

③ 设置quickSummary左侧的preamble部分，设定为向左浮动，宽度为490像素。此外，还需要设置preamble中的标题样式，这里对h3进行设置，它对整个页而上的所有h3标题都会发生作用。

此时效果preamble以及其他部分中的h3标题都使用了统一的样式，浅色背景和深色文字。

四、设置supportingText部分和linkList部分

现在来设置supportingText部分和linklist部分，代码如下。

① supportingText使用标准流方式，因此设置右侧的margin为270像素，为linkList部分留出空间。

② 现在要对linkList进行绝对定位。这里希望linkList的上边缘与它左边的supportingText的最上边缘对齐，因此必须知道intro部分的高度（因为supportingText正好在intro部分的下面）。这里可以手工为intro设置一个高度，可以试验几次找到一个适当的高度，代码如下。

可以看到上述代码中linkList绝对定位的top值就正好等于#intro的高度值。

③ 还需要注意，由于h3标题设置了上下margin，因此需要对supportingText中最上面的那个h3标题进行特殊设置，将上侧的margin的值设置为0，代码如下。

这时的效果可以看到这样才能保证linkList的位置看起来非常整齐。

④ 仍然使用绝对定位，把footer放置到页面右下角，并对链接的样式进行设置，代码如下所示。

⑤ 至此页面的布局已经完成了，最后可以对正文中的链接样式进行设置，加上虚线边框，代码如下：

细心的读者可能会注意到，本案例最开始的效果图中，每个h3标题的左上角有一个斜角，有了本教程前面各章的基础，这是很容易实现的。lodidance.com

⑥ 准备一个10像素见方的图像，左上侧是白色，右下侧是背景色，然后将h3的背景图像设置为这个文件即可。

如果要实现标题左右两端都有斜角或圆角，就需要为左右两边各准备一张图片，将右边的图像放在h3中的span元素背景上即可。对这一点理解有困难的读者清参考前面涉及“滑动门”技术的章节。

到这里，这个案例就全部完成了。通过案例，熟悉了惮意花园页面的基本结构，以及设置的基本方法。这个案例设置的样式非常简洁，如果读者仔细浏览一下禅意花园中的作品，就能看到很多创意超群、精彩绝伦的页面都是基于这同一个简单的HTML代码产生的。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表