首页 > 代码库 > 15.2 亲自动手设计“禅意花园”页面

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

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

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

图1 简单效果
图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 页面的布局示意图
图2 页面的布局示意图

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

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

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

二、整体设置

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

折叠CSS 代码复制内容到剪贴板
  1. body{   
  2.     margin0px;   
  3.     font-family : ArialHelveticasans-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.     width760px;   
  4.     margin10px auto;   
  5.     padding10px;   
  6.     position:relative;   
  7. }

三、设置页头

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

折叠CSS 代码复制内容到剪贴板
  1. #pageHeader {   
  2.     background-color#557788;   
  3.     padding10px;   
  4.     height35px;   
  5. }   
  6.   
  7. h1 {   
  8.     font-size : 28px;   
  9.     color: White;   
  10.     margin0px;   
  11.     floatleft;   
  12. }   
  13. h2 {   
  14.     font-size : 18px;   
  15.     color#C0CEDC;   
  16.     margin-top5px;   
  17.     floatrightright;   
  18. }

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

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

折叠CSS 代码复制内容到剪贴板
  1. #quickSummary {   
  2.     floatrightright;   
  3.     width260px;   
  4.     }   
  5.   
  6. #quickSummary .p1 {   
  7.     color: White;   
  8.     background-color#C0CEDC;   
  9.     border:1px #578 dashed;   
  10.     padding10px;   
  11.     margin10px 0px;   
  12.     font-size : 13px;   
  13. }   
  14. #quickSummary .p2 {   
  15.     font-size : 10px;   
  16.     margin: 0;   
  17. }

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

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

折叠CSS 代码复制内容到剪贴板
  1. #preamble {   
  2.     width490px;   
  3.     floatleft;   
  4. }   
  5. h3 {   
  6.     font-size18px;   
  7.     margin10px 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.     width260px;   
  6. }   
  7. #intro {   
  8.     height:230px;   
  9. }

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

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

折叠CSS 代码复制内容到剪贴板
  1. #explanation h3{   
  2.     margin-top0px;   
  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-decorationnone;   
  3.     color#c00;   
  4. }   
  5. a:hover,a:active {   
  6.     text-decorationunderline;   
  7. }

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

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

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

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

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

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/952.html