【Html】连接的4个控制标签(Ps.hover真好用)

来源:互联网 发布:企业开淘宝网店的流程 编辑:程序博客网 时间:2024/06/16 06:27
.link:连接平常的状态                             连接颜色
.active:连接被按下的时候                     活动连接(基本不用)
.visited:连接被访问过之后                    已访问连接
.hover:鼠标放到连接上的时候              变换图形连接

在属性面板选css,页面属性就能整体的控制连接属性。直接修改。
 
a:link 用于样式化链接。当你想把一个词转变为链接的时候,用什么实现呢?使用 <a> 和 </a> 这对标签,因此样式化链接就是样式化 a:link
a:visited 用于样式化已经访问过的链接。
a:hover 用于样式化已经访问过的链接。
 
例子一
a:link{                                连接本来样式
text-decoration: underline;           为文字增加下划线
color: #336699;                        定一个颜色
}

a:visited{                             连接访问过后的样式
text-decoration: underline;           为文字增加下划线
color: #336699;                        定一个颜色
}

a:hover{                               鼠标移动上去的样式
text-decoration: none;                 移动上去取消下划线
color: #ff0000;                        移动上去改变颜色
}

例子二
针对某个CSS样式进行修改,改变连接的图片
在DW中栏目中,插入-图形对象-鼠标经过图形,可以实现同样的功能。好处是背景不是图片

.pic {                                           这个pic是我增加的CSS
 background-image: url(img/ADV1.png);           在css定了个背景
 height: 317px;                                  
 width: 1014px;                                  
}
.pic:hover {                                     这个是pic的移动上去的效果
 background-image: url(img/ADV2.png);           我改了下背景的连接
 height: 317px;                                  
 width: 1014px;                                  

在.pic:hover里改动更多的属性可以有更多的变化,
例如:
1.移动上去改变线框颜色
2.移动上去改变图像的大小实现放大(这有可能会影响布局)
3.移动上去改变字颜色、大小、粗细、斜等

0 0