麻烦老师看看有哪里需要改进
来源:4-7 编程练习
慕村6371425
2020-06-20 15:02:46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
*{margin:0px; padding:0px;font-family:"微软雅黑";}
/* ul {list-style:none;}*/
.big {width:200px; margin:auto; text-align:center; border:1px solid #acacac;}
h3 {font-size:20px; border-top:1px solid #acacac; height:30px; background:#ececec;}
.special {border-bottom:none;}
ul {list-style:none; font-size:16px; text-align:left; color:gray; padding-left:80px; background:#fff; display:none;}
li {margin:15px auto;}
/* div:hover ul{display:block;}*/
.div1:hover ul{display:block;}
.div2:hover ul{display:block;}
.div3:hover ul{display:block;}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3>洗护</h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3 class="special">衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
1回答
同学你好,效果是正确的,不过代码可以再简化一下,例如:
祝学习愉快~
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1