超链接 重新 设置
介绍一下超链接效果css代码:
a:linlk 未被访问前的样式
a:visited 已被访问过时的样式
a:hover 鼠标悬停在上面时的样式
3者必须按顺序写。
实例一、让你的空间超链接下面那条横线消失
直接复制粘贴以下代码到css:
div a:link,div a:visited{ text-decoration: none; }
代码说明:
text-decoration取值有:
none : 默认值。无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
比如
text-decoration:underline;就表示一条实下划线;
另外,border-bottom也可以来实现它
border-bottom: 1px dotted;就表示一条1px的虚下划线;
border-bottom: #000000 1px solid;就表示一条黑色1px的实下划线。
实例二、让文章中的超链接没有下划线,并且平时是红色,鼠标上去以后是蓝色,并有虚下划线,下划线为绿色
代码如下:
#m_blog div.cnt a:link,
#m_blog div.cnt a:visited{
color: #ff0000; text-decoration: none;
}
#m_blog div.cnt a:hover{
color: #0000ff; border-bottom: #00ff00 1px dotted
}
a:link和a:visited属性一样,中间放个逗号把它们合在一起写。
如要修改文章下面的“阅读全文”的超链接,只需要将上面的#m_blog div.cnt更换成#m_blog div.more就行了。
编辑,评论等的超链接id是#m_blog div.opt,更换掉就可以。
如果你要换其它地方,只要把id更换一下就可以。
实例三、本blog导航条效果的超链接
代码如下:
#tab a,#tab a:link,#tab a:visited{
color: #000000;
background-color: #404040;
text-decoration: none; }
/*没选中的栏目,鼠标不在上面时的样子,黑色的字,#404040的背景色,没下划线*/
#tab a:hover{
background-color: #bfbfbf;
border-top: #cccccc 1px solid;
border-bottom: 0px}
/*没选中的栏目,鼠标在上面时的样子,#bfbfbf的背景色,上面一条1px的#cccccc实线*/
#tab a.on,#tab a.on:link,#tab a.on:visited,#tab a.on:hover{
background-color: #ffffff;
border-top: 0px;
border-bottom: 1px;
padding-bottom: 1px;
padding-top: 0px; }
/*选中的栏目的样子*/
超链接修改心得,一个blog里1到2种超链接样式就可以了。所以我把原始的css超链接全删了,
定义了div a:link,div a:visited,div a:hover,这是全局的。
然后再把个别的超链接重新定义一下,如blog标题,导航条的链接。
a:linlk 未被访问前的样式
a:visited 已被访问过时的样式
a:hover 鼠标悬停在上面时的样式
3者必须按顺序写。
实例一、让你的空间超链接下面那条横线消失
直接复制粘贴以下代码到css:
div a:link,div a:visited{ text-decoration: none; }
代码说明:
text-decoration取值有:
none : 默认值。无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
比如
text-decoration:underline;就表示一条实下划线;
另外,border-bottom也可以来实现它
border-bottom: 1px dotted;就表示一条1px的虚下划线;
border-bottom: #000000 1px solid;就表示一条黑色1px的实下划线。
实例二、让文章中的超链接没有下划线,并且平时是红色,鼠标上去以后是蓝色,并有虚下划线,下划线为绿色
代码如下:
#m_blog div.cnt a:link,
#m_blog div.cnt a:visited{
color: #ff0000; text-decoration: none;
}
#m_blog div.cnt a:hover{
color: #0000ff; border-bottom: #00ff00 1px dotted
}
a:link和a:visited属性一样,中间放个逗号把它们合在一起写。
如要修改文章下面的“阅读全文”的超链接,只需要将上面的#m_blog div.cnt更换成#m_blog div.more就行了。
编辑,评论等的超链接id是#m_blog div.opt,更换掉就可以。
如果你要换其它地方,只要把id更换一下就可以。
实例三、本blog导航条效果的超链接
代码如下:
#tab a,#tab a:link,#tab a:visited{
color: #000000;
background-color: #404040;
text-decoration: none; }
/*没选中的栏目,鼠标不在上面时的样子,黑色的字,#404040的背景色,没下划线*/
#tab a:hover{
background-color: #bfbfbf;
border-top: #cccccc 1px solid;
border-bottom: 0px}
/*没选中的栏目,鼠标在上面时的样子,#bfbfbf的背景色,上面一条1px的#cccccc实线*/
#tab a.on,#tab a.on:link,#tab a.on:visited,#tab a.on:hover{
background-color: #ffffff;
border-top: 0px;
border-bottom: 1px;
padding-bottom: 1px;
padding-top: 0px; }
/*选中的栏目的样子*/
超链接修改心得,一个blog里1到2种超链接样式就可以了。所以我把原始的css超链接全删了,
定义了div a:link,div a:visited,div a:hover,这是全局的。
然后再把个别的超链接重新定义一下,如blog标题,导航条的链接。