|
上一章中，对“CSS禅意花园”网站的标准HTML文档进行了结构讲解和分析，并制作了一个简单的网页。 在这一章中，就对禅意花园的158号作品和191号作品进行深入细致的分析和研究，彻底搞清楚它们是如何制作出来的。这两个作品的效果都相当精致，可以给读者很好的启发。 先来分析第158号作品，名称为《简约夕阳》(A Simple Sunsei)，由美国设计师RobSoule设计，如http://www.csszengarden.com/?cssfile=158/158.css所示，读者可以参考网页学习网CSS教程中的“第16章\158.htm” 在这个作品中，充分使用了图片的技巧，制作出了非常协调的作品意境。下面就来详细地看一下这个作品的设汁思路和过程。 在前面已经分析了几个禅意花园作品，读者应该能够不用看代码，就知道本案例的布局方式了。 这个页面最上面的落日图片是pageHeader部分的背景，下面的背景是由一个带有左右边框的图竖直平铺获得的。整体背景很自然，上部是渐变色，下部是固定色，这可以通过对整体的背景进行设置来实现。其内部的各个div排列是比较规整的，linklist使用绝对定位，放在页面左侧，具体做法请看下面的详细介绍。 一、设置渐变的页面背景 为了使页而的整体背景在最上面有渐变的效果，准备如图1所示的图像。这个图像会水平方向平铺在页面的最上端、竖直方向不平铺。注意它最下端的颜色##FOE9CE，也就是页面中背景网像没有覆盖到的地方的颜色。lodidance.com
对body的CSS样式设置代码如下。 折叠展开CSS 代码复制内容到剪贴板
注意其中的background首先设置了背景色，后面又设置了背景图像。这样做的效果就是背景图像没有覆盖到的地方颜色为#FOE9CE。这种颜色与背景图像最下端的颜色相同，所以过渡非常自然。 本案例最重要的3个图像文件是资源文件中的top.jpg、prebg.jpg、contbg.jpg如图2所示，这3个图像竖直紧密排列，贯穿整个页面。
图2 本案例所用到的资源 在3个背景图像中，前两个分别是pageHeader和quickSummary的背景图像，第3个是用于竖直方向平铺的背景。 折叠展开CSS 代码复制内容到剪贴板
二、设置整体页面结构 在设置上面的背景色之后，整个页面的外层框架就搭建起来了。为了使读者能够清晰理解上面的设置，并对下面要进行的设置有所了解，可以用firefox工具查看页面结构。 在图中可以看出，最上面的pageHeader高度为287像素，它的下面是suickSummary，高度为87像素，原本preamble应该在quickSummary的下面，现在通过设置负的margin-top值。 将它向上移动了95像素，这样preamble实际上就和quickSummary重叠了。注意quickSummarry中的两段文字都通过绝对定位移动到了pageHeader部分的图片上。 supportingText在preamble的下面。supportingText和preamble的宽度都是380像素，并都设置了260像素的左侧padding，这样就给linkList留出了空间。然后通过设定margin和width，使suppartingText中的最后一个div不再挤到页面右侧，而是贯穿整个页面。 三、设置linkList 在了解了基本结构以后，继续设置各个部分的布局。在设置时，可以随时参考FireFox工具中的结构图。 linkList部分原本应该在supportingText的下面，现在通过绝对定位，把它放到页面的左侧。代码如下。 折叠展开CSS 代码复制内容到剪贴板
注意代码中使用了绝对定位，但是它的上级元素中都没有设置定位属性，因此它足以浏览器窗口定位的。这里需要注意，只需设置top的值，而不要设定Ieft的值，这样就可以使水平方向仍保持在原来的位置上。为了使linkList的内容向右偏移，这里将左padding设置为45像素。 至此，3个大部分就都各就各位了。下面的任务就是参考上面结构图中的数据，把3个大部分中的具体内容放置到适当的位置上。 四、设置各个部分的标题 在premeable中有一个h3标题；supportingText部分的前4个div中，各有一个h3标题；在linkList的3个div中。各有一个h3标题。为了使用图像替换这8个h3标题的文字，需要把文字隐藏起来。以前的案例使用的方法是，将里面的span的display设置为none，就可以不显示它们。这里使用了另外一种方法，代码如下： 折叠展开CSS 代码复制内容到剪贴板
可以看到，这些文字都通过设置一个绝对值很大的负的text-indent(文字缩进)属性，使文字移动到页面外边，并且设置了它们的离度，这样这些h3标题的文字虽然看不到了，但它们仍然占据着高度空间。 接下来，把这8个h3标记的背景属性依次设置为相应的背景图像。 设置背景图像的代码如下： 折叠展开CSS 代码复制内容到剪贴板
注意，linkList中最上面的一个标题通过设置margin向下移动了15像素。在linkList内部的3个div中，为了实现圆角框的效粜。每一个div的最下面都有一个相同圆角图像背景。 需要将它放入每一个div中，代码如下。 折叠展开CSS 代码复制内容到剪贴板
然后需要把quickSumary中的两个文字段落移动到网页头部的图片上。显然这需要使用绝对定位。 折叠展开CSS 代码复制内容到剪贴板
请注意，这里和linkList的定位方法很相似，position属性设置为绝对定位，但是只没置top的属性值，而不设置水平方向的属性值，这样可以使得在水平方向上仍保持在原来的位置的。然后通过margin和padding来控制水平的位置。 五、设置footer 现在来设置supportingText中最下面的footer部分，代码如下。 折叠展开CSS 代码复制内容到剪贴板
由于supportingText已经使用padding-left把左边空出来，因此为了使footer能够把宽度扩展到整个页面的最右端，这里将左侧的margin设置为-235像素，然后再配合padding，获得最终需要的效果。lodidance.com 到这里所有的布局工作都完成了，剩下的就是一些文字、链接文件和列表文字等局部样式的设置了，这里就不再详细介绍了。最终的效果请参见本案例最开始的效果图。 六、本案例的总结 本案例的重点有如下3点。 (1) 学习整体结构的搭建，掌握灵活划分和组织页面的方法。 (2) 各种使用背景图像的技巧，例如这里制作linkList的圆角框、设置整个页面的渐变背景色等。 (3) 使用绝对定位时，如果只设置一个方向上的定位属性，例如只设置top，或者只设置right，则只在一个方向上使用绝对定位，另一个方向上仍然保持原来的位置。这在前面表格一章的“小视图模式日历”的案例中曾经遇到过。在那个案例中，对“日程安排”设置了绝对定位，目的是使它脱离标准流，但是并不对它设置top或left等距离属性，这样它就仍然在原来的位置。这个技巧非常有用。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/954.html |
16.1 《简约夕阳》（158号作品）布局方法剖析