用CSS样式表来定义博客上的链接样式

<style type="text/css"> 
A { text-decoration: NONE; color:#51bfe0} 
A:hover {font-weight: bold;color:#990099} 
<style>

  鼠标放在链接字体上的时候,链接字体变粗,颜色改变,如本博客上的样子。其中color:#990099表示链接字体改变的颜色,可以根据个人爱好修改,其他的不需要改。

<style type="text/css"> 
a{text-decoration:none; color:#51bfe0} 
A:hover{font-size:23; background:#ffd306; color:#990099} 
</style> 

  鼠标鼠标放在链接字体上的时候,链接字体大小改变,颜色改变,有背景颜色。font-size:23表示字体大小;background:#ffd306表示背景颜色color:#990099表示字体颜色,可以根据个人爱好修改,其他的不需要改。 

<style type="text/css"> 
a:link{text-decoration:none} 
a:hover{text-decoration:none} 
a:visited{text-decoration:none} 
</style> 

  去掉链接字体的下划线。 

<STYLE TYPE="text/css"> 
A { text-decoration: NONE; color: #51bfe0} 
A:hover {border-bottom:1px dashed #51bfe0 } 
<style type="text/css"> 

  鼠标放在链接字体上的时候,链接字体加虚线。 

<style type="text/css"> 
A { text-decoration: NONE; color: #51bfe0} 
A:hover { position: relative; left:10px; top:10px; } 
</STYLE>  

  鼠标放在链接字体上的时候,链接字体会移动,其left:10px表示字体向上移动的距离,top:10px表示字体向上移动的距离,可以根据个人爱好修改具体数值,其他的不需要改。

<style type="text/css"> 
a { text-decoration: none; padding-bottom: 4px; white-space: nowrap; } 
a:hover { background: url(背景图片地址) repeat-x 100% 100%; } 
</style>  

  鼠标放上在链接字体上的时候,链接字体出现图片背景。

<style type="text/css"> 
a{ text-decoration: none; white-space: nowrap; padding-bottom: 10px; } 
a:hover { background: url(‘http://blog.sina.com.cn/pic/4723cdbf020002nm‘) repeat-x 100% 100%; } 
</style>  

  鼠标放在链接字体上的时候,出现花朵下划线的效果。

<style type="text/css"> 
a { text-decoration: none; white-space: nowrap; padding-bottom: 5px; } 
a:hover { background: url(‘http://blog.sina.com.cn/pic/4723cdbf020002nn‘) repeat-x 100% 100%; } 
</style>  

  鼠标放在链接字体上的时候,出现滚动箭头下划线的效果。

  注意:有些代码应该甚用,如果用不好反而会适得其反,影响页面美观效果!这些代码用的时候添加空白面板就行了。还有就是这些都是CSS代码,不能放在完全没有东西的空白面板里,可以把它放到已有内容的面板中。

转载请注明出处:https://www.onexin.net/%e7%94%a8css%e6%a0%b7%e5%bc%8f%e8%a1%a8%e6%9d%a5%e5%ae%9a%e4%b9%89%e5%8d%9a%e5%ae%a2%e4%b8%8a%e7%9a%84%e9%93%be%e6%8e%a5%e6%a0%b7%e5%bc%8f/

相关文章:

1、CSS样式编写的规范和常见问题
https://www.onexin.net/css-styles-to-prepare-specifications-and-frequently-asked-questions/

2、最优秀的css样式reset.css
https://www.onexin.net/the-best-css-style-reset/

3、经典DIV + CSS Layout
https://www.onexin.net/classic-div-css-layout/

4、DIV+CSS布局解决IE6、IE7、IE8样式不兼容问题
https://www.onexin.net/divcss-layout-solution-ie6-ie7-ie8-style-incompatibility-issues/

5、CSS如何让图片垂直并水平居中等比缩放?
https://www.onexin.net/div-css-how-to-make-image-vertical-and-align-center-geometric-scaling/

Leave a Reply