回首页 ◎ 设为首页  
◎ 收藏本站  
◎ 联系我们  
  首 页  网络资讯  教程资料  免费资源  建站指南  休闲娱乐  经典整站  访客留言  
  当前位置:首 页 >> 教程资料 >> 网页制作 >> 用CSS样式表来定义博客上的链接样式
最 新 推 荐
淘宝网店“设计装修”..推荐
网页制作常见105个问..推荐
使用FrontPage2000注..推荐
网页制作常用代码推荐
颜色代码大全推荐
热 门 排 行
北京奥运会倒计时代码
如何在网页中插入Flas..
网页自动点击广告代码
星空动态星空背景特效..
如何用Frontpage下载..
网页两侧浮动广告代码
离开时自动提示设为首页
颜色代码大全推荐
怎么使网页跳转地址栏..
站长常用广告代码的表..
淘宝网店“设计装修”..推荐
在网页上设计飘动广告
网页制作常用代码推荐
网页常用特效整理:高..
网页制作常见105个问..推荐
使用css设置iframe样式
最 近 更 新
CSS在表格边框上的美..
Flash文件中多个swf调..
圆角边框的代码
股票即时行情查询系统
万能音.视频在线转换..
仿3721窗口拖动的代码
美化的GOOGLE广告代码
修改discuz5.5,让广..
一些所谓的CSS的“顶..
中英文双语导航菜单
广 告 位 置
站 内 搜 索
关键词

搜索方式

搜索范围

精确匹配
用CSS样式表来定义博客上的链接样式

来源:盛绿设计 等级:默认等级
发布于2006-11-09 10:51 被读28次 【字体:

    用CSS样式表来定义博客上的链接样式——很多人喜欢打造自己的博客样式,本文提供了一些CSS样式表a属性,希望能给你一个漂亮的博客链接样式。

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


相关专题:暂无相关专题

上一篇:利用51LA为adsense做统计
下一篇:谈谈CSS样式表的命名规范

共有评论 0 条 网友评分 0分 查看全部

【发表评论】 评分:1分 2分 3分 4分 5分


Powered By Www.Xydw.COM Ver1.14 管理
Copyright © 2004-2005 盛绿设计 All Right Reserved. XCMS
冀ICP备06026128号