用<hr/>实现横线竖线的简便问题

最新推荐文章于 2024-08-02 16:43:33 发布
最新推荐文章于 2024-08-02 16:43:33 发布
阅读量1.1w 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： ADO
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gongth_12/article/details/8215643
该博客展示了如何利用HTML的<hr>标签结合不同的样式属性，如宽度、边框、颜色和位置，来创建各种线条效果，包括横线、竖线、渐变线条以及带有透明度和风格的线条。通过这些实例，读者可以了解到如何利用简单的HTML和CSS实现丰富的视觉效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

<body bgcolor="#000000">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:100;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:150;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:200;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:250;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:300;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:350;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:400;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:450;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:500;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:550;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:600;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:650;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:700;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:750;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:800;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:850;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:900;">

 

 

 

<br><br><br><br><br><br><br><br><br><br><br><br>
<hr size="10" color="#000080" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">
<br><br>
<hr size="10" color="#ffccff" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">
<br><br>
<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">
<br><br>
<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">
<br><br>
<hr style="color:ffff00;height:10;border:3 solid #000000">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee'); WIDTH: 100%;HEIGHT: 8px" >
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd'); WIDTH: 100%;HEIGHT: 18px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88'); WIDTH: 100%;HEIGHT: 18px">

 

vue 竖线写法并去附最后一个竖线
周家大小姐
07-08 2780
<ul class="indicators"> <li v-for="(li, idx) in item.dataList" :key="idx"> <div class="name">{{ li.title }}</div> <div class="number">{{ li.number }}</div> //去除最后一个竖线 ..
DBGridEh大全
jian704的专栏
09-01 1万+
查看完全版本：dbgrid应用全书论坛跳转到...╋名狐堂├名狐介绍├名狐讲座╋技术论坛├VFP 论坛├DELPHI├CGI、ASP、JAVA论坛├LINUX 论坛├dot NET论坛├其它语言C,C++,PB,VB╋专题技术├VFP + SQL Server├类的应用、VFP调用API├企业管理与软件╋情感论坛├情感
HTML <hr> 标签
ssisse的博客
06-23 2448
HTML 标签 定义和用法 标签在 HTML 页面中创建一条水平线。 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 HTML 与 XHTML 之间的差异 在 HTML 中， 标签没有结束标签。 在 XHTML 中， 必须被正确地关闭，比如 。 在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用。 在 XHTML
html HR分割线
米枔的博客
03-18 597
1、<HR> 2、<HR align=center width=300 color=#987cb9 SIZE=1> align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度 二、特效（效果并不是孤立的，可相互组合） 1、两头渐变透明： <HR style="FILTER: alpha(...
利用css画横线或竖线
热门推荐
南宫凌萱的博客
06-14 1万+
横线： 利用css画横线，可以简单的使用标签实现，但是如果要实现左右渐变的效果的话，则需要多费一点功夫了，以下有个简单例子： html代码：（这里使用.是为了让其有值可以显示不为空，也可改为其他值，该值显示在横线中间） .css代码： .er-theme .line{ position:relative; text-align:center; } .er-theme .l
dbgrid使用大全(delphi)
beyondqd的专栏
08-25 1万+
<br /> <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;}
DBGrid 应用全书
zch619
12-08 3027
   在 Delphi 语言的数据库编程中，DBGrid 是显示数据的主要手段之一。但是 DBGrid 缺省的外观未免显得单调和缺乏创意。其实，我们完全可以在我们的程序中通过编程来达到美化DBGrid 外观的目的。通过编程，我们可以改变 DBGrid 的表头、网格、网格线的前景色和背景色，以及相关的字体的大小和风格。    以下的示例程序演示了对 DBGrid 各属性的设置，使 Delphi 显示
