DREAMWEAVER网页制作和css实例

1、CSS混沌沌初开I：导航菜菜单素材的的设计现在开始我我们将学习习如何一步步一步的构构建一张CCSS页面面。本教程程分成以下下几个部分分：第一讲讲主要是关关于如何在在PS中制作作导航按钮钮素材；第第二部分主主要针对的的内容是背背景，接着着是页面的的整体布局局以及顶部部解析，最最后一部分分是如何整整合CSSS和XHTMML。有些人可可能会疑惑惑为什么要要从导航按按钮图片的的制作开始始，事实上上我的初衷衷是让大家家了解进而而注重素材材制作中的的一些细节节处理，这这对最终的的作品效果果有很大的的影响，至至少在视觉觉上而言。首先看一一下完成的的效果：玻璃质感导导航图片的的制作：首先我们们在Phootos

2、hhop中建建立一个1178x222像素的的RGB空白白文档，添添加一个新新图层命名名为“按钮”，并用灰灰色#ECCECECC进行填充充。再新建建一个图层层命名为“高光”，在其上上、左边缘缘各绘制11px的白白色线条，你你用画笔或或单像素选选取工具都都可以。然然后我们用用橡皮工具具把左边缘缘白线的底底部擦除一一段，在这这里我使用用的是大小小20pxx透明度为为50%的橡橡皮刷：新建一个名名为“网点”的图层，用用1px的铅铅笔工具在在适当的位位置绘制几几个小点，示示例中的颜颜色是#77272772，当然然这里你可可以自由发发挥设计更更有创意的的小点组合合，关键就就是要让它它们看起来来精致有序序：

3、接着我们可可以通过钢钢笔工具绘绘制路径创创建选区，并并在选区内内填充#dd6d6dd6颜色，来来模拟玻璃璃的质感效效果。整个个图片素材材的制作过过程虽然不不是很复杂杂，但是最最终效果看看起来也不不是很差，不不是么？鼠标经过导导航时的翻翻转图片：创建翻转转效果图片片，我们只只要简单的的在原有素素材基础上上调整色调调就即可，关关于文本的的添加在这这里就不细细说了。我我们可以为为每个图层层调整色调调，在示例例中我主要要使用了一一下几种颜颜色：背景景#BFEE3FF、玻璃质感感#A5DD1F3、网点#EE40011B。这部部分教程涉涉及到一些些Phottoshoop的基本本知识，如如果你不是是很了解，

4、建建议先学习习一些PSS的入门基基础，毕竟竟Adobbe合并了了*之后，其其旗下软件件尤其是PPS与网页页设计的关关联性已经经越来越紧紧密了，大大多时候你你要设计出出优秀美观观的网页，都都离不开这这些软件的的帮助。当当然颜色选选择要视乎乎你的需要要，制作的的方法大致致还是相通通的，你也也可以发挥挥创意进行行更好的细细节设计：CSS混沌沌初开III:背景图图案及配色色本教程的第第二部分主主要有两个个重点：一一是如何正正确选择导导航菜单中中所涉及的的颜色，虽虽然它没有有很多的技技术含量，但但使用的颜颜色是否恰恰当，与后后期出来的的效果是有有很大影响响的；另外外一部分主主要是关于于页面背景景的，侧重

5、重于制作背背景图片素素材时的一一些细节问问题。在第第一讲中，我我主要是介介绍一种实实现玻璃材材质按钮的的快捷途径径，现在来来讲颜色的的选择似乎乎有点滞后后了。不过过鉴于网站站的风格存存在差异，素素材色系的的选择也是是界面设计计阶段很重重要的一块块内容，网网络上也有有很多关于于网页色彩彩的文章，大大家可以依依据其中介介绍的一些些基本知识识进行参考考，虽然良良好的色彩彩感觉需要要很长一段段时间来培培养。选择择你的色彩彩体系事实实上色系的的选择会体体现很多个个人因素，毕毕竟每个人人都会有各各自的色彩彩偏好，你你的选择也也会彰显你你的个人风风格。没人人能建议你你“必须选择择什么颜色色”，这里我我也只能

