html中hr的各种样式使用

admin 建站教程评论7011字数 684阅读模式
摘要

网页设计当中hr的各种样式,如果使用得当,将会给你的页面增色很多,下面就来详细介绍下各种样式和各种使用方式的方法!

我用的编辑器是eclipse,这个根据个人喜好来定,用什么都无所谓的,就算你直接用txt也照样能实现这里的效果,毕竟只是静态。
html中hr的各种样式使用

第一种:

  1. <hr style=" height:2px;border:none;border-top:2px dotted #185598;" />  
  2.   
  3. height:2px;是hr的高度  
  4.   
  5. border:none;是没有边框  
  6.   
  7. border-top:2px dotted #185598;是设置横线的样式  
  8.   
  9. dotted  虚线  #185598  颜色  

html中hr的各种样式使用

第二种:

  1. <hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />  

html中hr的各种样式使用

第三种:

  1. <hr style="height:1px;border:none;border-top:1px solid #555555;" />  

html中hr的各种样式使用

第四种:

  1. <hr style="height:3px;border:none;border-top:3px double red;" />  

第五种:

  1. <hr style="height:5px;border:none;border-top:5px ridge green;" />  

第六种:

  1. <hr style="height:10px;border:none;border-top:10px groove skyblue;" />  

border-top:10px groove skyblue; groove 上颜色 skyblue 下颜色


只要hr样式用的好,会让你的网页活灵活现的哦!

版权声明:文章图片资源来源于网络,如有侵权,请留言删除!!!
admin
  • 本文由 发表于 2020年11月24日 14:58:01
  • 转载请务必保留本文链接:https://www.58pxe.com/6763.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: