老师,麻烦看下哪里需要改进,

来源:4-7 编程练习

山有木兮木有枝z

2020-04-25 00:32:46

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
        h3,ul{margin:0px;}
        li{list-style-type:none}
         h3{border:1px solid grey;text-align:center;
             background-color:lightgrey;
         }
         .big{width:100px;}
         .elec,.wash,.clothes{display:none;border:1px solid grey;
          line-height:30px;
         }
         .div1:hover ul{display:block;}
         .div2:hover ul{display:block;}
         .div3:hover ul{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回答

好帮手慕糖

2020-04-25

同学你好,代码中可以优化的内容如下:

1、有边距不是只有外边距,还有内边距,且这里其他标签也有间距,建议:可以直接使用通配符,去除元素的内外边距,例:

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

2、li可以设置左内边距,调整下内容与左边的间距,例:

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

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

0

0 学习 · 40143 问题

查看课程