6、提提供一些个个人认为比比较实用的的意见：使用至少一一种高饱和和度、高辨辨识度的色色彩，并以以其色调定定义站点的的整体基调调。把这个个色彩运用用在文本链链接上，能能使其更加加显眼、引引人关注； 谨记不要在在一张页面面中使用过过多的颜色色，这样只只会让你的的网页看起起来很花哨哨繁杂。我我的建议是是最好保持持在三种之之内：一个个强调色和和两个辅色色； 在颜色的搭搭配上，不不论是主色色还是辅助助色，都要要善于通过过它们明度度变化来衍衍生更多的的色彩，如如果只是反反复的使用用三种以下下的颜色未未免会让人人感觉单调调，当然这这也不是意意味着颜色色变化越多多你的页面面看起来就就会越出色色，仍然要要视乎网站站

7、的整体风风格和设计计者对颜色色的驾驭能能力：在PS中我我们可以通通过在色相相/饱和度（CCtrl+U）面板板中调整参参数来调配配颜色。事事实上图中中的几组颜颜色就是通通过这种方方法调制出出来的，当当然在这个个面板中可可以变化出出很多颜色色，具体哪哪个参数应应该为什么么值都没有有硬性的规规定，网络络上有很多多推荐的色色彩组合并并明确给出出了RGBB值，大家家在利用这这种方法配配色的时候候也可以参参考那些文文章教程。如果你看看了上面的的讲解之后后仍然不知知道如何着着手， HYPERLINK /colors/Colors.html 这段段关于颜色色的影片 或许会对对你有所帮帮助。事实实上我觉得得每个

8、人都都应该去看看一下这个个影片，不不仅因为它它本身设计计得相当有有趣，更重重要的是对对于认识和和了解大众众化的色彩彩体验和感感知从而运运用到网页页设计中，它它都是一个个很好的引引导和巩固固。是时候候开始绘制制背景图案案了现在我我们开始讨讨论网页的的背景图案案。当我们们在PS等软件件中创作背背景图案时时，往往要要精细到像像素，尤其其是那些平平铺填充的的背景。首首先我们在在PS中新建建一个300 x像素的的空白文档档，填充适适当的颜色色，并用铅铅笔工具在在其上绘制制一些单像像素小点，下下面是一些些例子：如第一讲中中导航按钮钮上的小点点一样，在在这里你也也可以尽量量的发挥自自己的创意意，但是还还是有

9、几个个需要注意意的地方，比比如小点的的颜色，不不能跟背景景色反差太太大，不然然平铺以后后它们会变变得很刺眼眼。如果要要利用小点点来组合出出一些图案案或线条，我我通常会采采用复制图图层并通过过方向键调调整其位置置的方法，适适当的时候候还会变化化其图层模模式或透明明度等。制作这些背背景图案的的一个难点点就是，如如何保证图图案平铺时时能实现无无缝接合，毕毕竟背景的的面积往往往比较大，它它上面若有有割裂就会会很显眼。我通常采采用的方法法是利用PPS中的矩矩形选框工工具，比如如下图中，正正方形选区区左上角标标识出的像像素必须与与其它三个个标识区一一致，那么么当我们把把这样一块块区域截取取下来进行行平铺的

10、时时候就不会会有问题：当然这个问问题是否容容易解决，也也是视乎你你最初设计计的背景图图案，如果果我们动手手的时候就就把可能遇遇到的一些些问题考虑虑在内，那那么到解决决的时候也也不会太费费力甚至返返工了。 CSS混沌沌初开IIII:顶部部图片视觉觉修饰这节是关于于素材设计计的最后一一部分了，设设计工作完完成后将会会开始讲解解如何切片片以及在CCSS和XHTMML中构建建最终页面面。首先看看一下这节节设计的效效果图：在制作按钮钮时，我用用了粉红和和暗绿两种种色调，可可能看起来来有点怪，但但个人很钟钟意这个组组合。在设设计网页整整体界面的的过程中，我我会给出一一些意见和和建议，重重点是顶部部的图片，

