网页中竖线的几种做法

Q:网页中竖线的几种做法
A:1、用水平线做:
一般水平线的是宽长高短
<hr width="10"size="10" color=#000000>,做竖线我们可以反过来宽短高长,,怎么样?竖线出来了吧?不过这个做法我发现好象有个BUG,就是高只能显示100px的,你设的再高也没用!
2、用表格做:
(1) 代码如下:

<table width="1" border="1" bordercolor="#000000" height="1000" frame=rhs>
<tr>
<td style="border:none"></td>
</tr>
</table>

做法:先做出细线表格,然后……用frame可以控制表格只显示一边的线条,左右上下四条线随便控制。想想,表格已经是细线表格了,现在我只要控制它显示一条边[这里我控制的是显示右边的线条],这样竖线就出来了!是不是?容易吧?
(2) 代码如下:

<table width="1" height=1000 border="0">
<tr>
<td width="1" bgcolor="#000000"><img src=empty width="1" height="1"></td>
</tr>
</table>

这个做法也简单,把背景色设置一下,宽设1px,高度就随便你控制啦~注意表格中间的填充!
(3) 定义表格的背景色,再改表格的width,height,然后去掉其中的&nbsp。
A:制作一个1×1px的透明图片将其插入。
B:在td中加入<spacer type=block height=1>或<spacer type=block width=1>
3、用层做:
这是最简单的做法,做一个层,层的背景色是你要的竖线颜色,宽度是1px,长度随你!

<div id="Layer1" style="position:absolute; width:1px; height:200px; z-index:1; background-color: #000000;layer-background-color: #000000; border: 1px none #000000; left: 143px; top: 263px"></div>
elementUI竖线出现多余的情况是由于在切换tab后,el_table的固定列下方多了一条线。在代码,可以通过调整循环的条件来解决这个问题。根据引用和引用的代码片段来看,需要对循环变量进行修正。循环变量j和i的初始值应该为0,循环条件应该是小于数据长度。修正后的代码如下: for (var j = 0; j < res.data.data[i].groups.length; j++) {} for (var i = 0; i < res.data.data.length; i++) {} 通过这样的修正,可以确保循环在正确的范围内进行,避免出现多余的竖线。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [解决elementUI 切换tab后 el_table 固定列下方多了一条线问题](https://download.csdn.net/download/weixin_38713057/12924957)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vueelementUI的tree组件的使用(加线条加自定义图标)](https://blog.csdn.net/weixin_42552124/article/details/112040218)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值