2023年-DREAMWEAVER网页制作和css实例

CSS混沌初开I：导航菜单素材的设计

现在开始我们将学习如何一步一步的构建一张CSS页面。本教程分成以卜几个部分：第一

讲主要是关于如何在PS中制作导航按钮素材；第二部分主要针对的内容是背景，接着是页

面的整体布局以及顶部解析♦，最后一部分是如何整合CSS和XHTML。

有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而

注重素材制作中的•些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言.

首先看一下完成的效果：

aHome

位Ajoutne曲

«Contactme

玻璃质感导航图片的制作：

首先我们在Photoshop中建立一个178x22像素的RGB空白叉档，添加一个新图层命名为

“按钮”，并用灰色#ECECEC进行填充。再新建一个图层命名为“高光”，在其上、左边缘各

绘制1px的白色线条，你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘

白线的底部擦除一段，在这里我使用的是大小20px透明度为50%的橡皮刷：

新建一个名为“网点”的图层，用1px的铅笔工具在适当的位置绘制几个小点，示例中的颜色

是#727272,当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来

精致有序：

《放大视图，用铅笔工具添加网点

接着我们可以通过钢笔工具绘制路径创建选区，并在选区内填充#€16d6d6颜色，来模拟玻

璃的质感效果。整个图片素材。勺制作过程虽然不是很复杂，但是最终效果看起来也不是很差,

不是么？

鼠标经过导航时的翻转图片：

创建翻转效果图片，我们只要简单的在原有素材基础上调整色调就即可，关于文本的添加在

这里就不细说了。我们可以为每个图层调整色调，在示例中我主要使用了一下几种颜色：背

景#BFE3FF、玻璃质感#庆5口正3、网点#E4001B。这部分教程涉及至U一些Photoshop的基

本知识，如果你不是很了解，建议先学习一些PS的入门基础，毕竟Adobe合并了*之后，

其旗卜软件尤其是PS与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美

观的网页，都离不开这些软件的帮助。当然颜色选择要视乎你的需要，制作的方法大致还是

相通的，你也可以发挥创意进行更好的细节设计：

CSS混沌初开II:背景图案及配色

本教程的第二部分主要有两个重点：一是如何正确选择导航菜恿中所涉及的颜色，虽然它没

有很多的技术含量，但使用的颜色是否恰当，与后期出来的效果是有很大影响的；另外一部

分主要是关于页面背景的，侧重于制作背景图片素材时的一些细节问题。

在第一讲中，我主要是介绍一种实现玻璃材质按钮的快捷途径，现在来讲颜色的选择似乎有

点滞后了。不过鉴于网站的风格存在差异，素材色系的选择也是界面设计阶段很重要的一块

内容，网络上也有很多关于网页色彩的文章，大家可以依据其中介绍的一些基本知识进行参

考，虽然良好的色彩感觉需要很长一段时间来培养。

选择你的色彩体系

事实上色系的选择会体现很多个人因素，毕竟每个人都会有各自的色彩偏好、你的选择也会

彰显你的个人风格。没人能建议你“必须选择什么颜色”，这里我也只能提供一些个人认为比

较实用的意见：

HeHe

1.使用至少一种高饱和度、高辨识度的色彩，并以其色调定义站点的整体基调。把这个色彩运

用在文本链接上，能使其更加显眼、引人关注：

2.谨记不耍在一张页面中使用过多的颜色，这样只会让你的网页看起来很花哨繁杂。我的建议

是最好保持在三种之内：一个强调色和两个辅色；

在颜色的搭配上，不论是主色还是辅助色，都要善于通过它们明度变化来衍生更多的色彩,

如果只是反复的使用三种以下的颜色未免会让人感觉单调，当然这也不是意味着颜色变化越

多你的页面看起来就会越出色，仍然要视乎网站的整体风格和女计者对颜色的驾驭能力：

ch。”-yeufcolwh—

在PS中我们可以通过在色相，饱和度（Ctrl+U）面板中调整参数来调配颜色。事实上图中的

几组颜色就是通过这种方法调制出来的，当然在这个面板中可以变化出很多颜色，具体哪个

参数应该为什么值都没有硬性的规定，网络上有很多推荐的色彩组合并明确给出了RGB值,

大家在利用这种方法配色的时候也可以参考那些文章教程。

