html中 <hr >的几种不同的语句及效果

最新推荐文章于 2022-03-09 14:57:17 发布
最新推荐文章于 2022-03-09 14:57:17 发布
阅读量1.1k 收藏 7
点赞数
分类专栏： web前端
HTML中基本的水平线<未完待续……>

1. HTML方法

<hr align="left" width="600px" color="#FF0000" size="15" />

2. CSS方法

<hr style="text-align:left;width:600px;background-color:#CC66CC;height:15px" />

HTML中水平分割线的九种特效

1. 右边渐变透明

<hr style="filter:alpha(opacity=100,finishopacity=0,style=1)" width="90%" color="#FF0000" size="5" />

或

<hr style="filter:alpha(opacity=100,finishopacity=0,style=1);width:600px;background-color:#FF0000;height:5px" />

本例使用了CSS的alpha滤镜。

2. 左边渐变透明

<hr style="filter:alpha(opacity=0,finishopacity=100,style=1)" width="90%" color="#FF0000" size="5" />

或

<hr style="filter:alpha(opacity=0,finishopacity=100,style=1);width:600px;background-color:#FF0000;height:5px" />

3. 纺锤形

<hr style="filter:alpha(opacity=100,finishopacity=0,style=2)" width="90%" color="#FF0000" size="20" />

或

<hr style="filter:alpha(opacity=100,finishopacity=0,style=2);width:600px;background-color:#FF0000;height:20px" />

4. 两头渐变透明

<hr style="filter:alpha(opacity=100,finishopacity=0,style=3)" width="90%" color="#FF0000" size="10" />

或

<hr style="filter:alpha(opacity=100,finishopacity=0,style=3);width:600px;background-color:#FF0000;height:10px" />

5. 虚线

<hr style="border:1px dashed #F00" width="90%" size="1" />

或

<hr style="border:1px dashed #F00;width:600px;height:1px" />

本例使用了CSS的border属性。

6. 双线

<hr style="border:3px double #F00" width="90%" size="3" />

或

<hr style="border:3px double #F00;width:600px;height:3px" />

7. 立体效果

<hr style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15)" color="#FF0000" width="90%" size="1" />

或

<hr style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15);width:580px;background-color:#FF0000;height:1px" />

本例使用了CSS的Shadow滤镜。

8. 钢针效果

<hr style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=10)" width="90%" color="#FF0000" size="1" />

或

<hr style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=10);width:580px;background-color:#FF0000;height:1px" />

本例使用了CSS的Glow滤镜。

9. 垂直分割线

<table border="0" cellpadding="0" cellspacing="0" width="1">
<tr><td height="100">
<hr style="border:1px dashed #F00" width="1" size="100" />
</td></tr>
</table>

或

<hr style="border:1px dashed #F00;width:1px;height:100px" />

注意：本例设置的是垂直虚线分割线。设置的<table>宽度（width）应该与<hr>标签设置的宽度一致；设置的<td>高度（height）应该与<hr />的size值一致。

**************************************************************************************************8

代码如下：

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>html中水平分割线的九种特效示例-baike369.com</title>  
  6. </head>  
  7.   
  8. <body>  
  9.   
  10. <h1>html中水平分割线的九种特效示例</h1>  
  11. <h2>基本的水平分割线</h2>  
  12. <p>1. html方法</p>  
  13. <hr align="left" width="500px" color="#FF0000" size="15" />  
  14. <p>2. CSS方法</p>  
  15. <hr style="text-align:left;width:500px;background-color:#C6C;height:15px" />  
  16. <h2>html中水平分割线的九种特效</h2>  
  17. <p>1. 右边渐变透明：</p>  
  18. <hr style="filter:alpha(opacity=100,finishopacity=0,style=1)" width="90%" color="#FF0000" size="5" />  
  19. <p>2. 左边渐变透明：</p>  
  20. <hr style="filter:alpha(opacity=0,finishopacity=100,style=1)" width="90%" color="#FF0000" size="5" />  
  21. <p>3. 纺锤形：</p>  
  22. <hr style="filter:alpha(opacity=100,finishopacity=0,style=2)" width="90%" color="#FF0000" size="20" />  
  23. <p>4. 两头渐变透明：</p>  
  24. <hr style="filter:alpha(opacity=100,finishopacity=0,style=3)" width="90%" color="#FF0000" size="10" />  
  25. <p>5. 虚线：</p>  
  26. <hr style="border:1px dashed #F00" width="90%" size="1" />  
  27. <p>6. 双线：</p>  
  28. <hr style="border:3px double #F00" width="90%" size="3" />  
  29. <p>7. 立体效果：</p>  
  30. <hr style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15)" color="#FF0000" width="90%" size="1" />  
  31. <p>8. 钢针效果：</p>  
  32. <hr style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=10)" width="90%" color="#FF0000" size="1" />  
  33. <p>9. 垂直分割线：</p>  
  34. <table border="0" cellpadding="0" cellspacing="0" width="1">  
  35. <tr><td height="100">  
  36. <hr style="border:1px dashed #F00" width="1" size="100" />  
  37. </td></tr>  
  38. </table>  
  39.   
  40. </body>  
  41. </html>  
