老师看一下代码有需要优化的地方吗？
来源：4-7 编程练习
河水彼岸有烟花
2019-10-24 21:06:56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
body,div,h3,ul,li{margin:0;padding:0;}
.big{margin:0 auto;
width:150px;
background-color:rgb(238,238,238);
text-align:center;
font-family:"宋体";
font-size:1.2em;
border:1px rgb(221,221,221) solid;
}
h3{font-size:1.2em;
line-height:1.5em;
border-top:1px rgb(221,221,221) solid;
border-bottom:1px rgb(221,221,221) solid;
}
ul{list-style:none;
background-color:white;
line-height:1.6em;
display:none;
}
div.div1:hover ul{display:block;}
div.div2:hover ul{display:block;}
div.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>衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>写回答
2回答
-
同学你好，整体的效果实现不错，代码还可以优化下哦，
1、设置默认的内外边距为0 ，可以使用通配符，统一给所有的元素设置，例：
2、三个hover可以统一设置，例：
这是因为隔一个空格的话，是后代关系。.big div:hover ul{display: block;}就是.big下的div在hover的时候，该div下面的ul（一个div下面就一个ul哦）显示，所以可以一个个的显示。
希望能帮助到你，祝学习愉快！
0 -
好帮手慕粉
2019-10-25
同学你好，代码实现的效果很好哦，还有一点需要优化的地方，在给网页元素清除自带的的内外边距时，可以直接使用通配符*：
希望我的回答能够帮助到你，望采纳，祝学习愉快！
0
相似问题
老师，看我有什么地方需要改进的吗？
回答 2