4-7 编程练习,麻烦老师看一下哪里还有不足

来源:4-7 编程练习

Liiiu

2020-09-03 13:04:19

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          body,div,ul,li,h3{
              padding:0;
              margin:0;
              list-style:none;
          }
          .big{
              margin:100px auto;
              width:120px;
              text-align:center;
              background-color:#ececec;
          }
          div div:hover ul{
              display:block;
          }
          div ul{
              display:none;
              background-color:#fff;
          }
          div div{
              border:1px solid #acacac;
          }
          .div2{
              border-top:none;
          }
          .div3{
              border-top:none;
          }
          div h3{
              font-family:"宋体";
              padding:5px 0px;
          }
          ul li{
              padding:5px 0px;
          }
        </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-09-03

同学你好,效果实现的不错,代码还可以简化一下,例如:

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

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

0

0 学习 · 40143 问题

查看课程