想用丰富的链接样式，一是针对不同的元素单独定义：
比如有个id为top的div，你想让top里的链接为黑色，鼠标移上变白色，那么就这样写：
.top a {color:#000}
.top a:hover {color:#fff}
这种写法你只要在top里做链接就行了，链接会自动应用这种样式。也可以在top后面跟上子元素（要加空格），比如ul,li等，这样同一个div的ul和li就可以有不同的链接样式。
还可以根据你的喜好事先做出很多种链接样式，如：
.blue a {color:#06f}
.blue a:hover {color:#06f}
.yellow a {color:#fc0}
.yellow a:hover {color:#fc0}
在用的时候：<div class="blue">就行了。
或者针对某个词组：<span class="blue"><a href="#">词组</a></span>
1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>导航栏示例</title>
</head>
<body>
<ul id="navigation">
<li></li>
<li><a href="#">首 页</a></li>
<li><a href="#">我的博客</a></li>
<li><a href="#">互动交流</a></li>
<li><a href="#">开心一刻</a></li>
<li><a href="#">悬 赏 令</a></li>
<li></li>
</ul>
</body>
</html>
2、此时对应效果如图：
3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
4、然后将以下CSS代码加入到<head></head>之间：
<style type="text/css">
body {text-align:center}
#navigation
{ list-style-type:noneheight:auto}
#navigation li { width:154pxheight:60pxtext-align:center
float:leftpadding-top:18pxfont-size:20pxfont-family:"微软雅黑", "宋体", "隶书"
background-image:url(images/noactive.jpg)}
a {width:154pxheight:72px}
a:link { text-decoration:nonecolor:#FFFF00}
a:visited { text-decoration:nonecolor:#FFFF00}
#navigation li:hover { color:#CC0000text-decoration:underline
background-image:url(images/active.jpg)}
a:hover{ color:#CC0033}
#left {background-image:url(images/left.jpg)width:22px}
</style>
5、在加入CSS代码之间，网页此时的效果如图：
