效果图如下：
代码部分：
<!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）的背景颜色也会在鼠标悬停时改变为天蓝色。
