4-7编程,请老师看一下。

4-7编程,请老师看一下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          *{padding:0px;
            margin:0px;}
          .big{width:100px;
              background-color:#f2f4f6;
              margin:0 auto;}
          h3{border:1px #ececec solid;
             text-align:center;
             width:100%;
             color:black;
             text-decoration:none;
          }
          .elec,.wash,.clothes{display:none;
                               list-style: none;
                               text-align:center;
                               color:black;
          }
          a:hover .elec{display:block;}
          a:hover .wash{display:block;}
          a:hover .clothes{display:block;}
          
         
        </style>
    </head>
    <body>
    <div class="big">
        <div class="div1">
            <a href="#">
            <h3>家电</h3>
            <ul class="elec">
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul></a>
        </div>
        <div class="div2">
            <a href="#">
            <h3>洗护</h3>
            <ul class="wash">
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔顺剂</li>
            </ul></a>
        </div>
        <div  class="div3">
            <a href="#">
            <h3>衣物</h3>
             <ul class="clothes">
                <li>衬衫</li>
                <li>裤子</li>
                <li>卫衣</li>
            </ul></a>
        </div>
      </div>
</body>
</html>


正在回答

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

2回答

同学,你好。去掉下划线可以用这个属性:

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

在这儿你也可以不用a标签,用span标签就不用去下划线了。

如果帮助到了你,欢迎采纳!

祝学习愉快!

  • 花拉子迷 提问者 #1
    谢谢老师,我已经去掉下划线了,也把<li>的文字背景颜色调成白色了。谢谢老师。
    2019-03-25 10:05:16
Miss路 2019-03-24 14:51:05

同学, 你好。

功能操作是实现了,但是你再看一下效果图,优化一下,看看背景颜色的变化,以及字体颜色、大小,以及有没有下划线,这些都是自己能看出来的。

如果帮助到了你,欢迎采纳!

祝学习愉快!

  • 提问者 花拉子迷 #1
    还想再问一下老师,文字的下划线怎么取消?
    2019-03-25 09:45:53
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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