html hr线的样式
xyjikl
08-02 8599
一、基本线条 二、特效（效果并不是孤立的，可相互组合） 1、两头渐变透明： HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3> 2、纺锤形： HR style="FILTER: alpha(opa
HTML基础（三）---- hr水平线
Lzs1998的博客
02-28 4711
hr标签 1.定义和用法： &lt;hr/&gt;标签在HTML页面中创建一条水平线。 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 2.有水平线肯定就有竖线，下面就是生成竖线的方法： &lt;hr style="height: 100px;width: 4px; border-color: red;" /&gt; 接下来讲讲生成...
css画线 横线竖线
qq_23111247的博客
05-22 416
<div class=' ' ></div> 横线： .link-top { position: absolute; width: 100%; // 长度 border-top: solid #eeeeee 1px; // 宽度 颜色 类型 } 竖线： .link-mid { position: absol...
html hr 垂直居中,常见的CSS水平垂直居中设置
weixin_35900383的博客
06-17 2026
让内容上下居中在布局时是经常写的，下面写了常见的4中上下居中方式，复制代码查看效果css代码*{margin: 0;padding: 0;}body{padding:10px 50px;}.parent{width: 400px;height: 200px;background: #b99eff;}.child{width: 150px;height: 100px;background: #db6...
怎样插入竖直线
tykw163的专栏
05-11 1764
我们都知道用 可以插入一条水平线，但如何插入一条竖直线呢？　　我们既可以利用插入表格的方法，也可以利用 的方法。　　先看看用 方法插入竖直线。建立一个表格，然后在某一单元格内插入一条水平线，然后将此线选中，单击鼠标右键，选择“水平线属性”命令，将其宽度设为1个像素，高度为100像素，一条高为100像素的垂直线就出来了。　　如果想要更长的线，只将高度设大是没用的，不信你试试，设
网页制作技巧
八步赶蝉
07-18 759
1.带背景网页 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;..
换行与水平线标签
2303_76711142的博客
08-02 281
标签用于在文档中插入水平线，通常用于分隔内容部分。水平线默认呈现为一个水平的、浅灰色的线条，可以通过 CSS 进行自定义。用于分别在文档中插入换行和水平线。这两个标签都是自闭合标签，不需要结束标签。
如何在网页中加入一条竖线
刘军龙
12-21 1万+
HTML没有直接写竖线的专用标记，使用来做竖线有局限性，所以竖线只能通过表格table来实现。有2种方法可以写竖线，你可任选一种，例如要高90像素的竖线：1.代码如：内容效果如： 内容 2.代码如：内容效果如：
HTML基础知识点一
407指导员
10-07 319
H系列标签（标题) 1.H1-H6给文本添加标题语义，被其包括后内容会独占一行。 2.在企业开发中慎用H系列标签。一般情况下，一个界面只能出现一个H1标签。（与SEO有关） P标签 1.段落标签独占一行。 hr标签 格式：< hr/> 斜杠写不写均可 浏览器上显示一条分割线，独占一行。 img标签 不会独占一行。 src属性 图片的位置 相对路径：从.html所在文件夹开始寻找。不能跨盘符 上级：图片在html文件上级目录时(父亲目录时)，采用…/4.jpg形式，…/就是父目录的意思。
怎么在html花一条竖线,怎样在网页中画一条竖线？
weixin_42517503的博客
06-03 3451
hr横线：竖线：table控制:横线有很多方法1.用VMLv\:*{Behavior:url(#default#VML)}2.用表格css 竖线的写法sdfsdf用样式表最方便，代码简洁，可以统一整个网站的风格。.td2 { border: solid; margin-top: 2px; margin-right: 2px;margin-bottom: 2px; margin-left...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程</title> <style> table { font-family:"TrebuchetMS",Arial,Helvetica,sans-serif; width:18%; border-collapse:collapse; } table td,th { font-size:1em; border:0px solid#98bf21; padding:10px 10px 20px 10px; } table th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:10px; } </style> </head> <body> <table id="customers"> <tr><th></th><th></th><th></th></tr> <tr> <td>八神</td> <td>驿马</td> <td></td> </tr> <tr> <td>乙</td> <td>九星</td> <td>丙</td> </tr> <tr> <td></td> <td>八门</td> <td>庚</td> </tr> </table> </body> </html>这是一个无纵横线的表格，怎么加上外边框？
最新发布
03-18
### 如何在HTML中为一个没有纵横线的表格设置外边框 要在HTML中为一个没有纵横线的表格添加外边框，可以通过CSS样式实现。具体方法是在`<table>`标签中应用`style`属性或者通过外部或内部CSS定义样式。以下是详细的说明： #### 设置表格外边框的方法 1. **使用`border`属性** 可以为`<table>`标签直接添加`style="border: value;"`来设定外边框宽度、样式和颜色。例如： ```html <table style="border: 2px solid black;"> <tr> <td>单元格1</td> <td>单元格2</td> </tr> <tr> <td>单元格3</td> <td>单元格4</td> </tr> </table> ``` 2. **移除内部线条并仅保留外边框** 如果希望表格只有外边框而无内部纵横线，则需额外设置`border-collapse`属性为`collapse`，并将单元格之间的边界隐藏。代码示例如下： ```html <table style="border: 2px solid black; border-collapse: collapse;"> <tr> <td style="border: none;">单元格1</td> <td style="border: none;">单元格2</td> </tr> <tr> <td style="border: none;">单元格3</td> <td style="border: none;">单元格4</td> </tr> </table> ``` 上述代码实现了只在外围显示边框的效果[^1]。 #### CSS样式的扩展功能 除了简单的外边框之外，还可以进一步调整表格的整体外观。例如，可以结合其他CSS属性优化视觉效果，如字体大小、颜色以及背景色等。以下是一个综合实例： ```html <table style="border: 2px solid blue; border-collapse: collapse; font-family: Arial, sans-serif; color: darkblue; background-color: lightyellow;"> <tr> <td style="border: none; padding: 10px;">数据A</td> <td style="border: none; padding: 10px;">数据B</td> </tr> <tr> <td style="border: none; padding: 10px;">数据C</td> <td style="border: none; padding: 10px;">数据D</td> </tr> </table> ``` 此代码不仅设置了蓝色外边框，还指定了字体族、文字颜色及背景颜色，并利用了填充(padding)增加可读性[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值