麻烦老师看看这段代码效果，有没有需要优化的

来源：4-7 编程练习

要开心鸭

2019-08-24 15:14:01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
         /** 全局样式设置**/
*{
padding: 0px;
margin: 0px;
list-style: none;
}
.big{
background-color: #ececec;
margin: auto;
width: 100px;
}
/**内容边框和行高设置**/
.div1,.div2,.div3{
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
line-height: 30px;
}
.div3{border-bottom: 1px solid #dddddd;}
/**文字居中**/
h3{
text-align: center;
}
ul{
background-color: white;
padding: 0px 0px 0px 30px;
width: 69%;
}
/**动作**/
.elec,.wash,.clothes{
display: none;
}
.div1:hover .elec{
display: block;
}
.div2:hover .wash{
display: block;
}
.div3:hover .clothes{
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回答