老师,请帮忙检查一下代码。下划线的粗细该怎么改呢?设置height:0px还是很粗

老师,请帮忙检查一下代码。下划线的粗细该怎么改呢?设置height:0px还是很粗

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文本样式</title>

        <style type="text/css">

        div{border: 0}

        .one{color: green;font-size: 24px;}

        a{text-decoration: none;color:#009;}

        hr{color: gray;height:0px;}

        .star{color:orange;}

        </style>

    </head>

    <body>

          <div>

            <h2 class="one">大话西游之大圣娶亲的影评</h2>

            <p><a href="#">热门</a>/<a href="#">最新</a>/<a href="">好友</a></p>

            <hr/>

          </div>


          <div>

              <p><a href="#">罗弘霉素</a>&nbsp;<span class="star">★★★★★</span>&nbsp;2010-07-26</p>

              <p>有人跟我比赛背台词么</p>

              <p>阅读:1615&nbsp;<a href="#">有用</a></p>

              <hr/>

          </div>


          <div>

              <p><a href="#">十七只猫和鱼</a>&nbsp;<span class="star">★★★★</span>&nbsp;2006-04-26</p>

              <p>任何时候任何场合都可以再看一遍的电影</p>

              <p>阅读:515&nbsp;<a href="#">有用</a></p>

              <hr/>

          </div>


          <div>

              <p><a href="#">暖家男</a>&nbsp;<span class="star">★★★★</span>&nbsp;2010-07-26</p>

              <p>一定有一些电影&nbsp;永远都不能被超越</p>

              <p>阅读:490&nbsp;<a href="#">有用</a></p>

              <hr/>

          </div>

    </body>

</html>


正在回答 回答被采纳积分+1

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

1回答
好帮手慕慕子 2019-04-24 13:48:44

同学你好, 代码正确,效果实现的很好。

因为hr标签有默认样式,可以通过设置border: none;  然后设置高度和背景颜色修改下划线的粗细和颜色, 示例:

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

下划线这里也可以直接为div设置下边框实现, 示例:

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

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

祝学习愉快~~~~

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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