要求:
1.默认显示状态
2.光标在邮箱上显示状态
3.光标在列表上的显示状态
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>邮箱列表</title>
<style>
/* 样式重置 */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
/* 整体的样式 */
.email {
width: 100px;
border:2px solid #999;
text-align: center;
}
.email:hover ul {
display: block;/*光标放在email上显示内容*/
}
/* 局部:header */
.header {
background-color: #999;
color: #fff;
}
/* 局部:邮箱列表 */
ul {
display: none;/*隐藏内容*/
}
.email ul li:hover {
background-color: skyblue;
}
.email ul li a {
display:block;/*将a元素设置成块级元素 内容充满列表整行*/
}
</style>
</head>
<body>
<div class="email">
<div class="header">邮箱</div>
<ul>
<li><a href="#">QQ邮箱</a></li>
<li><a href="#">163邮箱</a></li>
<li><a href="#">139邮箱</a></li>
</ul>
</div>
</body>
</html>
总结:开发过程要先整体再局部,逐步细化