老师请批改4-5编程练习

首页课程实战体系课手记专栏慕课教程

老师请批改4-5编程练习

来源：4-7 编程练习

yjw123

2017-09-24 16:40:11

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>display属性</title>

<style type="text/css">

/*样式补充*/

body,div,h3,ul{padding:0px;margin: 0px;font-family: "微软雅黑";}

.big{

width: 120px;

border:1px #aaa solid;

background-color:#d2d2d2;

margin: 0px auto;

}

h3 {

border-bottom: 1px #aaa dashed;

border-top: 1px #aaa dashed;

padding:0px 40px;

}

li {

padding:10px 0px;

text-align: center;

list-style-type:none;

display: none;

}

.div1:hover li{display: block;}

.div2:hover li{display: block;}

.div3:hover 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回答

好帮手慕糖

好帮手慕糖

2017-09-25

已采纳

你好，实现效果没有问题哟，这里可以把三个hover时间，合并哟，例：

.big div:hover li{display: block;}

祝学习愉快~

0

hjw123

h 非常感谢！

h017-09-25

共1条回复

0 学习 · 36712 问题

相似问题

4-5的编程练习，请老师批改！

回答 1

4-5编程练习

回答 1

4-5作业批改

回答 2

4-5编程练习，麻烦老师帮忙检查

回答 4

4-5编程练习答案

回答 1

打开慕课网App查看更多内容