a标签伪类选择器练习
模拟导航栏,悬停修改背景/字体颜色,长按改变字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a标签伪类选择器练习</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
width: 960px;
height: 40px;
background-color: green;
margin: 100px auto;
}
ul li {
list-style: none;
width: 120px;
/*height: 40px;*/
/*行高等于盒子高就可以垂直居中*/
line-height: 40px;
/*左浮盒子水平排列*/
float: left;
/*文字居中*/
text-align: center;
background-color: tomato;
}
ul li a {
/*转换为行内块级设置宽高*/
display: inline-block;
/*宽高和父元素一样就可以,进入导航懒区域就触发*/
width: 120px;
height: 40px;
}
/*默认*/
ul li a:link {
color: white;
/*去掉下划线*/
text-decoration: none;
}
/*悬停*/
ul li a:hover {
color: red;
/*鼠标悬停变换背景颜色*/
background-color: #cccccc;
}
/*长按*/
ul li a:active {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#">我是导航</a></li>
<li><a href="#">我是导航</a></li>
<li><a href="#">我是导航</a></li>
<li><a href="#">我是导航</a></li>
<li><a href="#">我是导航</a></li>
<li><a href="#">我是导航</a></li>
<li><a href="#">我是导航</a></li>
<li><a href="#">我是导航</a></li>
</ul>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6uE7X5a7-1605793461423)(image-20201119214210570.png)]
注意点
1.在编写a标签的伪类选择器时,最好写在标签选择器后边。
2.和a标签盒子相关的属性都写在标签选择器中。(显示模式/宽度/高度)
3.和a标签文字/背景相关的都写在伪类之中。
可以看下边这段代码
ul li a { /*转换为行内块级设置宽高*/ display: inline-block; /*宽高和父元素一样就可以,进入导航懒区域就触发*/ width: 120px; height: 40px; } /*默认*/ ul li a:link { color: white; /*去掉下划线*/ text-decoration: none; } /*悬停*/ ul li a:hover { color: red; /*鼠标悬停变换背景颜色*/ background-color: #cccccc; } /*长按*/ ul li a:active { color: yellow; }
4.看到导航栏就想到li标签来做,看到悬停/点击改变样式就在li标签里使用a标签伪类选择器来做。
5.想要li标签在同一行,就使用左浮,想要文字垂直居中就行高等于li标签高度,水平居中就text-align;center.
6.想要进入li标签区域里就能被a标签捕捉,就需要设置a标签display属性为inline-block使其可以修改宽高,然后在悬停选择器里修改背景样式