CSS定义HR水平线的样式介绍
程序员文章站
2022-04-25 16:35:46
...
CSS定义HR水平线的几种样式,不要小看了HR水平线哦,用好了会给你的网页增色不少,这一段代码分别定义了几种漂亮的HR样式及颜色,供你参考,如果喜欢,直接拷贝代码就用吧。
效果如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS定义HR水平线</title> <style type="text/css"> <!-- .hr0{ height:1px;border:none;border-top:1px dashed #0066CC;} .hr1{ height:1px;border:none;border-top:1px solid #555555;} .hr2{ height:3px;border:none;border-top:3px double red;} .hr3{ height:5px;border:none;border-top:5px ridge green;} .hr4{ height:10px;border:none;border-top:10px groove skyblue;} --> </style> </head> <body> <hr class="hr0" /> <hr class="hr1" /> <hr class="hr2" /> <hr class="hr3" /> <hr class="hr4" /> </body> </html>
以上就是CSS定义HR水平线的样式介绍的详细内容,更多请关注其它相关文章!