网站迁移教程,网页上传和网站开发,中山建公司网站,如何修改wordpress模板栏目的属性本教程最终效果如下#xff08;浏览示例页面#xff09;#xff1a;
本教程素材及页面源代码下载 教程的每个部分都有其侧重点#xff0c;其中前三节都是关于素材制作与设计的#xff0c;要求有一定的Photoshop操作基础#xff0c;我想这也是网页设计必备的基础技能之一…本教程最终效果如下浏览示例页面
本教程素材及页面源代码下载 教程的每个部分都有其侧重点其中前三节都是关于素材制作与设计的要求有一定的Photoshop操作基础我想这也是网页设计必备的基础技能之一。 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中我们可以通过在色相/饱和度CtrlU面板中调整参数来调配颜色。事实上图中的几组颜色就是通过这种方法调制出来的当然在这个面板中可以变化出很多颜色具体哪个参数应该为什么值都没有硬性的规定网络上有很多推荐的色彩组合并明确给出了RGB值大家在利用这种方法配色的时候也可以参考那些文章教程。
如果你看了上面的讲解之后仍然不知道如何着手这段关于颜色的影片 或许会对你有所帮助。事实上我觉得每个人都应该去看一下这个影片不仅因为它本身设计得相当有趣更重要的是对于认识和了解大众化的色彩体验和感知从而运用到网页设计中它都是一个很好的引导和巩固。
是时候开始绘制背景图案了
现在我们开始讨论网页的背景图案。当我们在PS等软件中创作背景图案时往往要精细到像素尤其是那些平铺填充的背景。首先我们在PS中新建一个30x像素的空白文档填充适当的颜色并用铅笔工具在其上绘制一些单像素小点下面是一些例子 如第一讲中导航按钮上的小点一样在这里你也可以尽量的发挥自己的创意但是还是有几个需要注意的地方比如小点的颜色不能跟背景色反差太大不然平铺以后它们会变得很刺眼。如果要利用小点来组合出一些图案或线条我通常会采用复制图层并通过方向键调整其位置的方法适当的时候还会变化其图层模式或透明度等。 制作这些背景图案的一个难点就是如何保证图案平铺时能实现无缝接合毕竟背景的面积往往比较大它上面若有割裂就会很显眼。我通常采用的方法是利用PS中的矩形选框工具比如下图中正方形选区左上角标识出的像素必须与其它三个标识区一致那么当我们把这样一块区域截取下来进行平铺的时候就不会有问题 当然这个问题是否容易解决也是视乎你最初设计的背景图案如果我们动手的时候就把可能遇到的一些问题考虑在内那么到解决的时候也不会太费力甚至返工了。 下载本例素材源文件 CSS混沌初开III:顶部图片视觉修饰 这节是关于素材设计的最后一部分了设计工作完成后将会开始讲解如何切片以及在CSS和XHTML中构建最终页面。首先看一下这节设计的效果图 在制作按钮时我用了粉红和暗绿两种色调可能看起来有点怪但个人很钟意这个组合。在设计网页整体界面的过程中我会给出一些意见和建议重点是顶部的图片如何增加一些细节让它看起来更加的美观、精致。 顶部图片的视觉处理 在教程的前两部分中提到过导航按钮的颜色选择现在我们来看一下如何处理一张花卉图像的色调使其与页面的风格达到统一。在用到的花卉图像素材中大家可以发现它上面也有红和绿两种色调我要做的事情就是把其中的颜色调制成粉红和暗绿就好似导航菜单中使用的色调一样 首先来看一下图片中花朵的颜色它的色调偏向于大红还是使用PS中的色相/饱和度命令来对它进行调整。利用快捷键按CtrlU调出色相/饱和度面板在“编辑”项的下拉列表中选择“红色Ctrl1”这样我们就能只针对图像中的红色进行调整了。拖动色相滑块调制出我们需要的红色具体的数值依据实际情况比如我这里是大致是-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结构如下
div idnavcontainer ul lia href#Home/a/li lia href#About me/a/li lia href#ximicc/a/li lia href#Articles/a/li lia href#Photo roll/a/li /ul /div 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中
div idnavcontainer ul lia href# idcurrentHome/a/li lia href#About me/a/li lia href#Contact me/a/li lia href#Articles/a/li lia href#Photo roll/a/li /ul /div
现在的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标签之间
div idheader img srcimages/header.jpg altximicc width692 height90 //div
你可能也注意到了当顶部图片应用到网页中的时候其上边缘和浏览器边界之间有一定的间隙所以在这里我们要用margin和padding进行完善 body { background: #F7F7F6 url(images/background.gif) repeat-y 50% 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中添加如下代码
div idcontentthis is the right/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: 15px 0 10px 20px; } [/code]
不论是padding还是margin若其后跟着四个数值对应的边缘顺序是上右下左即顺时针方向。大家会发现现在#container中定义的宽度由原来的514变成了479因为我们为了让正文文本与左右边框空出一点距离左边缘用padding实现而右边缘因为整个DIV是左浮动的所以我们直接将DIV的宽度缩减15px所以width的值就变成了514-20-15479px。 你可能会疑问“为什么不直接使用width: 494px 和 padding-right: 15px呢”刚开始的时候我也是这么做的出来的效果在Safari, FireFox 和Mozilla还算正常但在IE中就不行了正文版块跳到了导航的下面好像右边没有足够的空间容纳下正文DIV具体问题出在哪里我也说不清楚可能也是IE的一个Bug吧。
添加正文的文章标题
先来看一下主内容版块的结构 我们把文章的标题放在H2标签中
h2This is the title/h2
针对文章标题的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样式
p classtextHere comes the text/p
在正文中添加混排图像
下面是应用在图像上的样式
.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的页脚容器代码如下
html ... body div idcontainer ... /div div idfooter ... /div /body /html
页脚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标签中
div idfooterh2..../h2/div
上面这行代码我们添加在名为container的DIV闭合标签后面也即是在body的闭合标签之前。接下来我们要添加一段Bobby Van Der Sluis建议采用的JS脚本让页脚在Safari浏览器中也能固定在浏览器底部。
确保你使用的ID名跟在JS中定义的函数名保持一致。
完成JS的添加后如果你在浏览器中预览你会发现页脚并没有显示出来。这可能是因为有两个浮动容器(#left and #content)都需要进行浮动清除在的文章中有很详细的介绍。我们需要添加下面的代码进行修正首先添加一个用于清除浮动的DIV
div classclear /div
然后为其定义CSS
.clear { clear: both; } CSS混沌初开VIII侧边栏友情链接 这是本教程的最后一部分讲解如何实现友情链接版块。需要说明的是这部分我们将把样式表转换为外联式来实现CSS样式的设定。 首先是XHTML代码 div idfavlinks h2My Favorite Sites/h2 ul classextlinks lia hrefhttp://stopdesign.com/Stopdesign/a/li lia hrefhttp://www.simplebits.com/SimpleBits/a/li lia hrefhttp://www.mezzoblue.com/ Mezzoblue/a/li lia hrefhttp://www.ximicc.com/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-15163px。如果你对此不是很理解建议你去参考一些介绍CSS中盒模型原理的文章。 下面是栏目标题文字的CSS定义 #favlinks h2 { font: normal 16px Georgia, Times New Roman, Times, serif; color: #5C604D; margin: 0 0 10px 0; padding: 0; } 除了设置文字的字体和颜色之外padding和margin的定义也是必须的因为如果不明确指定的话栏目标题和链接列表之间的间隔可能会不可预期在这里我直接用margin属性定义了10px的下边距。 无序列表ul的CSS定义 #favlinks ul { margin: 0; padding: 0; list-style-type: none; } 这里的属性设置与第五部分教程中实现导航的ul设置一样主要是隐藏了默认的小圆点项目符号并把边距和填充设置为0。 为列表中各个链接添加图标 ul.extlinks li { background: url(images/bullet_extlink.gif) no-repeat 0 3px; font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif; padding-left: 12px; } 在XHTML中我们把名为extlinks的class类应用在了ul标签上所以这里用ul.extlinks li的选择符组合来定义. Extlinks下级中的li元素样式。图标还是采用背景的方式实现属性中为其定义了坐标即Y轴方向下移3px目的是为了让图标与其后的链接文字实现更好的对齐。Padding中只定义了一个左填充防止链接文字与图标产生重叠。 链接样式的定义 .extlinks a:link { color: #A5003B; text-decoration: none; border-bottom: 1px dotted #A5003B; } .extlinks a:visited { color: #6F2D47; text-decoration: none; border-bottom: 1px dotted #959E79; } .extlinks a:hover { background-color: #C3C9B1; color: #A5003B; text-decoration: none; border-bottom: 1px solid #A5003B; } 在鼠标经过的状态中除了背景色外我们还用边框属性定义了一条1px的实线下边框相应的也就需要设置doc属性来消除默认的链接下划线。关于字体的定义不是必须的因为在li标签的CSS中已经体现过了。对访问之后的链接我们将文字及下边框的颜色作了细微的淡化使其不会那么显眼并提示访问者这个链接你已经点击过了。定义链接样式的时候注意四个链接转台的顺序正确的应该是LVHA否则鼠标经过等效果可能会不能正常显示这里有一种很好很有趣的方法希望能帮你牢记这个顺序LOVE/HATE。 创建外部样式表 现在所有的界面设计和页面构建工作已经完成了还剩下最后一项工作。在本教程的学习中你可能会发现我经常使用内联样式事实上在很多人的概念中外部样式表才是王道我们应该把CSS样式定义在一个单独的样式表文件中然后与网页文档连接起来。现在我们可以把之前的样式定义剪切出来粘贴到一个新文档中命名为ximicc.css 。 连接外部样式表 link relstylesheet typetext/css mediascreen hrefximicc.css / 因为这里的样式我们只要显示在电脑屏幕上所以连接代码里的media参数设置为screen若需要打印页面则把该参数设置为print会有更好的打印效果。关于该参数更多的设置可以 参考这里 。