11、如如何增加一一些细节，让让它看起来来更加的美美观、精致致。顶部图图片的视觉觉处理在教教程的前两两部分中，提提到过导航航按钮的颜颜色选择，现现在我们来来看一下如如何处理一一张花卉图图像的色调调，使其与与页面的风风格达到统统一。在用用到的花卉卉图像素材材中，大家家可以发现现它上面也也有红和绿绿两种色调调，我要做做的事情就就是把其中中的颜色调调制成粉红红和暗绿，就就好似导航航菜单中使使用的色调调一样：首先来看一一下图片中中花朵的颜颜色，它的的色调偏向向于大红，还还是使用PPS中的色色相/饱和度命命令来对它它进行调整整。利用快快捷键按CCtrl+U调出色色相/饱和度面面板，在“编辑”项的下拉拉列表中选

12、选择“红色（Cttrl+11）”，这样我我们就能只只针对图像像中的红色色进行调整整了。拖动动色相滑块块调制出我我们需要的的红色，具具体的数值值依据实际际情况，比比如我这里里是大致是是-30左右右：下一步就是是通过修饰饰细节增加加一些辅助助色调来增增进视觉效效果，为接接下来的滤滤镜处理作作一些预处处理。顶部部图片的处处理对创意意有一定的的要求，如如果有相关关的经验的的话也就不不是件难事事，所以素素材处理能能力以及个个人的美工工基础都会会对设计过过程、设计计结果产生生影响：在之前的步步骤中图片片的尺寸和和体积无疑疑已经进行行了调整，但但是如果有有比较多的的细节要处处理的话，建建议还是在在原始尺寸寸

13、上操作，像像示例中的的图片我刚刚开始也是是在16000 12200的原原始大小下下进行处理理的。我为为图像添加加了个人比比较偏爱的的绘画涂抹抹滤镜（滤滤镜菜单艺术效果果），效果果如下图。在PS中，滤滤镜的运用用是很有趣趣的一件事事情，调节节其中的参参数就可以以达到很多多意想不到到的效果，加加之在CSS版本中提提供了可用用滤镜效果果的缩略图图预览，让让这个实用用的工具用用起来更加加方便：接着我们添添加一些波波浪线条来来营造虚幻幻的意境，可可以用笔刷刷或者钢笔笔绘制一些些曲线，当当然也可以以用渐变工工具制作，只只要达到下下图中渐隐隐效果即可可。事实上上我们只需需要做出其其中一条就就可以了，然然后复

14、制图图层调整其其透明度、角度、扭扭曲制作出出其它的线线条。这里里使用的颜颜色还是推推荐使用粉粉红，为了了区别于花花朵的颜色色，可以把把线条的粉粉红明度调调大一点。在图片的的右边，我我利用Taamuz字字体添加了了一个修饰饰符号，效效果如下：如果对以上上操作有疑疑问，可以以 HYPERLINK /vpieters/css_step2/step2_whooshes.mov.zip 下载QuiickTiime演示示影片 观看！在图图片上添加加BLOGG标题Bloog的标题题反映了你你网站的内内容主题，其其文字组织织因人而异异，一般还还会加上一一个图标或或LOGOO，毕竟每每个人都想想自己的BBlog

15、与与众不同，有有一些标志志性的元素素，在这里里我就简单单的选用一一个仙人掌掌标志：下面是一些些关于字体体或修饰符符号的资源源链接： HYPERLINK /findfonts/detail.asp?pid=201879 Minioon修饰符符和Tammuz字体体 HYPERLINK /type/browser/C/C_ornament.jhtml;storesessionid=TSUS1JHN0R5NTQFI0IKRT5GAVDJBIIV1 Adobee提供的修修饰性字体体 HYPERLINK /ding-e.htm 一系列免费费的Dinngbatts字体 最终的界面面设计效果果至今为止止，不论

