div+css 学习笔记5

最新推荐文章于 2024-05-05 02:50:11 发布

Kang_Nian

最新推荐文章于 2024-05-05 02:50:11 发布

阅读量774

点赞数

分类专栏： Web开发文章标签： CSS web前端

本文链接：https://blog.csdn.net/kang_nian/article/details/17354287

版权

Web开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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属性即可。