Yuki_lovesprogamming
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html body标签详解与html常用的控制标记
09-28
9. `<strong>..</strong>`: 加强语句，文本加粗，表达重要性。 10. `..`: 强调文本，使文本倾斜，常用于表示强调。 11. `<address>..</address>`: 地址标签，文本会自动倾斜，用于展示联系信息。 12. `...
html HR分割线
米枔的博客
03-18 507
1、<HR> 2、<HR align=center width=300 color=#987cb9 SIZE=1> align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度 二、特效（效果并不是孤立的，可相互组合） 1、两头渐变透明： <HR style="FILTER: alpha(...
hr 奇妙的分割线
weixin_41897680的博客
02-13 2083
hr 奇妙的分割线
简单而有效的html画线代码“hr”实例！
jishublog
06-29 577
&lt;hr width=100% size=1 color=#bbbcbc style="FILTER: alpha(opacity=100,finishopacity=0)"&gt; 灰色 最基本的： &lt;hr width=300 size=1 color=#00ffff align=center noshade&gt; 其中 width 规定线条的长度，还可以是百分比；c...
html中各种hr样式
yanqianglifei的专栏
05-06 2万+
第一种 height:2px;是hr的高度 border:none;是没有边框 border-top:2px dotted #185598;是设置横线的样式 dotted 虚线#185598 颜色 --------------------------------------------------------------
定义HR的一些基本样式
Missyouzhang的专栏
04-02 1386
1、两头渐变透明：   --------------------------------------------------------------------------------   2、纺锤形：   --------------------------------------------------------------------------------   3
hr.zip_hr_java HR
最新发布
09-24
【标题】"hr.zip_hr_java"是一个以Java技术开发的人力资源（HR）管理系统的压缩包，它专注于提供基础的员工信息管理功能。这个系统可能是为小型企业或组织设计的，帮助他们有效地跟踪和管理人力资源数据。 【描述】...
HR系统源码
04-09
1. top.aspx、left.aspx、enter.aspx、top2.aspx、Default.aspx：这些都是ASP.NET中的Web页面文件，分别代表系统的不同部分，如顶部导航、左侧菜单、登录页面等。每个页面都有自己的HTML结构和服务器端代码，可以...
HTML文档简介
10-19
单标记如`<hr>`用于插入水平线，`<img>`用于插入图像，它们不需要成对出现。而双标记，如`<html>`、`<p>`、`<head>`、`<body>`、`<title>`等，则需要开始和结束标记来包围内容。在HTML中，标记的属性用于设置标记的...
[removed]void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
11-25
另外，如果你想在一个链接上打开新窗口，有以下几种方法： 1. 使用`window.open`函数： ```javascript <a href="javascript:void(0)" onclick="window.open('url')">新窗口链接</a> ``` 2. 自定义函数： ```...
如何改变hr标签的颜色
u012746918的博客
03-09 6144
<hr style='background-color:blue; height:1px; border:none;''/> hr标签是线条，其颜色要用background-color； 再给线条设置一个height，正常粗细就是1px，设置完后线条变粗； 那是因为hr有默认的border，需要将它的边框去掉，设为border:none 以上三点缺一不可 ...
css中如何设置hr的样式？css <hr>标签多种样式（图文）
lin123_00的博客
05-11 1万+
在对html网页进行美化的时候，肯定少不了要用的hr标签进行修饰页面，但默认的hr标签样式对页面的修饰起不到什么好的作用，有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作。那么如何在css中给hr标签设置样式呢？本章就给大家介绍css设置hr标签的几种样式。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 一、hr的是什么意思 简单来说，hr就是html页面上的一条水平分隔
html中的<hr>属性,HTML中的HR属性
weixin_35202718的博客
06-04 2441
1、size线段粗细的设定： 这是第一条线段，无size设定，取内定值SIZE=1来显示 这是第二条线段，SIZE=5 这是第三条线段，SIZE=10这是第一条线段，无size设定，取内定值SIZE=1来显示 这是第二条线段，SIZE=5 这是第三条线段，SIZE=102、width线段长度的设定： 这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示 这是第二条线段，WIDTH=5...
html hr渐变色,HTML HR color用法及代码示例
weixin_39979489的博客
06-16 1318
DOM HR color属性用于设置或返回元素的color属性的值。用法:它返回HR颜色属性。hrobject.color设置HR颜色属性。hrobject.color="value"属性值：color_name:它使用颜色名称保存文本颜色。例如：“red”。hex_number:它使用彩色十六进制代码保存文本颜色。例如：“#0000ff”。rgb_number:它使用rgb代码保存文本颜色。例如...
CSS三种漂亮的＜hr＞水平线样式
热门推荐
美奇软件开发工作室
03-11 4万+
hr.style-one {/*内嵌水平线*/width:80%;margin:0 auto;border: 0;height: 0;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.3);}hr.style-two {/*透明渐变水平线*/width:80%;margin...
html中hr标签有哪些属性,htmlhr标签的属性有哪些？HTMLhr标签的样式详解
weixin_32972053的博客
06-04 5210
html hr标签的属性有哪些？HTML hr标签的样式详解，本篇文章介绍了html中的hr标签的定义及其属性描述，还有关于html hr标签的样式使用的几种方法html中hr标签定义和用法： 标签在 HTML 页面中创建一条水平线。水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。HTML 标签实例：被水平线分隔的标题和段落：This is header 1This...
html5 <hr>,HTML中HR属性
weixin_39604598的博客
06-20 922
1、size线段粗细这是第一条线段，无size设定，取内定值SIZE=1来显示这是第二条线段，SIZE=5这是第三条线段，SIZE=10这是第一条线段，无size设定，取内定值SIZE=1来显示这是第二条线段，SIZE=5这是第三条线段，SIZE=102、width线段长度的设定：这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示这是第二条线段，WIDTH=50(点数方式)这是第三...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值