16、是是在导航按按钮还是顶顶部图片的的制作，我我们都还没没有遇到什什么棘手的的难题。现现在让我们们把做出来来的素材整整合在一起起，拼合成成一张 HYPERLINK /articleimg/2008/06/5893/css_templatedesign.jpg 最终的界界面效果 。这已经经是界面设设计的最后后一个阶段段了，所有有若还有什什么可添加加的修饰元元素，最好好都在界面面效果图中中体现出来来。在我的的示例页面面中，文章章标题和友友情链接的的前面我都都用精致的的图标进行行修饰，效效果看起来来还可以，当当然你们可可以选择自自己喜欢的的素材替换换，最好也也能在设计计过程中体体会到乐趣趣！ CSS混沌

17、沌初开V：侧边栏栏导航菜单单的实现首先对教程程的第四部部分作一点点补充。有有人建议BBlog的的标题最好好使用H11标签，以以文本的形形式表现标标题内容，原原因是不论论是在CSSS关闭的的情况下，还还是对于搜搜索引擎的的抓取，HH1标签结结合文本的的形式都具具有更好的的可访问性性。这个提提议很有道道理，很多多人也是这这么做的，所所以我也建建议大家对对之前的代代码进行调调整。若使用H11标签来实实现Bloog标题，又又想保持原原来标题位位置的图片片的话，那那么就有必必要了解一一下CSSS中很经典典的图像替替换文本技技术。简单单点说就是是在XHTTML中包包含了文本本，并为其其设置背景景图片，但但

18、是要通过过CSS“隐藏”文本而仅仅仅显示背背景图片。图像替换文文本技术这个技术有有时候我们们也称之为为文本替换换或图像替替换，其强强调的核心心是在HTTML代码码中我们使使用文本，然然后通过一一些方法将将文本“隐藏”，而仅显显示背景或或其它形式式的图片，这这样在保证证可访问性性的同时，也也使得页面面因图像的的应用而更更加美观。比如我们们可以将图图片设置为为背景，让让后利用ttext-indeent使文文本有足够够的缩进实实现隐藏，代代码如下：h1 widtth: 6692pxx; heeightt: 900px; textt-inddent: -99999pxx; baackgrroundd:

19、 urrl(immagess/heaader.jpg); maarginn: 0; padddingg: 0; 其中的wiidth和和heigght是必必须定义的的，且需和和背景图片片的尺寸保保持一致。textt-aliign: centter被转转移到了bbody标标签中，这这样页面中中所有的内内容都被定定义为居中中显示，而而那些不需需要居中的的内容，如如文章正文文，我们可可以再添加加textt-aliign: leftt进行覆盖盖。当然对对于外围容容器而言，我我们利用mmargiin: 00px aauto使使其在水平平方向上保保持在页面面的中部。导航菜单的的实现首先定义导导航外围容容器的

20、样式式：#leftt wwidthh: 1778px; 现在外围容容器我们只只要简单的的定义其宽宽度，并赋赋予lefft的id名。在在leftt容器中，我我们添加一一个名为nnavcoontaiiner的的子容器来来放置导航航菜单。实实现导航的的标签推荐荐使用无序序列表ull，通过CSSS我们可可以改变其其外观和形形式。HTTML结构构如下： Homee Abbout me ximiicc Artiicless Phhoto rolll ul和lii标签构建建了一个简简单的项目目列表，其其项目符号号默认为小小圆点，这这是我们不不需要的。利用CSSS可以去去掉那些小小圆点，并并用背景图图片的形式

21、式替换以我我们制作好好的图标：#navccontaainerr wwidthh: 1778px; #navccontaainerr ul maarginn: 0; padddingg: 0; lisst-sttyle-typee: noone; fontt: boold 112px/22pxx Verrdanaa, Arrial, Hellvetiica, sanss-serrif; textt-inddent: 20ppx; lletteer-sppacinng: 11px; bordder-bbottoom: 11px ssolidd #ffff; 第一段代码码还是定义义导航容器器的宽度，

22、其其值与leeft容器器相同。第第二段代码码主要用于于改变列表表的外观，margin和padding确保导航项目的周围没有空隙，并去除了列表项默认的缩进，list-style-type则定义了列表的项目符号为无。text-indent使文本左边空出一定的空间，以便在之后的步骤中定义背景图片，并保证背景图不会被文本遮盖。最后一行代码在每个导航项目的底部生成一条白线，兼具美化和分界的功能。接下来是链链接外观的的定义：#navccontaainerr a dissplayy: bllock; widdth: 178ppx; hheighht: 222px; 以上代码是是对导航内内a标签的CSSS定义

