步骤二4-7练习
<!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>
总感觉有问题，请老师帮忙看下
正在回答 回答被采纳积分+1
*{
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样式如上
<!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>
更改后的，不知道到还有没有问题
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星