辛苦老师看下,代码有没有错或是否有需要修改的地方

来源:4-7 编程练习

Lanny_Chung

2019-12-21 22:57:18

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          *{margin:0;padding:0;}
          .big{width:100px;background-color:#EEEEEE;margin:0 auto;}
          h3{text-align:center;font-family:"宋体";border:1px solid #DDDDDD;}
          ul li{display:none;list-style-type:none;text-align:center;font-size:14px;font-family:"微软雅黑";line-height:2em;background-color:white;}
          .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回答

好帮手慕夭夭

2019-12-22

同学你好,代码实现正确。不过有一个地方可以优化,参考如下:

http://img.mukewang.com/climg/5dfee50a091a7ad507370319.jpg

如果样式一样,,使用群组选择器共用一套样式更简洁。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程