步骤二4-7练习
来源：4-7 编程练习
慕少7027160
2019-10-24 22:51:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
body,div,ul,h3{padding:0;margin:0;}
div:hover ul{display:block;list-style-type:none;}
.big{margin:auto;width:120px;}
ul{width:120px;}
ul{display:none;border:1px solid gray;text-align:center;}
h3{border:1px solid gray;width:120px;background:silver;}
h3{text-align:center;}
h3{line-height:2em;}
ul{line-height:2em;}
</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>
总感觉有问题，请老师帮忙看下
3回答
-
qq_慕九州2374973
2019-11-02
*{
margin: 0;
padding: 0;
}
.big{
width: 100px;
margin: 0 auto;
border: #e1f2f9 1px solid;
text-align: center;
}
.elec,.wash{
border-bottom: #e1f2f9 1px solid;
}
h3{
background-color: gainsboro;
}
ul li{display: none;line-height: 1.5em;width: 100%}
.div1:hover li{display: inline-block;}
.div2:hover li{display: inline-block;}
.div3:hover li{display: inline-block;}我也刚刚学到这，参考css样式如上
0 -
好帮手慕言
2019-10-25
同学你好，老师使用同学第二次提交的代码进行测试，是有问题的，如下：
移入一项，其他项都会展开，效果如下图：
原因：同学的代码写的是，移入div所有的ul都显示出来。
建议：移入.big元素下的div，div的子元素ul显示出来。
代码参考：
同学可以修改后，再测试下。
祝学习愉快~
0 -
慕少7027160
提问者
2019-10-24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
body,div,ul,h3{padding:0;margin:0;list-style:none;}
.big{margin:auto;width:120px;}
ul{display:none;}
div:hover ul{display:block;}
h3{border:1px solid gray;background:silver;text-align:center;}
ul{border:1px solid gray;text-align:center;}
h3,ul{line-height:2em;}
</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>
更改后的，不知道到还有没有问题
0
相似问题