23、，作作用于导航航中的每个个链接元素素。dissplayy: bllock将将链接对象象转换为块块级元素，然然后再定义义其宽和高高，使得链链接能具有有类似按钮钮一样矩形形的触发区区域，并且且让我们可可以利用伪伪类a:hhoverr来定义鼠鼠标经过链链接时的翻翻转效果，如如在第二段段代码中展展示的简单单的改变背背景色或背背景图片：#navccontaainerr a:llink, #naavconntainner aa:vissitedd bbackggrounnd: uurl(iimagees/bgg_navvbuttton.ggif); collor: #5C6604D; texxt-deec

24、oraationn: noone; #navccontaainerr a:hhoverr bbackggrounnd: uurl(iimagees/bgg_navvbuttton_oover.gif); coolor: #A55003BB; teext-ddecorratioon: nnone; 第一段代码码定义了链链接文本的的颜色，并并设置teext-ddecorratioon属性为为nonee来去除链链接默认的的下划线。导航的设设计往往要要求简洁、明了，并并且具有很很强的指示示性，所以以我在这里里定义了一一个额外的的样式#ccurreent来表表现当前页页面处于导导航中的哪哪个项目：#na

25、vccontaainerr li a#cuurrennt backkgrouund: url(imagges/bbg_naavbuttton_overr.giff); ccolorr: #AA50033B; ttext-decooratiion: nonee; 名为currrentt的样式针针对的是列列表项目lli中的链链接元素，其其属性的定定义与链接接的hovver状态态样式是一一样的，现现在我们要要做的事情情就是把这这个样式应应用到HTTML中： Homme AAboutt me Conntactt me Artticlees PPhotoo rolll 现在的cuurrennt样式是是应

26、用在第第一个lii上，也就就是浏览器器解析后“Homee”菜单较较之其它的的菜单项目目有其独特特的外观，表表明当前的的页面是属属于“Hoome”这这里栏目的的。当然页页面变化了了，currrentt样式应用用的li对象也也就不一样样了。CSS混沌沌初开IVV：页面DIIV布局解解构在前三讲的的教程中我我们已经完完成了网页页界面设计计的工作，从从本节开始始，我们将将关注如何何对效果图图进行解构构，并初步步拟定网页页文件的DDIV结构构。首先我们必必须明确几几个问题，比比如设计好好的界面应应该划分成成几块？每每块对应网网页中的哪哪部分内容容？只有对对这些问题题有了概念念之后，我我们才能开开始进行切

27、切片和导出出的操作。如果对页页面构建的的整个流程程很熟悉，那那么以上几几个问题并并没有太大大的难度，可可能你在PPS中设计计素材的时时候就已经经开始考虑虑之后的DDIV划分分了。当然然，我们是是要有一定定的应变能能力，合理理的组织CCSS和XHTMML，让最最终出炉的的网页具有有更好的灵灵活性和可可访问性。本例中页面面模块划分分的规划页面顶部（the header）； 左侧边栏（the left）； 主体内容（the content）； 页脚（thhe foooterr）； 必须进行切切片并导出出JPF或GIF的几几块区域顶部图片（header）； 默认导航图图片（bgg_navvbuttto

28、n） 翻转导航图图片（bgg_navvbuttton_oover） 友情链接图图标（buullett_exttlinkk） 文章标题图图标（buullett_tittle） 也许你会想想：“那背景图图片呢?”我没有把把它罗列在在其中，因因为背景图图片比较特特殊，不论论在何种分分辨率下我我们都要保保持主体内内容的居中中，所以我我们需要一一种更聪明明的方法。这是我们们要导出的的背景图片片，它的尺尺寸是16600X55px，应应该够用了了，除非你你拥有Appple公公司30英寸的的超宽屏显显示器。利用CSSS定义页面面的背景下面的CSSS代码可可以让我们们的页面背背景保持居居中显示：body baa