如果你看了上面的讲解之后仍然不知道如何着手，这段关于颜色的影片或许会对你有所帮

助。事实上我觉得每个人都应该去看一下这个影片，不仅因为它本身设计得相当有趣，更

重要的是对于认识和了解大众化的色彩体验和感知从而运用到网页设计中，它都是一个很

好的引导和巩固。

是时候开始绘制背景图案了

现在我们开始讨论网页的背景图案。当我们在PS等软件中创作背景图案时，往往要精细到

像素，尤其是那些平铺填充的背景。首先我们在PS中新建一个30x像素的空白文档，填充

适当的颜色，并用铅笔工具在其上绘制一些单像素小点，下面是一些例子：

如第一讲中导航按钮上的小点一样.在这里你也可以尽量的发挥自己的创意,但是还是有几

个需要注意的地方，比如小点的颜色，不能跟背景色反差太大，不然平铺以后它们会变得很

刺眼。如果要利用小点来组合出一些图案或线条，我通常会采用复制图层并通过方向键调整

其位置的方法，适当的时候还会变化其图层模式或透明度等。

些细节，让它看起来更加的美观、精致。

顶部图片的视觉处理

在教程的前两部分中，提到过导航按钮的颜色选择，现在我们来看一下如何处理一张花卉图

像的色调，使其与页面的风格达到统%在用到的花卉图像素材中，大家可以发现它上面也

有红和绿两种色调，我要做的事情就是把其中的颜色调制成粉红和暗绿，就好似导航菜单中

使用的色调i样：

首先来看••下图片中花朵的颜色，它的色调偏向于大红，还是慎用PS中的色相/饱和度命

令来对它进行调整。利用快捷键按Ctrl+U调出色相/饱和度面板，在“编辑”项的下拉列表中

选择“红色（Ctrl+1）”，这样我们就能只针时图像中的红色进行调整了。拖动色相滑块调制

出我们需要的红色，具体的数值依据实际情况，比如我这里是大致是・30左右：

卜一步就是通过修饰细节增加一些辅助色调来增进视觉效果，为接卜来的灌镜处理作一些预

处理。顶部图片的处理对创意有一定的要求，如果有相关的经验的话也就不是件难事，所以

素材处理能力以及个人的美工基础都会对设计过程、设计结果产生影响：

在之前的步骤中图片的尺寸和体积无疑已经进行了调整，但是如果有比较多的细节要处理的

话，建议还是在原始尺寸上操作，像示例中的图片我刚开始也是在16001200的原始大小

下进行处理的。我为图像添加了个人比较偏爱的绘画涂抹滤镜（滤镜菜单一艺术效果），效

果如下图。在PS中，漉镜的运用是很有趣的一件事情，调节其中的参数就可以达到很多意

想不到的效果，加之在CS版本中提供/可用滤镜效果的缩略图预览，让这个实用的工具用

起来更加方便：

接着我们添加一些波浪线条来营造虚幻的意境，可以用笔刷或者钢笔绘制一些曲线，当然也

可以用渐变工具制作，只要达到下图中渐隐效果即可。事实上我们只需要做出其中一条就可

以了，然后复制图层调整其透明度、角度、扭曲制作出其它的线条。这里使用的颜色还是推

荐使用粉红，为了区别于花朵的颜色，可以把线条的粉红明度调大一点。在图片的右边，我

利用Tamuz字体添加了一个修饰符号，效果如下：

如果对以上操作有疑问，可以下载QuickTime演示影片观看！

在图片上添加BLOG标题

Blog的标题反映了你网站的内容主题，其文字组织因人而异，一般还会加上一个图标或

LOGO,毕竟每个人都想自己的Blog与众不同，有•些标志性的元素，在这里我就简单的

选用一个仙人掌标志：

下面是•些关于字体或修饰符号的资源链接：

Minion修饰符和Tamuz字体

Adobe提供的修饰性字体

一系列免费的Dingbats字体

最终的界面设计效果

至今为止，不论是在导航按钮还是顶部图片的制作，我们都还没有遇到什么棘手的难题。现

在让我们把做出来的素材整合在一起，拼合成一张最终的界面效果。这已经是界面设计的

最后一个阶段了，所有若还有什么可添加的修饰元素，最好都在界而效果图中体现出来。在

