前端第三波
伪类：
挺有意思的一个模块
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：未被访问状态，已被访问状态，，和鼠标悬停状态，活动状态。
a:link{color: #FF0000} /* 未访问的链接 */a:visited{color: #00FF00} /* 已访问的链接 */a:hover{color: #FF00FF} /* 鼠标移动到链接上 */a:active{color: #0000FF} /* 选定的链接 */
实例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
.nev{
text-align:center; /*块水平居中*/
}
a{
color:#333; /*设置文字的颜色，因为有些浏览器的痕迹一直存在，所以就加此代码，使链接的颜色每次初始化*/
}
.nev a:link{ /*设置元素最原始的状态属性*/
width:120px; /*设置块的宽度*/
height:50px; /*设置块的高度*/
display:inline-block; /*设置该链接为行内块元素*/
background-color:orange;
background-image: url(img/bg.png); /*为元素设置背景图像。*/
font-weight:700; /*设置文字加粗*/
font-size:20px; /*设置文字大小*/
color: #333; /*设置文字的颜色*/
text-decoration:none; /*取消文字的装饰，在这里作用为取消链接的下划线*/
line-height:50px; /*设置文字在水平方向的距离边框的距离*/
}
.nev a:visited{ /*设置链接被访问之后的状态属性*/
color:red;
}
.nev a:hover{ /*设置当鼠标放置在链接模块上时的状态属性*/
background-color:blue;
background-image: url(img/bgc.png);
}
.nev a:active{ /*设置链接模块被点击但是鼠标未抬起时的链接状态属性*/
color:green;
}
</style>
</head>
<body>
<div class="nev">
<a href="text.html">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
