这样可以吗？
来源：4-7 编程练习
郝存杰
2018-10-16 15:23:49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
font-family: '宋体';
}
li{
list-style-type: none;
text-align: center;
display: none;
font-size:14px;
}
.big{
width: 150px;
border:1px solid #acacac;
margin:auto;
}
h3{
text-align: center;
background: #ececec;
height:2em;
line-height:2em;
border-bottom: 1px solid #acacac;
}
ul{
line-height:2em;
}
.div3 h3{
border-bottom: none
}
.div1 h3:hover~.elec li{
display:block;
}
.div2 h3:hover~.wash li{
display:block;
}
.div3 h3:hover~.clothes li{
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>
老师帮忙看下是否有逻辑错乱的地方。还有哪里需要修改？是否有更合理，更简洁的方法？第三次做这个练习了，还是有点懵。主要是对内外边距，行高的部分。看到有间距的内容就开始纠结到底要用哪个来实现。这里隐藏的部分只设置了行高，并没有设置内外边距。
1回答
-
可以将代码简化,相同的样式可以写在一起,比如:
padding是对内的,举例:
margin是对外的，它调整的整体,举例:
祝学习愉快!
0
相似问题