日期:2014-05-17 浏览次数:20729 次
1简单的链接样式实例:
a{
color:red;
}
a:link
{color:#0033FF;}/*未被访问过的链接*/
a:visited
{color:green;}/*已经被访问过的链接*/
a:hover
,a:action
{color:red;}/*鼠标停留或点击的时候链接的颜色为红色*/
/*访问过的和没访问过的都没有线,而当鼠标放在上面或点击时就有线了
并且这两种情况的写法不能互换,不然就不起作用了。
这是由层叠找成的,当两个规则具有相同的特殊性时,后定义的优先。
*/
a:link,a:visited{text-decoration:none
; font-weight:bold;} ---未访问和已经访问,无线,粗体
a:hover,a:active{text-decoration:underline
; font-weight:bold;}---鼠标放上,点击时,有线,粗体。
?
2可以让下划线更有趣,默认为虚线, 鼠标放上或点击时是实线 。
?
a:link,a:visited{
text-decoration:none;
font-weight:bold;
border-bottom:1px dotted
#000;
}
a:hover,a:active{
border-bottom-style
:solid
;
}
/*dotted是虚线的意识。原来是虚线,当鼠标放上去或点击的时候就编程实线*/
3可以用a标记创 建按钮和翻转 (实际上通过改变他的背景颜色实现的翻转)
a{
display:block;
width:6em;
padding:5px;
line-height:1.4;
background-color:#99CCFF;
color:#FF0099;
text-decoration:none;
text-align:center;
}
a:hover
{
background-color:#369;
color:#fff;
}
4通过改变背景图像来实现翻转。
a:link,a:visited{
display:block;
width:50px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background
:#94B8E9 url(an1.gif) ;
text-indent:50px;
}
a:hover{
background
:#94B8E9 url(an2.jpg);
color:#fff;
}
?