我的示例页面中，文章标题和友情链接的前面我都用精致的图标进行修饰，效果看起来还可

以.当然你们可以选择自己喜欢的素材替换.最好也能在设计过程中体会到乐趣！

CSS混沌初开V：侧边栏导航菜单的实现

首先对教程的第四部分作一点补充。有人建议Blog的标题最好使用H1标签，以文本的形

式表现标题内容，原因是不论是在CSS关闭的情况下，还是对于搜索引擎的抓取，H1标

签结合文木的形式都具有更好的可访问性。这个提议很有道理，很多人也是这么做的，所以

我也建议大家对之前的代码进行调整。

若使用H1标签来实现Blog标题，又想保持原来标题位置的图片的话，那么就有必要了解

一下CSS中很经典的图像替换文本技术。简单点说就是在XHTML中包含了文本，并为其

设置背景图片，但是要通过CSS“隐阈'文本而仅仅显示背景图片。

图像替换文本技术

这个技术有时候我们也称之为文本替换或图像替换，其强调的咳心是在HTML代码中我们

使用文本，然后通过一些方法将文本“隐藏”，而仅显示背景或其它形式的图片，这样在保证

可访问性的同时，也使得页面因图像的应用而更加美观。比如我们可以将图片设置为背景，

让后利用text-indent使文本有足够的缩进实现隐藏，代码如下：

h1(

width:692px;

height:90px;

text-indent:-9999px;

background:url(images/header.jpg);

margin:0;

padding:0;

)

其中的width和height是必须定义的，且需和背景图片的尺寸保持一致。text-align:center

被转移到了body标签中，这样页面中所有的内容都被定义为居中显示，而那些不需要居中

的内容，如文章正文，我们可以再添加text-align:left进行覆盖。当然对于外围容器而言，

我们利用margin:Opxauto使其在水平方向上保持在页面的中部。

导航菜单的实现

首先定义导航外围容器的样式：

#left{

width:178px;

)

现在外围容器我们只要简单的定义其宽度,并赋予left的id名.在left容器中，我们添加一

个名为navcontainer的子容器来放置导航菜单。实现导航的标签推荐使用无序列表ul,通

过CSS我们可以改变其外观和形式。HTML结构如下：

<divid="navcontainer">

<ul>

<li><ahref="#">Home</ax/li>

<li><ahref="#">Aboutme</a></li>

<li><ahref="#">ximicc</a></li>

<li><ahref="#">Articles</a></li>

<li><ahref="#">Photoroll</a></li>

</ul>

</div>

ul和li标签构建了一个简单的项目列表，其项目符号默认为小圆点，这是我们不需要的。利

用CSS可以去掉那些小圆点，并用背景图片的形式替换以我们制作好的图标：

<-多余的小周点

#navcontainer{

width:178px;

)

#navcontainerul{

margin:0;

padding:0;

list-style-type:none;

font:bold12px/22pxVerdana,Arial,Helvetica,sans-serif;

text-indent:20px;

letterspacing:1px;

border-bottom:1pxsolid#fff;

)

第一段代码还是定义导航容器的宽度，其值与left容器相同。第二段代码主要用于改变列表

的外观，margin和padding确保导航项目的周围没有•空隙，并去除了列表项默认的缩进，

list-style-type则定义了列表的项目符号为无。text-indent使文本左边空出一定的空间，以便

在之后的步骤中定义背景图片，并保证背景图不会被文本遮盖。最后一行代码在每个导航项

目的底部生成一条白线，兼具美化和分界的功能。

接下来是链接外观的定义：

#navcontainera{

display:block;

width:178px;

height:22px;

>

以上代码是对导航内a标签的CSS定义，作用于导航中的每个链接元素。display:block将

链接对象转换为块级元素，然后再定义其宽和高，使得链接能具有类似按钮一样矩形的触发

区域，并且让我们可以利用伪类a:hover来定义鼠标经过链接时的翻转效果，如在第二段代

码中展示的简单的改变背景色或背景图片：

i乐Articles

…痘眩隹催接触妥反域

#navcontainera:link,#navcontainera:visited{

background:url(images/bg_navbutton.gif);

color:#5C604D;

text-decoration:none;

)

#navcontainera:hover{

background:url(images/bg_navbutton_over.gif);

color:#A5003B;

text-decoration:none;

}

