请老师帮忙看看4-5编程练习,有哪些地方可以改进的?

请老师帮忙看看4-5编程练习,有哪些地方可以改进的?

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          /*样式补充*/

          body,div,h3,ul,li{margin:0; padding:0;}

          body{margin:100px 0px 0px 100px;}

          ul{display:none;}

          h3:hover~ul{display:block;}

          h3{background-color:#ededed; height:30px; width:150px; 

            border:1px #d2d2d2 solid; text-align:center; padding-top:6px;}

          ul{height:100px; width:150px; border:1px solid #d2d2d2; 

            list-style-type:none; text-align:center;}

          li{padding:7px;}

          

          

        </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>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

试试这样修改,效果是不是更好点呢

http://img1.sycdn.imooc.com/climg/59e450f5000110bc07500401.jpg

  • 木下同学 提问者 #1
    非常感谢!
    2017-10-16 14:38:41
  • 木下同学 提问者 #2
    非常感谢,根据老师的修改,实现的效果好的多了;想请教一下.big>div:hover ul{display:block;} 这个代码的意思,课程里面没学到这里>符号有什么含义?
    2017-10-16 14:40:06
怎么都被占用了呢 2017-10-16 15:35:31

>也是一种选择器,是父子选择器,以上边这句代码为例:选择类名为big元素的所有子元素,那就是定义在类名为big的大盒子内的3个小div。

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师