HTML插入横线代码变换横线颜色

本文作者:小爱哥哥 发布时间:2024年9月15日 浏览次数:62

HTML中插入横线代码的标签为:<hr>  (本行为通用代码)

<p>这是一段文本。</p>
<hr>
<p>这是另一段文本。</p>

 

实际显示效果是这样的:

 

这是一段文本。


这是另一段文本。

 

 

如果加上颜色的话需要用到<style></style>标签:(本行为通用代码)

<style>
  hr {
    border: none; /* 移除默认边框 */
    height: 1px; /* 设置高度 */
    background-color:red; /* 设置颜色 */
    margin: 10px 0; /* 设置上下外边距 */
  }
</style>
 
<p>这是一段文本。</p>
<hr>
<p>这是另一段文本。</p>

实际显示效果是这样的:

 

这是一段文本。


这是另一段文本。

 

WordPress的代码设置就简单了,因为输入框已经设置定义过<style>和<css>样式,可直接插入:(本行代码不通用,需要自己设置定义样式)

<hr class="layui-border-red">
<hr class="layui-border-orange">
<hr class="layui-border-cyan">
<hr class="layui-border-blue">

实际效果是这样的:


 


 


 


 

赶快动手试试吧。!!!

- THE END -

本文来源:非特殊说明,本站文章均为原创  |  本站部分文章来源于网络,若侵犯了您的权益,请附说明联系删除

共有 0 条评论---(要不...来一句吧,实再不行抽一根也中!)