html竖直分割线怎样设定？html竖直分割线的代码解说
发布时间：09/01 来源：未知 浏览：
关键词：
PS：关于html水平分割线实现办法大家可以看看这篇文章：《html水平分割线如何设定？html水平分割线的代码示例讲解》
我们来直接进入html竖直分割线实现办法介绍
html中并没有直接的办法可以实现一个竖直分割线，所以我们就需要借助其他的办法来实现一个竖直的分割线，下面我们就来看看是什么办法能够实现垂直分割线的结果
第一种竖直分割线的实现办法：利用键盘上面的短线字符
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <span>内容</span>|<span>内容</span> </div> </body> </html>
结果如下：
说明：这种办法虽然简便利便但是并不克不及很好的操纵。
第二种竖直分割线的实现办法：利用border实现竖直分割线
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="width:200px;float:left;height:200px;">内容区域</div> <div style="border:1px solid ;float:left;height:200px;"></div><!--这个div模拟垂直分割线--> <div style="width:200px;float:left;height:200px;">内容区域</div> </body> </html>
结果如下：
第三种竖直分割线的实现办法：利用border和padding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1{
padding:12px 6px 200px 6px;
margin-left: 6px;
border-left: 1px solid;
font-size: 0;
}
</style>
</head>
<body>
<div>
<span>内容区域</span>
<span class="span1"></span>
<span>内容区域</span>
</div>
</body>
</html>结果如下：
说明：这里使用padding主如果可以调控竖线的高度。
第四种竖直分割线的实现办法：利用背景图片实现竖直分割线
这种办法可以随便选中不一样色彩，不一样类型的分割线；但是在调整图片大小，特别是宽度时，边沿会显现必然的锯齿的状况，并且，要调整图片的色彩还要换成其他的图片，不利于后期的调整。所以就不多说了，有感乐趣的伴侣可以本人试试。
本篇文章到这里就全部完毕了，更多其他出色内容大家可以关注百分百源码网html教程！！！
以上就是html竖直分割线怎样设定？html竖直分割线的代码讲解的具体内容，更多请关注百分百源码网其它相关文章！