29、ckgrroundd: #FF7F7FF6 urrl(immagess/bacckgroound.gif) reppeat-y 500% 0; bacckgroound-attaachmeent: fixeed; 背景图片只只有5pxx高度，所所以我们将将其设置为为纵向平铺铺，然后利利用参数550%使其其水平居中中，参数ffixedd的用处是是让背景不不随内容的的滚动而滚滚动，它是是“凝固”的。这里里的选择符符我们使用用bodyy，因为背背景效果是是针对整张张页面而言言的。构建页面的的DIV结构构首先来看一一下顶部版版块的CSSS定义：#headder texxt-allign: cennte

30、r; 顶部版块的的样式我们们使用idd选择符，注注意在同一一个文档中中id选择符符必须是唯唯一的。网网页的顶部部也需要居居中，这也也是我们为为什么定义义textt-aliign的原原因。下面面这段代码码我们要添添加在boody标签签之间： 你可能也注注意到了，当当顶部图片片应用到网网页中的时时候，其上上边缘和浏浏览器边界界之间有一一定的间隙隙，所以在在这里我们们要用maarginn和paddding进进行完善：body baackgrroundd: #FF7F7FF6 urrl(immagess/bacckgroound.gif) reppeat-y 500% 0; bacckgroound-

31、attaachmeent: fixeed; mmargiin: 00; paaddinng: 00; 如果你对以以上涉及的的CSS还不不是很熟悉悉的话，这这个 HYPERLINK /css/css_intro.asp 入门教程程（英文的的，节哀.）建建议你去看看一下，相相信会有很很大的帮助助。CSS混沌沌初开VII：正文与与图片的混混排现在我们可可以开始在在网页中添添加内容了了，在后续续教程中将将会介绍友友情链接版版块以及页页脚的制作作。首先在CSSS中添加加一个idd选择符，在在其中定义义一个宽度度值5144px (692-178)：#conttent wiidth: 5144px; flo

32、aat: lleft; 因为导航菜菜单浮动在在页面主体体的左边，所所以我们要要在#leeft中添添加一条ffloatt: leeft语句句，#coontennt中的左左浮动是针针对其外围围容器的，解解析之后它它将显示在在导航右边边的正文版版块：#leftt wwidthh: 1778px; flooat: leftt; 接下来在XXHTMLL中添加如如下代码：thiis iss thee rigght如果你对上上面的CSSS和XHTMML组织感感到疑惑，下下面的教程程可能会对对你有所帮帮助： HYPERLINK .au/floatutorial/introduction.htm CSS中的的F

33、loaat属性入入门 HYPERLINK .au/floatutorial/ 浮动属性FFloatt的应用 你会发现正正文的内容容跟导航菜菜单贴得很很紧，我们们可以利用用paddding来来增加一点点间隙：#conttent wiidth: 4799px; floaat: lleft; padddingg-topp: 155px; paddding-righht: 00; paaddinng-boottomm: 100px; paddding-leftt: 200px; 也可以将代代码简化成成：/codde#cconteent widdth: 479ppx; ffloatt: leeft; p

34、addding: 15ppx 0 10pxx 20ppx; /ccode不论是paaddinng还是marrgin，若若其后跟着着四个数值值，对应的的边缘顺序序是上右下下左，即顺顺时针方向向。大家会会发现现在在#conntainner中定定义的宽度度由原来的的514变成成了4799，因为我我们为了让让正文文本本与左右边边框空出一一点距离，左左边缘用ppaddiing实现现，而右边边缘因为整整个DIVV是左浮动动的，所以以我们直接接将DIVV的宽度缩缩减15ppx，所以以widtth的值就就变成了5514-220-155=4799px。你可能会疑疑问：“为什么不不直接使用用widdth: 494

