在HTML中画一条横线

 怎么画一条横线?我想到的有三种方法,但是各自样式不一,所以大家按需求来哦。

        1.<hr />标签,对的,这个标签就代表一条横线,样式大概是这样的,如图(a与b之间哦):

           

<html>  

    <head></head>  
    <body>  
        <div>a</div>  
        <hr />  
        <div>b</div>  
    </body>  
</html>  

2.<div>来构造,我们知道border是边界的意思,很多时候我们用它设置一些边边框的什么,这里我们就用到了它,看看代码(还是在a和b之间插一个横线):

<html>  
    <head></head>  
    <body>  
        <div>a</div>  
        <div style="border:1px solid #CCC"></div>  
        <div>b</div>  
    </body>  
</html>

效果图:
稍微科普一下,1px代表那个线有多宽的,越大越宽,solid代表它是一个实线,这里还有很多属性如dashed(虚线),groove(凹槽型效果,具体请看Border HTML,当然#CCC就是颜色了。

 3.还是<div>来构造,只不过用border-bottom,为什么这么用呢,我们经常用到的横线其实我想就是一个div下面一个属性罢了,而不是单独的一个属性,所以代码有所改变,如下:

<html>  
    <head></head>  
    <body>  
        <div style="border-bottom:1px solid #CCC">a</div>  
        <div>b</div>  
    </body>  
</html>  

效果图:

  • 30
    点赞
  • 98
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Trouble-Solver

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值