老师帮忙看看 总感觉哪里不对劲

老师帮忙看看 总感觉哪里不对劲

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

         body,div,h3,ul,li{margin:0;padding:0;font-family:"微软雅黑";font-size"25"}

         div{width:100px;text-align:center;margin:0px auto;}

         h3{background-color:gray;width:100px;border:1px black solid; padding-top:5px;padding-bottom:5px;}

         li{list-style-type:none;font-size:15px;display:none;padding:5px;}

         ul{width:100px;

          border-left:1px black solid;

            border-right:1px black solid;

         }

          .clothes{border-bottom:1px black solid;}

          .div1:hover li{display:block;}

          .div2:hover li{display:block;}

          .div3:hover li{display:block;}

          .div1 h3,.div2 h3,.div3 h3{border-bottom:none;}

        </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/5a7faba6000152f601200223.jpg

效果实现的很好,但是有一个小细节,就是“洗衣机”与“冰箱”、“空调”左侧是对齐的,即:

http://img1.sycdn.imooc.com//climg/5a7face10001e2cf01410221.jpg

建议设置

http://img1.sycdn.imooc.com//climg/5a7facf40001b9ad04770115.jpg

另外font-size"25"写错了,应该是font-size:25

希望可以帮到你~

  • 不拼不磨难活 提问者 #1
    非常感谢!
    2018-02-11 10:42:48
  • 为什么会出现不对其呢?
    2018-02-23 13:48:13
  • 因为div 设置text-align:center; 居中显示,所以文字都居中显示,如想其它方式显示,看上面老师的建议。
    2018-02-23 15:39:32
Miss路 2018-02-11 10:42:14

1、 body,div,h3,ul,li{margin:0;padding:0;font-family:"微软雅黑";font-size"25"} 这一行最后font-size后面少个冒号。

2、当鼠标放到字儿上面的时候呈现小手状,用cursor: pointer;来设置。

其他的实现的都挺好的。要相信自己,继续加油!

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

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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