麻烦老师看看有哪里需要改进

来源:4-7 编程练习

慕村6371425

2020-06-20 15:02:46

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          /*样式补充*/

*{margin:0px; padding:0px;font-family:"微软雅黑";}

/* ul {list-style:none;}*/

.big {width:200px; margin:auto; text-align:center; border:1px solid #acacac;}

h3 {font-size:20px; border-top:1px solid #acacac; height:30px; background:#ececec;}

.special {border-bottom:none;}

ul {list-style:none; font-size:16px; text-align:left; color:gray; padding-left:80px; background:#fff; display:none;}

li {margin:15px auto;}

/* div:hover ul{display:block;}*/

.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 class="special">衣物</h3>

             <ul class="clothes">

                <li>衬衫</li>

                <li>裤子</li>

                <li>卫衣</li>

            </ul>

        </div>

      </div>

</body>

</html>


写回答

1回答

好帮手慕言

2020-06-20

同学你好,效果是正确的,不过代码可以再简化一下,例如:

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

祝学习愉快~

0

0 学习 · 40143 问题

查看课程