css图片链接样式,用CSS样式表来定义博客上的链接样式

A { text-decoration: NONE; color:#51bfe0}

A:hover {font-weight: bold;color:#990099}

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

a{text-decoration:none; color:#51bfe0}

A:hover{font-size:23; background:#ffd306; color:#990099}

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

a:link{text-decoration:none}

a:hover{text-decoration:none}

a:visited{text-decoration:none}

去掉链接字体的下划线。

A { text-decoration: NONE; color: #51bfe0}

A:hover {border-bottom:1px dashed #51bfe0 }

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

A { text-decoration: NONE; color: #51bfe0}

A:hover { position: relative; left:10px; top:10px; }

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

a { text-decoration: none; padding-bottom: 4px; white-space: nowrap; }

a:hover { background: url(背景图片地址) repeat-x 100% 100%; }

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

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%; }

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

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%; }

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值