用HTML5怎么实现：隐藏的邮箱列表_html 邮件隐藏元素邮箱还是能看到-CSDN博客

本文链接：https://blog.csdn.net/2401_83050569/article/details/137087937

效果图如下：

代码部分：

<!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:hover ul：表示当鼠标悬停在.email元素上时，显示其子元素ul。
email ul、.email ul li:hover：指定了邮箱列表和列表项的样式，包括显示、背景颜色等。
在HTML部分，通过使用.email、.header、ul、li等元素和类来构建一个简单的邮箱列表，包括三个不同的邮箱服务。在CSS部分，定义了这些元素和类的样式，包括宽度、文本对齐、边框、背景颜色等。当鼠标悬停在邮箱块（.email）上时，邮箱列表（ul）会显示，列表项（li）的背景颜色也会在鼠标悬停时改变为天蓝色。