效果图如下：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>邮箱列表</title>
</head>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000000;
}
/* 整体设计 */
.email {
width: 150px;
text-align: center;
border: 1px solid #999;
}
.email:hover ul {
display: block;
}
/* 局部设计 */
.header {
background-color: #9999;
}
/* 局部：邮箱列表 */
.email ul {
display: none;
}
.email ul li:hover {
background-color: skyblue;
}
</style>
<body>
<!-- .email>.header+ul>(li>a)*3搭建盒子快捷键 -->
<div class="email">
<div class="header">邮箱</div>
<ul>
<li><a href="#">163邮箱</a></li>
<li><a href="#">QQ邮箱</a></li>
<li><a href="#">新浪邮箱</a></li>
</ul>
</div>
</body>
</html>不懂的家人可以看下面解释，代码解释：
-
email.header、ul等是CSS类选择器，用来选择相应的HTML元素并应用样式。 -
ul、a、li：分别表示无序列表、超链接和列表项。 -
email:hoverul：表示当鼠标悬停在.email元素上时，显示其子元素ul。 -
email ul、.email ul li:hover：指定了邮箱列表和列表项的样式，包括显示、背景颜色等。 -
在HTML部分，通过使用
.email、.header、ul、li等元素和类来构建一个简单的邮箱列表，包括三个不同的邮箱服务。在CSS部分，定义了这些元素和类的样式，包括宽度、文本对齐、边框、背景颜色等。当鼠标悬停在邮箱块（.email）上时，邮箱列表（ul）会显示，列表项（li）的背景颜色也会在鼠标悬停时改变为天蓝色。
