效果：
代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">小兔子</a></li>
<li><a href="#news">小狗狗</a></li>
<li><a href="#contact">小猫咪</a></li>
<li><a href="#about">小老虎</a></li>
</ul>
</body>
</html>
代价解释：
ul标签定义列表，li是列表中的项，每个列表项包括一个链接（<a>标签）；
ul{}部分：
定义列表样式-无；
外边距-0;
内边距-0;
a:link,a:visited{}部分：（a:link-未访问的链接，a:visited-已访问的链接；）
块级元素 - 占据一定矩形空间；
设置字体粗细 - 粗体；
颜色；
背景颜色；
宽度；
文本中间对齐；
内边距4px;
文本修饰-标准；
文本大小写状态-大写；（对中文无意义）
a:hover,a:active{}部分：（a:hover-鼠标悬停在链接上，a:active-被选择的链接；）
背景色；
