超链接与背景简单设置

a:link 超链接的普通样式,即正常浏览样式

a:visited 被点击过的超链接样式

a:hover 鼠标指针经过超链接的样式

a:active 在超链接上单击时,即“当前激活”时,超链接的样式

 

1

<style>

a:link,a:visited{

       text-decoration:none;     /*原样式与点击后样式无下划线*/

}

a:hover,a:active{

       text-decoration:underline;      /*鼠标经过与单击时有下划线*/

}

</style>

 

2 背景立体阴影效果

设置字体、颜色、大小、边距等

表框色,原样式与点击后样式上左白灰色,右下黑灰色;鼠标经过与单击时上左黑灰色,右下白灰色。

<style>

a{

       font-family:Arial, Helvetica, sans-serif;

       font-size:0.8em;

       text-align:center;

       margin:5px;

}

a:link,a:visited{

       color:#333;

       padding:4px 10px 4px 10px;

       background-color:#6CF;

       text-decoration:none;

       border-top:1px solid #eee;

       border-left:1px solid #eee;

       border-bottom:1px solid #717171;

       border-right:1px solid #717171; 

}

a:hover,a:active{

       padding:3px 8px 3px 8px;

       background-color:#69F;

       border-top:1px solid #717171;

       border-left:1px solid #717171;

       border-bottom:1px solid #eee;

       border-right:1px solid #eee;

}

</style>

posted @ 2011-09-26 10:42  祈祐  阅读(1285)  评论(0编辑  收藏  举报