第一段代码定义了链接文本的颜色，并设置text-decoration属性为none来去除链接默认的

下划线。导航的设计往往要求简洁、明了，并且具有很强的指示性，所以我在这里定义了一

个额外的样式#current来表现当前页面处丁•导航中的哪个项目：

#navcontainerlia#current{

background:url(images/bg_navbutton_over.gif);

color:#A5003B;

text-decoration:none;

)

名为current的样式针对的是列表项目li中的链接元素，其属性的定义与链接的hover状态

样式是一样的，现在我们要做的事情就是把这个样式应用到HTML中：

<divid="navcontainer">

<ul>

<li><ahref="#"id=',current">Home</a></li>

<li><ahref="#">Aboutme</a></li>

<li><ahref="#">Contactme</a></li>

<li><ahref="#">Articles</a></li>

<lixahref="#">Photoroll</a></li>

</ul>

</div>

现在的current样式是应用在第一个li上，也就是浏览器解析后“Home”菜单较之其它的菜单

项目有其独特的外观，表明当前的页面是属于“Home”这里栏目的。当然页面变化了，current

样式应用的li对象也就不•样了。

aHome

Aboutme

Contactme

：.Articles

♦Photoroll

CSS混沌初开IV：页面DIV布局解构

在前三讲的教程中我们已经完成了网页界面设计的工作，从木节开始，我们将关注如何对效

果图进行解构，并初步拟定网页文件的DIV结构。

首先我们必须明确几个问题，比如设计好的界面应该划分成几块？每块对应网页中的哪部分

内容？只有对这些问题有了概念之后，我们才能开始进行切片和导出的操作。如果对页面构

建的整个流程很熟悉，那么以上几个问题并没有太大的难度，可能你在PS中设计素材的时

候就已经开始考虑之后的DIV划分了。当然，我们是要有一定的应变能力，合理的组织CSS

和XHTML,让最终出炉的网页具有更好的灵活性和可访问性。

本例中页面模块划分的规划

1.页面顶部(theheader)；

2.左侧边栏(theleft)：

3.主体内容(thecontent)：

4.页脚(thefooter)；

必须进行切片并导出JPF或GIF的几块区域

1.顶部图片(header)；

2.默认导航图片(bg_navbutton)

3.翻转导航图片(bg_navbutton_over)

4.友情链接图标(bullet_extlink)

5.文章标题图标(bullettitle)

Thisisthetite

rvjrtMKinp

FavontcWe

jMez/oeAie

"ZMm>n

Kxxrke

WhMjpoJJtfWyP

西索cc

amWE<

也许你会想：“那背景图片呢?”我没有把它罗列在其中，因为背景图片比较特殊，不论在何

种分辨率下我们都要保持主体内容的居中，所以我们需要一种更聪明的方法。这是我们要导

出的背景图片，它的尺寸是1600X5px,应该够用了，除非你拥有Apple公司30英寸的超

宽屏显示器。

利用CSS定义页面的背景

下面的CSS代码可以让我们的页面背景保持居中显示：

body{

background:#F7F7F6url(images/background.gif)repeat-y50%0:

background-attachment:fixed;

背景图片只有5px高度，所以我们将其设置为纵向平铺，然后利用参数50%使其水平居中，

参数fixed的用处是让背景不随内容的滚动而滚动，它是“凝固”的。这里的选择符我们使用

body,因为背景效果是针对整张页面而言的。

构建页面的DIV结构

首先来看一下顶部版块的CSS定义:

#header{

text-align:center;

)

顶部版块的样式我们使用id选择符，注意在同一个文档中id选择符必须是唯一的。网页的

顶部也需要居中，这也是我们为引么定义texl-aliyn的原仄1。下而这段代码我们要添加在

body标签之间：

<divid="header">

<imgsrc="images/header.jpg"alt="ximicc"width="692"height="90"/>

</div>

你可能也注意到了，当顶部图片应用到网页中的时候，其上边缘和浏览器边界之间有一定的

间隙，所以在这里我们要用margin和padding进行完善：

body{

background:#F7F7F6url(images/background.gif)repeat-y50%0;

background-attachment:fixed;

margin:0;

padding:0;

)

如果你对以上涉及的CSS还不是很熟悉的话，这个入门教程(英文的，节哀…)建议你去

