div+css 学习笔记5

来源：互联网发布：ace editor python 编辑：程序博客网时间：2024/04/29 09:27

1、超链接伪类实例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style>a:link{color:#06F;text-decoration:none;}a:visited{color:#999;text-decoration:line-through;}a:hover{color:#0f0;text-decoration:underline;}a:active{color:#f0f;}</style></head><body><p><a href = "#" > 链接1 </a></p><p><a href = "#" > 链接2 </a></p></body></html>

2、按钮实例（使用超链接伪类）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>自定义按钮</title><style>a{display:block;height:34px;width:107px;line-height:2;text-again:center;background:url(./picture/btn_bg.gif) no-repeat 0px 0px;color:d84700;font-size:14px;font-weight:bold;text-decoration: none; padding-top: 3px;}a:hover{background:url(./picture/btn_bg_hover.gif) no-repeat 0px 0px;}</style></head><body><p><a href = "#">免 费 注 册</a></p></body></html>

3、知识点总结

（1）、

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

以上分别定义了超链接未访问时的链接样式，已访问的链接样式，鼠标移上时链接样式和选定的链接样式。之所以称之为伪类，也就是说它不是一个真实的类，正常的类是以点开始，后边跟一个名称，而它是以a开始后边跟个冒号，再跟个状态限定字符。

（2）、链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。

0 0