天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>新闻>用CSS样式表来定义博客上的链接样式

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

新浪博客2006-11-09 09:33我要吐槽

中国共享软件英雄会.北京

以下是引用片段:
<style type="text/css">
A { text-decoration: NONE; color:#51bfe0}
A:hover {font-weight: bold;color:#990099}
<style>


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

###adv###

以下是引用片段:
<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代码,不能放在完全没有东西的空白面板里,可以把它放到已有内容的面板中。

  访问经典网站建设类教程>>

作者:水中花责任编辑:龙犊)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级