看一下，相信会有很大的帮助。

CSS混沌初开VI：正文与图片的混排

现在我们可以开始在网页中添加内容了，在后续教程中将会介绍友情链接版块以及页脚的制

作。

首先在CSS中添加一个id选择符，在其中定义一个宽度值514px(692-178)：

#content{

width:514px;

float:left;

)

因为导航菜单浮动在页面主体的左边，所以我们要在#left中添加一条float:left语句，

^content中的左浮动是针对具外围容器的，解析之后它将显示化导航右边的正文版块：

#left{

width:178px;

float:left;

)

接下来在XHTML中添加如下代码：

<divid="content">thisistheright</div>

如果你对上面的CSS和XHTML组织感到疑惑，下面的教程可能会对你有所帮助：

CSS中的Float属性入门

浮动属性Float的应用

你会发现正文的内容跟导航菜单贴得很紧，我们可以利用padding来增加一点间隙：

#content{

width:479px;

float:left;

padding-top:15px;

padding-right:0;

padding-bottom:10px;

padding-left:20px;

)

也可以将代码简化成：

[/code]#content{

width:479px;

float:left;

padding:15px010px20px;

}

[/code]

不论是padding还是margin,若其后跟着四个数值，对应的边缘顺序是上右下左，即顺时

针方向。大家会发现现在/container中定义的宽度由原来的514变成了479,因为我们为了

让正文文本与左右边框空出一点距离，左边缘用padding实现，而右边缘因为整个DIV是

左浮动的，所以我们直接将DIV的宽度缩减15px,所以width的值就变成了

514-20-15=479pXo

你可能会疑问：“为什么不直接使用"width:494px"和"padding-right:15px”呢？”刚开始的

时候我也是这么做的，出来的效果在Safari,FireFox和Mozilla还算正常，但在IE中就不

行了，正文版块跳到了导航的下面，好像右边没有足够的空间容纳下正文DIV,具体问题出

在哪里我也说不清楚，可能也是IE的一个Bug吧。

添加正文的文章标题

先来看一下主内容版块的结构:

我们把文章的标题放在H2标签中：

<h2>Thisisthetitle</h2>

针对文章标题的CSS定义如下：

#contenth2{

font:normal18pxGeorgia,TimesNewRoman,Times,serif;

color:#80866A;

background:transparenturl(images/bullettitle.gif)no-repeat;

width:454px;

padding:00030px;

margin:0;

}

这里我们使用#contenth2的选择符组合，当然也可以直接对H2标签进行定义，但是会对

页面中所有的H2元素都起作用。这个CSS样式的定义中，除了常规的字体集、颜色、字

号之外，还利用padding属性在标题文本左边空出30px的缩进，目的是不要遮盖背景图片。

背景background属性中，除了图片的路径及其平铺方式，还定义了其背景色为透明

transparent,使整个标题更好的与其它元素融合

添加正文文本

下面一个class类.text定义了正文文字的样式:

.text{

font:11px/18pxVerdana,Arial,Helvetica,sans-serif;

color:#5B604C;

margin-bottom:10px;

)

与id不同的是，class类可以在一张页面中重复使用，里面的属性比较简单，需要补充一下

的是，11px/18Px表示字体大小是11px,行高是18px,在XHTML中，我们添加一个段落

标签P来放置文本，并应用.text样式：

<pclass="text">Herecomesthetext</p>

在正文中添加混排图像

下面是应用在图像上的样式：

.imageright{

float:right;

padding:7px;

background-color:

border:1pxsolid#bac1a3;

)

这里我们还是使用class类,因为以后可能还会用到它。float:right让图片在文本块中居右，

而白色的背景和四边均为7Px的padding,使得图片的四周有了类似7像素白边的效果，目

的是让图片内容与边框保持7Px的间距。而真正的边框由borcer定义，1像素实线.如果

在文本块中有居左的图片，我们可以再添加一个名为.imagelefl的class类，具体的属性设

置只要把float:right改成float:left就可以了。

CSS混沌初开VII：页脚的构建

在开始第七部分的教程之前，我要先纠正一个小错误。之前在添加正文内容时，我把它放在

了一个DIV容器中，事实上如果我们用段落标签P作容器可以达到相同的效果，而且当CSS

关闭时也能正常显示。用P标签来实现的话，还可以用margin来控制段落的上、下边距，

