1.动态超链接
<a href="****">链接文本</a>
去掉下划线:text-decoration:none
利用css的为类别来制作超链接动态效果的方法
a:link 普通样式
a:visited被点击过的超链接的样式
a:hover鼠标指针经过超链接上时的样式
a:active在超链接上单击时,即当前激活时,超链接的样式
需要注意的问题



2.按钮式超链接
利用边框的样式模拟按钮效果。普通超链接和点击过的冲链接采用相同的样式,鼠标指针经过时的超链接相应的改变文字 颜色背景色,位置和边框。模拟按下去的效果
例子: a{
font-family:
font-size:
text-align:
margin:
}
a:link, a:visited
{
color:#aaa
padding:4 10 4 10;
color: rgb(69, 83, 83); font-family: 'Hiragino Sans GB W3', 'Hiragino Sans GB', Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px;"> text-decoration:none;
border-top:1px solid #eeeeee;
border-left:1px solid #eeeeee;
border-bottom:1px solid #717171;
border-right:1px solid #717171;
}
a:hover{
color:#821818;
padding:5 8 3 12
border-top:1px solid #717171;
border-left:1px solid #717171;
border-bottoom:1px solid #eeeeee;
border-right:1px solid #eeeeee;
}

3.css控制鼠标指针 本人认为不常用
4.浮雕背景超链接 实例应用(用table和a标签制作的菜单)
超链接背景图片的变换实现浮雕的效果,变换图片的思路
(1)原始的背景图片
(2)a:visited鼠标浏览过和a正常时的背景图片
(3)a:hover鼠标经过时的背景图片
a标签间不要有空格
firefox中a标签不能直接设高度和宽度 ,将a变为块才可

项目列表
1.列表的符号
顺序为ol 无顺序为ul标记
ul{list-style-type:decimal} 项目编号
2.图片符号
ul设置list-style-image:url(*);此种方法不推荐
建议方法:ul:list-style-type:none
设置li标签的background图像 并设置padding-left让出图像位置
例子:li{
background:url(icon1.jpg) norepeat;
padding-left:25px;
}
简单的导航菜单
竖直排列菜单
<div id="navigation"> //结构
<ul>
<li><a href="#">home</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">web dev</a></li>
<li><a href="#">map</a></li>
</ul>
</div>
#navigation{
150px;
font-family:arial;
font-size:14px;
text-align:right;
}
#navigation ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#navigation li{
border-bottom:1px solid #9f9fed;
}
#navigation li a {
display:block;
height:1em;
padding:5 5 5 0.5em;
text-decoration:none;
border-left:12 solid #151571;
border-right:1px solid #151571;
}

再设置超链接样式
#navigation li a:link,#navigation li a :visited{
background-color#1136c1;
color:#ffffff;
}
#navigation li a :hover{
color:#ffff00;
border-left:12px solid yellow;
}

150px从#navigation移动到#navigation li a中,即div没有宽度限制了,同时保证每个列表项的宽度都是150px
在#navigation li的样式中增加一条float:left确保各个列表项依次排列。