案例图:
要想实现该效果,得先了解
伪类选择器:
1)E:link 元素E未访问默认样式
2)E:visited 元素E访问后样式
3)E:hover 元素E鼠标悬浮样式
4)E:active 元素E鼠标点击未松开的样式
锚伪类
在支持 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>
</head>
<style>
.menu {
list-style: none;
}
h3 {
margin-left: 55px;
}
li {
float: left;
margin-left: 5px;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
}
li h4:first-child {
font-size: 16px;
color: #4D4D4D;
}
li p:nth-of-type(1) {
font-size: 14px;
color: #640000;
}
li p:nth-of-type(2) {
font-size: 12px;
color: blue;
}
img {
border-radius: 10px;
}
/*鼠标悬停设置盒子阴影*/
li:hover {
box-shadow: 1px 1px 5px #666;
}
</style>
<body>
<div>
<h3>热播</h3>
<ul class="menu">
<li>
<img src="img/img1.png" alt="">
<h4>神武赵子龙</h4>
<p>怒,林更新不抱网红抱女神</p>
<p>点击次数:242445次</p>
</li>
<li>
<img src="img/img2.png" alt="">
<h4>旋风十一人</h4>
<p>胡歌变教练在撩前女友</p>
<p>点击次数:242445次</p>
</li>
<li>
<img src="img/img3.png" alt="">
<h4>太阳的后裔</h4>
<p>宋慧乔吃嫩草</p>
<p>点击次数:242445次</p>
</li>
<li>
<img src="img/img4.png" alt="">
<h4>山海经之赤影传说</h4>
<p>娜扎张翰再度联手</p>
<p>点击次数:242445次</p>
</li>
</ul>
</div>
</body>
</html>