看看是否正确

来源:4-7 编程练习

初见若安

2018-04-20 09:26:23

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          *{margin:0;
              padding:0;
              font-family:"宋体";
          }
          .big{width:150px;
              margin:0 auto;}
          h3{width:100%;
          border:1px solid #CECECE;
              background-color:#ECECEC;
              text-align:center;
              padding-top:5px;
              padding-bottom:5px;
              font-size:24px;
          }
          ul{border:1px solid #ECECEC;
              background-color:#FFF;
              padding-left:35%;
              display:none;
          }
          li{list-style:none;
          padding-top:10px;
          padding-bottom:10px;
             
          }
          h3: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回答

慕神8145773

2018-04-20

看你代码实现效果是没问题的~我也是这样实现的

0

0 学习 · 36712 问题

查看课程