35、ppx 和和 paaddinng-riight: 15ppx呢？”刚开始的的时候我也也是这么做做的，出来来的效果在在Safaari, FireeFox 和Moziilla还还算正常，但但在IE中就不不行了，正正文版块跳跳到了导航航的下面，好好像右边没没有足够的的空间容纳纳下正文DDIV，具具体问题出出在哪里我我也说不清清楚，可能能也是IEE的一个Buug吧。添加正文的的文章标题题先来看一下下主内容版版块的结构构：我们把文章章的标题放放在H2标签中中：TThis is tthe ttitlee 针对文章标标题的CSSS定义如如下：#conttent h2 fonnt: nnormaal 188p

36、x GGeorggia, Timees Neew Rooman, Timmes, seriif; ccolorr: #8808666A; bbackggrounnd: ttransspareent uurl(iimagees/buullett_tittle.ggif) no-rrepeaat; wwidthh: 4554px; padddingg: 0 0 0 30pxx; maarginn: 0; 这里我们使使用#coontennt h22的选择符符组合，当当然也可以以直接对HH2标签进进行定义，但但是会对页页面中所有有的H2元素都都起作用。这个CSSS样式的的定义中，除除了常规的的字体集、

37、颜色、字字号之外，还还利用paaddinng属性在在标题文本本左边空出出30pxx的缩进，目目的是不要要遮盖背景景图片。背背景bacckgroound属属性中，除除了图片的的路径及其其平铺方式式，还定义义了其背景景色为透明明trannsparrent，使使整个标题题更好的与与其它元素素融合添加正文文文本下面一个cclasss类.texxt定义了了正文文字字的样式：.textt ffont: 11ppx/188px VVerdaana, Ariaal, HHelveeticaa, saans-sseriff; coolor: #5BB604CC; maarginn-botttom: 10ppx;

38、 与id不同同的是，cclasss类可以在在一张页面面中重复使使用，里面面的属性比比较简单，需需要补充一一下的是，11px/18px表示字体大小是11px，行高是18px。在XHTML中，我们添加一个段落标签P来放置文本，并应用.text样式：HHere comees thhe teext 在正文中添添加混排图图像下面是应用用在图像上上的样式：.imaggerigght flooat: righht; ppaddiing: 7px; bacckgroound-coloor: #fffffff; bordder: 1px soliid #bbac1aa3; 这里我们还还是使用cclasss类，因

39、为为以后可能能还会用到到它。flloat:righht让图片片在文本块块中居右，而而白色的背背景和四边边均为7ppx的paddding，使使得图片的的四周有了了类似7像素白边边的效果，目目的是让图图片内容与与边框保持持7px的间间距。而真真正的边框框由borrder定定义，1像素实线线。如果在在文本块中中有居左的的图片，我我们可以再再添加一个个名为.iimageeleftt的classs类，具具体的属性性设置只要要把flooat: righht改成flooat: leftt就可以了了。CSS混沌沌初开VIII：页脚脚的构建在开始第七七部分的教教程之前，我我要先纠正正一个小错错误。之前前在添加正

40、正文内容时时，我把它它放在了一一个DIVV容器中，事事实上如果果我们用段段落标签PP作容器可可以达到相相同的效果果，而且当当CSS关闭闭时也能正正常显示。用P标签来实实现的话，还还可以用mmargiin来控制制段落的上上、下边距距，也就不不需要什么么换行标签签了。首先要提醒醒大家的是是，相对于于表格布局局方式，CCSS中页页脚的实现现有着很大大的区别。遗憾的是是Safaari作为为一个新生生浏览器，其其对Webb标准的支支持还不是是很完善，比比如minn-widdth和min-heigght属性性在Saffari中中还没能得得到良好的的支持，但但是页脚的的实现我们们往往需要要用到它们们。在继续

41、续本节教程程之前，希希望大家去去了解一下下这篇Boobby Van Der Sluiis文章，它它对CSSS中的垂直直定位和页页脚实现作作了很到位位的讲解。首先还是要要先明确一一下文档的的DIV结构构，之前制制作的内容容比如顶部部、导航、正文等我我们都封装装到一个iid名为conntainner的DIV中，这这组容器标标签紧跟在在bodyy标签之后后，接着就就是一个iid名为foooter的的页脚容器器，代码如如下： . . . 页脚DIVV的CSS设置置如下：#footter marrgin: 0pxx autto; pposittion: rellativve; bbackggrounnd

