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

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

2024-07-08 22:58:38   220人阅读

下面在详细介绍比较复杂的作品之前，先自己动手为禅意花园制作一个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.     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.   
  7. h1 {   
  8.     font-size : 28px;   
  9.     color: White;   
  10.     margin: 0px;   
  11.     float: left;   
  12. }   
  13. h2 {   
  14.     font-size : 18px;   
  15.     color: #C0CEDC;   
  16.     margin-top: 5px;   
  17.     float: rightright;   
  18. }

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

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

折叠CSS 代码复制内容到剪贴板
  1. #quickSummary {   
  2.     float: rightright;   
  3.     width: 260px;   
  4.     }   
  5.   
  6. #quickSummary .p1 {   
  7.     color: White;   
  8.     background-color: #C0CEDC;   
  9.     border:1px #578 dashed;   
  10.     padding: 10px;   
  11.     margin: 10px 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.     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教程布局之道》教程列表

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


联系
我们