也就不需要什么换行标签了。

首先要提醒大家的是，相对于表格布局方式，CSS中页脚的实现有着很大的区别。遗憾的

是Safari作为一个新生浏览器，其对Web标准的支持还不是很完善，比如min-width和

min-height属性在Safari中还没能得到良好的支持,但是页脚的实现我们往往需要用到它们。

在继续本节教程之前，希望大家去了解一下这篇BobbyVanDarSluis文章，它对CSS中

的垂直定位和页脚实现作了很到位的讲解。

首先还是要先明确•下文档的DIV结构，之前制作的内容比如顶部、导航、正文等我们都

封装到一个id名为container的DIV中，这组容器标签紧跟在body标签之后，接着就是一

个id名为footer的页脚容器，代码如下:

<html>

<body>

<divid="container">...</div>

<divid="footer">...</div>

</body>

</html>

页脚DIV的CSS设置如下：

#footer{

margin:Opxauto;

position:relative;

background-color:#717F51;

border-top:9pxsolid#F7F7F6;

width:692px;

padding:5px0;

clear:both;

)

我们为页脚设置暗绿色的背景以及9Px的上边框，宽度定义为692px。Clear属性用于清除

浮动，简单点说就是在其左边或右边不允许有任何浮动元素。margin:Opxauto的语法在之

前的教程中己经出现过了，其作用就是让页脚在页面中居中显示。为了不让页脚文字和边框

贴得太近,我们用padding在上、卜.空出5Px的填充空间。

接卜来为页脚中的文字和链接定义样式：

#footerh2{

maring:0;

text-align:center;

font:normal10pxVerdana,Arial,Helvetica,sans-serif;

color:#D3D8C4;

#footerh2a:visited,#footerh2a:link{

color:#D3D8C4;

text-decoration:none;

border-bottom:1pxdotted#D3D8C4;

)

#footerh2a:hover{

color:#F7F7F6;

text-decoration:none;

border-bottom:none;

background-color:#A5003B;

)

页脚中的文字我们放置到H2标签中：

<divid="footcr"xh2>....</h2x/div>

上而这行代码我们添加在名为container的DIV闭合标签后面，也即是在body的闭合标签

之前。接下来我们要添加一段BobbyVanDerSluis建议采用的JS脚本，让页脚在Safari

浏览器中也能固定在浏览器底部。

确保你使用的ID名跟在JS中定义的函数名保持一致。

完成JS的添加后，如果你在浏览器中预览，你会发现页脚并没有显示出来。这可能是因为

有两个浮动容器and#ccntent)都需要进行浮动清除，在的义章中有很详细的介绍。我

们需要添加下面的代码进行修正，首先添加一个用于清除浮动的DIV：

<divclass="clear"></div>

然后为其定义CSS：

.clear{

clear:both;

)

CSS混沌初开VIII：侧边栏友情链接

这是本教程的最后一-部分，讲解如何实现友情链接版块。需要说明的是，这部分我们将把样

式表转换为外联式来实现CSS样式的设定。

首先是XHTML代码：

<divid="favlinks">

<h2>MyFavoriteSites</h2>

<ulclass="extlinks”>

<li><ahref="/,'>Stopdesign</a></li>

<li><ahref="/">SimpleBits</a><J1i>

<li><ahref="/">Mezzoblue</a></li>

<li><ahref="/">Ximicc</a></li>

</ul>

</div>

我们把所有的链接放置在一个名为fav的DIV容器中，并将在CSS中定义其width、margin

和padding等属性。栏目标题利用H2标签实现，而链接链表则还是用无序列表ul来实现。

接下来定义favlinks容器的样式：

#favlinks{

width:163px;

padding-left:15px;

margin-top:10px;

)

其中定义的三个属性都比较简单，你可能会注意到width值与导航菜单的宽度178不相等,

原因仍然是padding-left中定义了15Px的内填充，所以其宽度值应该是178-15=163px0

如果你对此不是很理解，建议你去参考一些介绍CSS中盒模型原理的文章。

下面是栏目标题文字的CSS定义：

#favlinksh2{

font:normal16pxGeorgia,TimesNewRoman,Times,serif;

color:#5C604D;

margin:0010px0;

padding:0;

)

除了设置文字的字体和颜色之外，padd