首页 > 代码库 > 15.2 亲自动手设计“禅意花园”页面
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设置为绝对定位方式,放置到页面右下角,这个页面就全部完成了。 在了解基本结构和方法的基础上,下面来具体讲解一下制作过程,希望读者能够通过这个制作过程,熟悉这个页面的结构,并经常思考一下,如何把本教程前面各个章节中的技术灵活地运用到这里。 二、整体设置 首先设置页面的整体背景色,文字等样式。 折叠CSS 代码复制内容到剪贴板
然后时文字段落的上下margin进行设置,这是为了使段落之间的距离在各个浏览器中相同。如果不设置的话,IE和Firefox中段落的间距会不同,而linklist需要绝对定位,这样效果就有有较大不同,因此在这里设置p的上下margin为10像素。 折叠CSS 代码复制内容到剪贴板
接下来设置container的属性,宽度固定760像素,水平居中,白色背景,四周设置10像素padding。重要的一点是将container的定位属性设置为relaLive,这样做的目的是使它里面的绝对定位元素可以以它为基准进行定位。 折叠CSS 代码复制内容到剪贴板
三、设置页头 ① 现在来设置页面的大标题。注意为了使副标题靠右,可以使它向右浮动,代码如下。 折叠CSS 代码复制内容到剪贴板
此时页面效果题目的标题部分已经形成了。 ② 设置quickSummary部分的样式,使它的宽度为260像索,向右浮动。然后设置其内部的两段文字的样式,可以做一些装饰性的修饰。 折叠CSS 代码复制内容到剪贴板
此时效果quickSummary中的第一段文字设置了虚线的方框。 ③ 设置quickSummary左侧的preamble部分,设定为向左浮动,宽度为490像素。此外,还需要设置preamble中的标题样式,这里对h3进行设置,它对整个页而上的所有h3标题都会发生作用。 折叠CSS 代码复制内容到剪贴板
此时效果preamble以及其他部分中的h3标题都使用了统一的样式,浅色背景和深色文字。 四、设置supportingText部分和linkList部分 现在来设置supportingText部分和linklist部分,代码如下。 ① supportingText使用标准流方式,因此设置右侧的margin为270像素,为linkList部分留出空间。 折叠CSS 代码复制内容到剪贴板
② 现在要对linkList进行绝对定位。这里希望linkList的上边缘与它左边的supportingText的最上边缘对齐,因此必须知道intro部分的高度(因为supportingText正好在intro部分的下面)。这里可以手工为intro设置一个高度,可以试验几次找到一个适当的高度,代码如下。 折叠CSS 代码复制内容到剪贴板
可以看到上述代码中linkList绝对定位的top值就正好等于#intro的高度值。 ③ 还需要注意,由于h3标题设置了上下margin,因此需要对supportingText中最上面的那个h3标题进行特殊设置,将上侧的margin的值设置为0,代码如下。 折叠CSS 代码复制内容到剪贴板
这时的效果可以看到这样才能保证linkList的位置看起来非常整齐。 ④ 仍然使用绝对定位,把footer放置到页面右下角,并对链接的样式进行设置,代码如下所示。 折叠CSS 代码复制内容到剪贴板
⑤ 至此页面的布局已经完成了,最后可以对正文中的链接样式进行设置,加上虚线边框,代码如下: 折叠CSS 代码复制内容到剪贴板
细心的读者可能会注意到,本案例最开始的效果图中,每个h3标题的左上角有一个斜角,有了本教程前面各章的基础,这是很容易实现的。lodidance.com ⑥ 准备一个10像素见方的图像,左上侧是白色,右下侧是背景色,然后将h3的背景图像设置为这个文件即可。 如果要实现标题左右两端都有斜角或圆角,就需要为左右两边各准备一张图片,将右边的图像放在h3中的span元素背景上即可。对这一点理解有困难的读者清参考前面涉及“滑动门”技术的章节。 到这里,这个案例就全部完成了。通过案例,熟悉了惮意花园页面的基本结构,以及设置的基本方法。这个案例设置的样式非常简洁,如果读者仔细浏览一下禅意花园中的作品,就能看到很多创意超群、精彩绝伦的页面都是基于这同一个简单的HTML代码产生的。 点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表 |
编辑:网页学习网 |
本文地址:http://www.lodidance.com/css/jc/952.html |