老师，请帮我检查一下。

来源：4-7 编程练习

qq_徵羽kid

2018-11-26 16:22:17

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          body,div,h3,ul,li{padding: 0;margin: 0;}
          ul{list-style: none;}
          .big{
            width: 120px;
            margin: 0 auto;
            padding: 50px;
          }
          h3{
            font-size: 20px;
            background-color: #d9dde1;
            text-align: center;
            line-height: 1.5em;
            border-bottom: 1px solid #ccc;
         }
          .elec,.wash,.clothes{
            border-left: 1px solid #d9dde1;
            border-right: 1px solid #d9dde1;
            display: none;
          }
           li{
            text-align: center;
            line-height: 1.5em;
            font-size: 14px;
            padding: 5px 10px;
           }
           .div1:hover .elec{
                display: block;
           }
           .div2:hover .wash{
                display: block;
           }
           .div3:hover .clothes{
                display: block;
           }
           .d-special{
            border-bottom:0; 
           }
           .c-special{
            border-bottom: 1px solid #d9dde1;
           }
        </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 d-special">
            <h3>衣物</h3>
             <ul class="clothes c-special">
                <li>衬衫</li>
                <li>裤子</li>
                <li>卫衣</li>
            </ul>
        </div>
      </div>
</body>
</html>

写回答

1回答