老师,为啥我实现不了效果呢?

老师,为啥我实现不了效果呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          div,h3,ul{padding:0;margin:0;}
          div{text-align:center;
              width:120px;
              height:80px;
              margin:0 auto;
              background-color:#DCDCDC;
          }
          ul{list-style-type:none;}
          h3{border-bottom:1px black solid;}
          li{display:none;}
          ul:hover li{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>


正在回答

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

3回答

可以参考下列代码

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

提问者 打不死的女小强 2018-01-22 12:51:33

按照老师您的思路,那么我就改为http://img1.sycdn.imooc.com//climg/5a656d700001544003170255.jpg,那么最终的效果是http://img1.sycdn.imooc.com//climg/5a656d9500012de101310242.jpg

虽然鼠标经过家电、洗护、衣物会有内容出来,但是初识的时候内容的背景颜色还会有啊,跟题目的效果图不一样

小丸子爱吃菜 2018-01-22 10:25:51

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

可以参考上面的代码。

祝学习愉快!

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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