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

首先制作的页面效果如图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设置为绝对定位方式，放置到页面右下角，这个页面就全部完成了。

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

二、整体设置

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

折叠展开CSS 代码复制内容到剪贴板

1. body{
2. margin: 0px;
3. font-family : Arial, Helvetica, sans-serif;
4. font-size : 11px;
5. color: #557788;
6. background-color: #C0CEDC;
7. }

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

折叠展开CSS 代码复制内容到剪贴板

1. p {
2. margin:10px 0;
3. }

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

折叠展开CSS 代码复制内容到剪贴板

1. #container {
2. background-color: White;
3. width: 760px;
4. margin: 10px auto;
5. padding: 10px;
6. position:relative;
7. }

三、设置页头

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

折叠展开CSS 代码复制内容到剪贴板

1. #pageHeader {
2. background-color: #557788;
3. padding: 10px;
4. height: 35px;
5. }
6. h1 {
7. font-size : 28px;
8. color: White;
9. margin: 0px;
10. float: left;
11. }
12. h2 {
13. font-size : 18px;
14. color: #C0CEDC;
15. margin-top: 5px;
16. float: rightright;
17. }

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

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

折叠展开CSS 代码复制内容到剪贴板

1. #quickSummary {
2. float: rightright;
3. width: 260px;
4. }
5. #quickSummary .p1 {
6. color: White;
7. background-color: #C0CEDC;
8. border:1px #578 dashed;
9. padding: 10px;
10. margin: 10px 0px;
11. font-size : 13px;
12. }
13. #quickSummary .p2 {
14. font-size : 10px;
15. margin: 0;
16. }

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

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

折叠展开CSS 代码复制内容到剪贴板

1. #preamble {
2. width: 490px;
3. float: left;
4. }
5. h3 {
6. font-size: 18px;
7. margin: 10px 0px 10px 0px;
8. background: #C0CEDC url(corner.gif) no-repeat;
9. line-height:27px;
10. padding-left:10px;
11. }

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

四、设置supportingText部分和linkList部分

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

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

折叠展开CSS 代码复制内容到剪贴板

1. #supportingText{
2. margin-right:270px;
3. width:490px;
4. }

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

折叠展开CSS 代码复制内容到剪贴板

1. #linkList {
2. position:absolute;
3. rightright:10px;
4. top:230px;
5. width: 260px;
6. }
7. #intro {
8. height:230px;
9. }

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

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

折叠展开CSS 代码复制内容到剪贴板

1. #explanation h3{
2. margin-top: 0px;
3. }

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

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

折叠展开CSS 代码复制内容到剪贴板

1. #footer{
2. width:70px;
3. position:absolute;
4. bottom:20px;
5. right:10px;
6. }
7. #footer a{
8. text-align:center;
9. display:block;
10. padding:0 20px;
11. border:1px #c00 dashed;
12. }

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

折叠展开CSS 代码复制内容到剪贴板

1. a:link,a:visited {
2. text-decoration: none;
3. color: #c00;
4. }
5. a:hover,a:active {
6. text-decoration: underline;
7. }

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

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

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

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

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