4-5的编程练习，请老师批改！
来源：4-7 编程练习
慕码人8173882
2018-01-14 16:35:39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>悬浮框隐藏提示</title>
<style type="text/css">
body,div,a,span{margin: 0; padding: 0;}
div{
width: 200px;
font: bold 24px 宋体;
margin: 0 auto;
background-color: #edefee;
line-height: 1.5em;
text-align: center;
border: 1px solid #dee0df
}
span{display: block; font-weight: normal; font-size: 16px; }
.cloth span,.health span,.furniture span{display: none}
a:link{color: black;}
a:hover .three,a:hover .clean,a:hover .appliance{display: block}
a{text-decoration: none;}
.top{ border-top: solid 2px #dee0df }
</style>
</head>
<body>
<div>
<div class="furniture">
<a href="#">
家电
<span class="appliance top">冰箱</span>
<span class="appliance">洗衣机</span>
<span class="appliance">空调</span>
</a>
</div>
<div class="health" >
<a href="#">
洗护
<span class="clean top">洗衣液</span>
<span class="clean">消毒液</span>
<span class="clean">柔顺剂</span>
</a>
</div>
<div class="cloth">
<a href="#">
衣物
<span class="three top">衬衫</span>
<span class="three">裤子</span>
<span class="three">卫衣</span>
</a>
</div>
</div>
</body>
</html>
1回答
-
小丸子爱吃菜
2018-01-15
经测试，代码的效果实现的没有问题。
祝学习愉快！
0
相似问题