颜色搭配和布局.docx

绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。 绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。 绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春活力，绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息，有缓解眼部疲劳的作用。 它本身具有一定的与自然、健康相关的感觉，所以也经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。 绿色能使我们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、升级的心理感受。 从上图的主色调、辅色调HSB模式的数值可看出，这两中颜色只是在明度上有区别，其显示的色相与饱和度是一样的。正绿色是120度，这两种颜色从RGB数值上看，都不同程度的混合了其他少许颜色，因此离正绿色稍有些偏差。由于绿色本身的特性，所以整个网页看起来很安稳舒适。辅助色只在明度上降低，让页面多了些层次感、空间感。白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感。点睛色恰到好处的体现出了”点睛”这一妙笔，极尽诱惑力，整个页面顿时生动提神起来，增强了页面主题的表达力。 结论： 主、辅色调是属于同类色绿色系，通过不同明度的变化，能较递增缓和变化同时却也较明显的体现出页面的色彩层次感来。如果不是通过数值来分析判断，可能会有些朋友凭经验判断，容易误认为这两种颜色除了明度外有可能纯度会有所不同，这时候适当的使用数值模式会很容易得到正确的结论的。 整个页面配色很少：最大色块的翠绿，第二面积的白色，第三面积的深绿色，但得到的效果却是强烈的、显眼的，达到充分展现产品主题的目的。 深绿色给人茂盛、健康、成熟、稳重、生命、开阔的心理感受。绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。 绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春绿色系分析： (高纯度配色：绿色 对比色组合) HSB数值H显示60度为正黄色，该主、辅色调只向绿色倾斜了一丁点H为75度。大面积明度稍低的黄绿色为主要色调，饱和度却非常高，达到了100%，辅助色使用了提高明度的嫩绿色和白色，这两种辅色除了增加页面的层次感的同时，还能让整个页面配色有透亮的感觉，增强了绿色的特性。背景深褐色无疑把前景的所有纯色烘托得都耀眼于舞台上。 该页面有两组小小的对比色，一组是黄绿与橙红色，一组是橙黄色与天蓝色，这两组配色严格的来说不算对比色，因为色彩多少有些偏差。虽然它们的饱和度降低，但在这个页面中足以构成了最响亮的色调，把整个页面烘托得非常活跃、鲜明。 结论： 主、辅色调黄绿色大面积使用并不刺目，反而使得页面看起来很有朝气、活力。 适当运用不同纯度的不是相当严格意义上的对比色系组合时，通常能起到的主要作用是主次关系明确。不”标准”的对比色系对比特性虽然减弱，页面色彩看起来容易协调、柔和，但一样能突出主题。 同类色浅绿色系分析：(同类色浅绿色) 主色调绿色属性是明度很高的浅绿色，前面提到过，通常情况下明度高饱和度就降低，饱和度低页面色彩度就降低，除非颜色本身有自己的特性，加上大面积的辅助色白色，整个页面看起来很清淡、柔和、宁静，甚至有温馨的感觉。 页面中使用了渐变的浅绿色，使得整个页面视觉上更加柔和舒适。 尽管点睛色只在主要标志上出现，按钮也只有少许一点，但也给整个页面的色彩带来些亮笔。尤其是红色的HSB模式的H数值显示颜色接近于正红色，饱和度达到最高值。另一个点睛色中黄色，在页面视觉上呈绿色与红色这一组对比色起到缓和视觉的作用。因为在色轮表上，黄色正是在绿色和红色之间的过渡色。 结论： 浅绿色系有优雅、休息、安全、和睦、宁静、柔和的感觉。 渐变的效果更能加深这种印象。但页面配色上浅色过多时，整个页面容易呈现发”灰”的感受，这就需要适量的添加纯度稍高的颜色例如左下角的辅助色绿色块，适当的鲜艳的点睛都能很好的解决这一问题。布局：症状描述：在ie下（6或7，8没有试过）当出现中英文混排，都采用默认字体时，并使用 li 列表做float时，会出现如上图的症状，文字排列上下不对齐的情况。影响了布局的美观性，造成上图情况的原因是中英文的文字基线不同，arial字体的下边缘要比宋体（同为12号）低一个象素，上边缘比宋体矮两个象素，而且英文还有i,y这种上下基线不同的情况。所以当中英文混排对齐时，就会出现明显的高度差异，使排版不均。可见放大图。 采用中英文字均使用宋体的方案 可以解决文字排列不对齐的情况，但宋体英文字是衬线字体（Times New Roman即是英文中的衬线字)，字型紧凑，细节较多，排列在一起很醒目，但在连续成文时，容易造成辨识困绕，看错行的情况。关于衬线字体的优缺点，请见这篇文章。相比之下，表示英文还是使用无衬线字体更美观大方。 解决方法一 “饺子”童鞋的 发现。 英文采用tahoma字体宋体，arial及 tahoma字体比较arial与tahoma的无衬线体比较精致 当中英文混排时，使用tahoma字体的情形 中英混排，纯中文组合的行高都一致了，但a在hover状态下下划线与中文粘联在一起。 缺陷：使用tahoma字体时，在ie6及ie6以下版本，会导致所有中文字体链接的下划线会出现与字体粘连现象。淘宝使用的也是这一解决方案。相信大型项目，不同的人来共同完成一个页面的模块时，在统一的规范下，使字体更规范，减少错位，而采用带有下划线会出现与字体粘连的tahoma字体，是值得的 以下是携同大米童鞋 发现的： 英文采用arial字体，中文使用宋体。可在标签内注明 line-height:1.231,可解决行高不等以及字体与下划线粘连问题。（不知道大范围中英文混排适不适用，有待后续校验。） CSS混沌初开I：导航菜单素材的设计 现在开始我们将学习如何一步一步的构建一张CSS页面。本教程分成以下几个部分：第一讲主要是关于如何在PS中制作导航按钮素材；第二部分主要针对的内容是背景，接着是页面的整体布局以及顶部解析，最后一部分是如何整合CSS和XHTML。 有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。首先看一下完成的效果： 玻璃质感导航图片的制作： 首先我们在Photoshop中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮”，并用灰色#ECECEC进行填充。再新建一个图层命名为“高光”，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里我使用的是大小20px透明度为50%的橡皮刷： 新建一个名为“网点”的图层，用1px的铅笔工具在适当的位置绘制几个小点，示例中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序： 接着我们可以通过钢笔工具绘制路径创建选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差，不是么？ 鼠标经过导航时的翻转图片： 创建翻转效果图片，我们只要简单的在原有素材基础上调整色调就即可，关于文本的添加在这里就不细说了。我们可以为每个图层调整色调，在示例中我主要使用了一下几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B。这部分教程涉及到一些Photoshop的基本知识，如果你不是很了解，建议先学习一些PS的入门基础，毕竟Adobe合并了Macromedia之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美观的网页，都离不开这些软件的帮助。当然颜色选择要视乎你的需要，制作的方法大致还是相通的，你也可以发挥创意进行更好的细节设计： CSS混沌初开II:背景图案及配色 本教程的第二部分主要有两个重点：一是如何正确选择导航菜单中所涉及的颜色，虽然它没有很多的技术含量，但使用的颜色是否恰当，与后期出来的效果是有很大影响的；另外一部分主要是关于页面背景的，侧重于制作背景图片素材时的一些细节问题。 在第一讲中，我主要是介绍一种实现玻璃材质按钮的快捷途径，现在来讲颜色的选择似乎有点滞后了。不过鉴于网站的风格存在差异，素材色系的选择也是界面设计阶段很重要的一块内容，网络上也有很多关于网页色彩的文章，大家可以依据其中介绍的一些基本知识进行参考，虽然良好的色彩感觉需要很长一段时间来培养。 选择你的色彩体系 事实上色系的选择会体现很多个人因素，毕竟每个人都会有各自的色彩偏好，你的选择也会彰显你的个人风格。没人能建议你“必须选择什么颜色”，这里我也只能提供一些个人认为比较实用的意见： 使用至少一种高饱和度、高辨识度的色彩，并以其色调定义站点的整体基调。把这个色彩运用在文本链接上，能使其更加显眼、引人关注； 谨记不要在一张页面中使用过多的颜色，这样只会让你的网页看起来很花哨繁杂。我的建议是最好保持在三种之内：一个强调色和两个辅色； 在颜色的搭配上，不论是主色还是辅助色，都要善于通过它们明度变化来衍生更多的色彩，如果只是反复的使用三种以下的颜色未免会让人感觉单调，当然这也不是意味着颜色变化越多你的页面看起来就会越出色，仍然要视乎网站的整体风格和设计者对颜色的驾驭能力： 在PS中我们可以通过在色相/饱和度（Ctrl U）面板中调整参数来调配颜色。事实上图中的几组颜色就是通过这种方法调制出来的，当然在这个面板中可以变化出很多颜色，具体哪个参数应该为什么值都没有硬性的规定，网络上有很多推荐的色彩组合并明确给出了RGB值，大家在利用这种方法配色的时候也可以参考那些文章教程。 如果你看了上面的讲解之后仍然不知道如何着手，这段关于颜色的影片 或许会对你有所帮助。事实上我觉得每个人都应该去看一下这个影片，不仅因为它本身设计得相当有趣，更重要的是对于认识和了解大众化的色彩体验和感知从而运用到网页设计中，它都是一个很好的引导和巩固。 是时候开始绘制背景图案了 现在我们开始讨论网页的背景图案。当我们在PS等软件中创作背景图案时，往往要精细到像素，尤其是那些平铺填充的背景。首先我们在PS中新建一个30x像素的空白文档，填充适当的颜色，并用铅笔工具在其上绘制一些单像素小点，下面是一些例子： 如第一讲中导航按钮上的小点一样，在这里你也可以尽量的发挥自己的创意，但是还是有几个需要注意的地方，比如小点的颜色，不能跟背景色反差太大，不然平铺以后它们会变得很刺眼。如果要利用小点来组合出一些图案或线条，我通常会采用复制图层并通过方向键调整其位置的方法，适当的时候还会变化其图层模式或透明度等。 制作这些背景图案的一个难点就是，如何保证图案平铺时能实现无缝接合，毕竟背景的面积往往比较大，它上面若有割裂就会很显眼。我通常采用的方法是利用PS中的矩形选框工具，比如下图中，正方形选区左上角标识出的像素必须与其它三个标识区一致，那么当我们把这样一块区域截取下来进行平铺的时候就不会有问题： 当然这个问题是否容易解决，也是视乎你最初设计的背景图案，如果我们动手的时候就把可能遇到的一些问题考虑在内，那么到解决的时候也不会太费力甚至返工了。CSS混沌初开III:顶部图片视觉修饰 这节是关于素材设计的最后一部分了，设计工作完成后将会开始讲解如何切片以及在CSS和XHTML中构建最终页面。首先看一下这节设计的效果图： 在制作按钮时，我用了粉红和暗绿两种色调，可能看起来有点怪，但个人很钟意这个组合。在设计网页整体界面的过程中，我会给出一些意见和建议，重点是顶部的图片，如何增加一些细节，让它看起来更加的美观、精致。 顶部图片的视觉处理 在教程的前两部分中，提到过导航按钮的颜色选择，现在我们来看一下如何处理一张花卉图像的色调，使其与页面的风格达到统一。在用到的花卉图像素材中，大家可以发现它上面也有红和绿两种色调，我要做的事情就是把其中的颜色调制成粉红和暗绿，就好似导航菜单中使用的色调一样： 首先来看一下图片中花朵的颜色，它的色调偏向于大红，还是使用PS中的色相/饱和度命令来对它进行调整。利用快捷键按Ctrl U调出色相/饱和度面板，在“编辑”项的下拉列表中选择“红色（Ctrl 1）”，这样我们就能只针对图像中的红色进行调整了。拖动色相滑块调制出我们需要的红色，具体的数值依据实际情况，比如我这里是大致是-30左右： 下一步就是通过修饰细节增加一些辅助色调来增进视觉效果，为接下来的滤镜处理作一些预处理。顶部图片的处理对创意有一定的要求，如果有相关的经验的话也就不是件难事，所以素材处理能力以及个人的美工基础都会对设计过程、设计结果产生影响： 在之前的步骤中图片的尺寸和体积无疑已经进行了调整，但是如果有比较多的细节要处理的话，建议还是在原始尺寸上操作，像示例中的图片我刚开始也是在1600 1200的原始大小下进行处理的。我为图像添加了个人比较偏爱的绘画涂抹滤镜（滤镜菜单艺术效果），效果如下图。在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: 0px auto使其在水平方向上保持在页面的中部。 导航菜单的实现 首先定义导航外围容器的样式： #left width: 178px; 现在外围容器我们只要简单的定义其宽度，并赋予left的id名。在left容器中，我们添加一个名为navcontainer的子容器来放置导航菜单。实现导航的标签推荐使用无序列表ul，通过CSS我们可以改变其外观和形式。HTML结构如下： Home About me ximicc Articles Photo roll ul和li标签构建了一个简单的项目列表，其项目符号默认为小圆点，这是我们不需要的。利用CSS可以去掉那些小圆点，并用背景图片的形式替换以我们制作好的图标： #navcontainer width: 178px; #navcontainer ul margin: 0; padding: 0; list-style-type: none; font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif; text-indent: 20px; letter-spacing: 1px; border-bottom: 1px solid #fff; 第一段代码还是定义导航容器的宽度，其值与left容器相同。第二段代码主要用于改变列表的外观，margin和padding确保导航项目的周围没有空隙，并去除了列表项默认的缩进，list-style-type则定义了列表的项目符号为无。text-indent使文本左边空出一定的空间，以便在之后的步骤中定义背景图片，并保证背景图不会被文本遮盖。最后一行代码在每个导航项目的底部生成一条白线，兼具美化和分界的功能。 接下来是链接外观的定义： #navcontainer a display: block; width: 178px; height: 22px; 以上代码是对导航内a标签的CSS定义，作用于导航中的每个链接元素。display: block将链接对象转换为块级元素，然后再定义其宽和高，使得链接能具有类似按钮一样矩形的触发区域，并且让我们可以利用伪类a:hover来定义鼠标经过链接时的翻转效果，如在第二段代码中展示的简单的改变背景色或背景图片： #navcontainer a:link, #navcontainer a:visited background: url(images/bg_navbutton.gif); color: #5C604D; text-decoration: none; #navcontainer a:hover background: url(images/bg_navbutton_over.gif); color: #A5003B; text-decoration: none; 第一段代码定义了链接文本的颜色，并设置text-decoration属性为none来去除链接默认的下划线。导航的设计往往要求简洁、明了，并且具有很强的指示性，所以我在这里定义了一个额外的样式#current来表现当前页面处于导航中的哪个项目： #navcontainer li a#current background: url(images/bg_navbutton_over.gif); color: #A5003B; text-decoration: none; 名为current的样式针对的是列表项目li中的链接元素，其属性的定义与链接的hover状态样式是一样的，现在我们要做的事情就是把这个样式应用到HTML中： Home About me Contact me Articles Photo roll 现在的current样式是应用在第一个li上，也就是浏览器解析后“Home”菜单较之其它的菜单项目有其独特的外观，表明当前的页面是属于“Home”这里栏目的。当然页面变化了，current样式应用的li对象也就不一样了。 CSS混沌初开IV：页面DIV布局解构 在前三讲的教程中我们已经完成了网页界面设计的工作，从本节开始，我们将关注如何对效果图进行解构，并初步拟定网页文件的DIV结构。 首先我们必须明确几个问题，比如设计好的界面应该划分成几块？每块对应网页中的哪部分内容？只有对这些问题有了概念之后，我们才能开始进行切片和导出的操作。如果对页面构建的整个流程很熟悉，那么以上几个问题并没有太大的难度，可能你在PS中设计素材的时候就已经开始考虑之后的DIV划分了。当然，我们是要有一定的应变能力，合理的组织CSS和XHTML，让最终出炉的网页具有更好的灵活性和可访问性。 本例中页面模块划分的规划 页面顶部（the header）； 左侧边栏（the left）； 主体内容（the content）； 页脚（the footer）； 必须进行切片并导出JPF或GIF的几块区域 顶部图片（header）； 默认导航图片（bg_navbutton） 翻转导航图片（bg_navbutton_over） 友情链接图标（bullet_extlink） 文章标题图标（bullet_title） 也许你会想：“那背景图片呢?”我没有把它罗列在其中，因为背景图片比较特殊，不论在何种分辨率下我们都要保持主体内容的居中，所以我们需要一种更聪明的方法。这是我们要导出的背景图片，它的尺寸是1600X5px，应该够用了，除非你拥有Apple公司30英寸的超宽屏显示器。 利用CSS定义页面的背景 下面的CSS代码可以让我们的页面背景保持居中显示： body background: #F7F7F6 url(images/background.gif) repeat-y 50% 0; background-attachment: fixed; 背景图片只有5px高度，所以我们将其设置为纵向平铺，然后利用参数50%使其水平居中，参数fixed的用处是让背景不随内容的滚动而滚动，它是“凝固”的。这里的选择符我们使用body，因为背景效果是针对整张页面而言的。 构建页面的DIV结构 首先来看一下顶部版块的CSS定义： #header text-align: center; 顶部版块的样式我们使用id选择符，注意在同一个文档中id选择符必须是唯一的。网页的顶部也需要居中，这也是我们为什么定义text-align的原因。下面这段代码我们要添加在body标签之间： 你可能也注意到了，当顶部图片应用到网页中的时候，其上边缘和浏览器边界之间有一定的间隙，所以在这里我们要用margin和padding进行完善： body background: #F7F7F6 url(images/background.gif) repeat-y 50% 0; background-attachment: fixed; margin: 0; padding: 0; CSS混沌初开VI：正文与图片的混排 现在我们可以开始在网页中添加内容了，在后续教程中将会介绍友情链接版块以及页脚的制作。 首先在CSS中添加一个id选择符，在其中定义一个宽度值514px (692-178)： #content width: 514px; float: left; 因为导航菜单浮动在页面主体的左边，所以我们要在#left中添加一条float: left语句，#content中的左浮动是针对其外围容器的，解析之后它将显示在导航右边的正文版块： #left width: 178px; float: left; 接下来在XHTML中添加如下代码： this is the right 如果你对上面的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: 15px 0 10px 20px; /code 不论是padding还是margin，若其后跟着四个数值，对应的边缘顺序是上右下左，即顺时针方向。大家会发现现在#container中定义的宽度由原来的514变成了479，因为我们为了让正文文本与左右边框空出一点距离，左边缘用padding实现，而右边缘因为整个DIV是左浮动的，所以我们直接将DIV的宽度缩减15px，所以width的值就变成了514-20-15=479px。 你可能会疑问：“为什么不直接使用width: 494px 和 padding-right: 15px呢？”刚开始的时候我也是这么做的，出来的效果在Safari, FireFox 和Mozilla还算正常，但在IE中就不行了，正文版块跳到了导航的下面，好像右边没有足够的空间容纳下正文DIV，具体问题出在哪里我也说不清楚，可能也是IE的一个Bug吧。 添加正文的文章标题 先来看一下主内容版块的结构： 我们把文章的标题放在H2标签中： This is the title 针对文章标题的CSS定义如下： #content h2 font: normal 18px Georgia, Times New Roman, Times, serif; color: #80866A; background: transparent url(images/bullet_title.gif) no-repeat; width: 454px; padding: 0 0 0 30px; margin: 0; 这里我们使用#content h2的选择符组合，当然也可以直接对H2标签进行定义，但是会对页面中所有的H2元素都起作用。这个CSS样式的定义中，除了常规的字体集、颜色、字号之外，还利用padding属性在标题文本左边空出30px的缩进，目的是不要遮盖背景图片。背景background属性中，除了图片的路径及其平铺方式，还定义了其背景色为透明transparent，使整个标题更好的与其它元素融合 添加正文文本 下面一个class类.text定义了正文文字的样式： .text font: 11px/18px Verdana, Arial, Helvetica, sans-serif; color: #5B604C; margin-bottom: 10px; 与id不同的是，class类可以在一张页面中重复使用，里面的属性比较简单，需要补充一下的是，11px/18px表示字体大小是11px，行高是18px。在XHTML中，我们添加一个段落标签P来放置文本，并应用.text样式： Here comes the text 在正文中添加混排图像 下面是应用在图像上的样式： .imageright float: right; padding: 7px; background-color: #ffffff; border: 1px solid #bac1a3; 这里我们还是使用class类，因为以后可能还会用到它。float:right让图片在文本块中居右，而白色的背景和四边均为7px的padding，使得图片的四周有了类似7像素白边的效果，目的是让图片内容与边框保持7px的间距。而真正的边框由border定义，1像素实线。如果在文本块中有居左的图片，我们可以再添加一个名为.imageleft的class类，具体的属性设置只要把float: right改成float: left就可以了。CSS混沌初开VII：页脚的构建 在开始第七部分的教程之前，我要先纠正一个小错误。之前在添加正文内容时，我把它放在了一个DIV容器中，事实上如果我们用段落标签P作容器可以达到相同的效果，而且当CSS关闭时也能正常显示。用P标签来实现的话，还可以用margin来控制段落的上、下边距，也就不需要什么换行标签了。 首先要提醒大家的是，相对于表格布局方式，CSS中页脚的实现有着很大的区别。遗憾的是Safari作为一个新生浏览器，其对Web标准的支持还不是很完善，比如min-width和min-height属性在Safari中还没能得到良好的支持，但是页脚的实现我们往往需要用到它们。在继续本节教程之前，希望大家去了解一下这篇Bobby Van Der Sluis文章，它对CSS中的垂直定位和页脚实现作了很到位的讲解。 首先还是要先明确一下文档的DIV结构，之前制作的内容比如顶部、导航、正文等我们都封装到一个id名为container的DIV中，这组容器标签紧跟在body标签之后，接着就是一个id名为footer的页脚容器，代码如下： . . . 页脚DIV的CSS设置如下： #footer margin: 0px auto; position: relative; background-color: #717F51; border-top: 9px solid #F7F7F6; width: 692px; padding: 5px 0; clear: both; 我们为页脚设置暗绿色的背景以及9px的上边框，宽度定义为692px。Clear属性用于清除浮动，简单点说就是在其左边或右边不允许有任何浮动元素。margin: 0px auto的语法在之前的教程中已经出现过了，其作用就是让页脚在页面中居中显示。为了不让页脚文字和边框贴得太近，我们用padding在上、下空出5px的填充空间。 接下来为页脚中的文字和链接定义样式： #footer h2 maring: 0; text-align: center; font: normal 10px Verdana, Arial, Helvetica, sans-serif; color: #D3D8C4; #footer h2 a:visited, #footer h2 a:link color: #D3D8C4; text-decoration: none; border-bottom: 1px dotted #D3D8C4; #footer h2 a:hover color: #F7F7F6; text-decoration: none; border-bottom: none; background-color: #A5003B; 页脚中的文字我们放置到H2标签中： . 上面这行代码我们添加在名为container的DIV闭合标签后面，也即是在body的闭合标签之前。接下来我们要添加一段Bobby Van Der Sluis建议采用的JS脚本，让页脚在Safari浏览器中也能固定在浏览器底部。 确保你使用的ID名跟在JS中定义的函数名保持一致。 完成JS的添加后，如果你在浏览器中预览，你会发现页脚并没有显示出来。这可能是因为有两个浮动容器(#left and #content)都需要进行浮动清除，在的文章中有很详细的介绍。我们需要添加下面的代码进行修正，首先添加一个用于清除浮动的DIV： 然后为其定义CSS： .clear clear: both; CSS混沌初开VIII：侧边栏友情链接 这是本教程的最后一部分，讲解如何实现友情链接版块。需要说明的是，这部分我们将把样式表转换为外联式来实现CSS样式的设定。 首先是XHTML代码： My Favorite Sites Stopdesign SimpleBits Mezzoblue Ximicc 我们把所有的链接放置在一个名为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=163px。如果你对此不是很理解，建议你去参考一些介绍CSS中盒模型原理的文章。 下