42、-coolor: #7117F511; boorderr-topp: 9ppx soolid #F7FF7F6; widdth: 692ppx; ppaddiing: 5px 0; cclearr: booth; 我们为页脚脚设置暗绿绿色的背景景以及9ppx的上边边框，宽度度定义为6692pxx。Cleaar属性用用于清除浮浮动，简单单点说就是是在其左边边或右边不不允许有任任何浮动元元素。maarginn: 0ppx auuto的语语法在之前前的教程中中已经出现现过了，其其作用就是是让页脚在在页面中居居中显示。为了不让让页脚文字字和边框贴贴得太近，我我们用paaddinng在上、下空出55px

43、的填填充空间。接下来为页页脚中的文文字和链接接定义样式式：#footter hh2 mariing: 0; ttext-aliggn: ccenteer; ffont: norrmal 10pxx Verrdanaa, Arrial, Hellvetiica, sanss-serrif; coloor: #D3D88C4; #foooterr h2 a:viisiteed, #footter hh2 a:linkk ccolorr: #DD3D8CC4; ttext-decooratiion: nonee; boorderr-botttom: 1pxx dottted #D3DD8C4; #f

44、oooterr h2 a:hoover coolor: #F77F7F66; teext-ddecorratioon: nnone; borrder-botttom: nonee; baackgrroundd-collor: #A50003B; 页脚中的文文字我们放放置到H22标签中：. 上面这行代代码我们添添加在名为为conttaineer的DIV闭合合标签后面面，也即是是在boddy的闭合合标签之前前。接下来来我们要添添加一段BBobbyy Vann Derr Sluuis建议议采用的JJS脚本，让让页脚在SSafarri浏览器器中也能固固定在浏览览器底部。确保你使用用的ID名跟在在JS中

45、定义义的函数名名保持一致致。完成JS的的添加后，如如果你在浏浏览器中预预览，你会会发现页脚脚并没有显显示出来。这可能是是因为有两两个浮动容容器(#lleft and #conntentt)都需要要进行浮动动清除，在在的文章中中有很详细细的介绍。我们需要要添加下面面的代码进进行修正，首首先添加一一个用于清清除浮动的的DIV： 然后为其定定义CSSS：.cleaar cleaar: bboth; CSS混沌沌初开VIIII：侧侧边栏友情情链接这是本教程程的最后一一部分，讲讲解如何实实现友情链链接版块。需要说明明的是，这这部分我们们将把样式式表转换为为外联式来来实现CSSS样式的的设定。首先是XHH

46、TML代代码： MMy Faavoriite SSitess Stoopdessign SiimpleeBitss MMezzoobluee XXimiccc 我们把所有有的链接放放置在一个个名为faav的DIV容器器中，并将将在CSSS中定义其其widtth、marggin和paddding等等属性。栏栏目标题利利用H2标签实实现，而链链接链表则则还是用无无序列表uul来实现现。接下来定义义favllinkss容器的样样式：#favllinkss wwidthh: 1663px; padddingg-lefft: 115px; marrgin-top: 10ppx; 其中定义的的三个属性性都

47、比较简简单，你可可能会注意意到widdth值与与导航菜单单的宽度1178不相相等，原因因仍然是ppaddiing-lleft中中定义了115px的的内填充，所所以其宽度度值应该是是178-15=1163pxx。如果你你对此不是是很理解，建建议你去参参考一些介介绍CSSS中盒模型型原理的文文章。下面是栏目目标题文字字的CSSS定义：#favllinkss h2 foont: normmal 116px Georrgia, Timmes NNew RRomann, Tiimes, serrif; coloor: #5C6004D; marggin: 0 0 10pxx 0; paddding: 0; 除了设置文文字的字体体和颜色之之外，paaddinng和marggin的定定义也是必必须的，因因为如果不不明确指定定的话，栏栏目标题和和链接列表表之间的间间隔可能会会不可预期期，在这里里我直接用用