HTML的垂直线

  HTML的水平线标签是hr但是没有垂直线的标签,但是html的左右分隔时候垂直线有时候也是需要到的.自然对于div来说设置右边框或者左边框即可,但是想要一条独立的线却是无能为力.

 上网查找了很多的方法基本都是讲水平线的width设置1px高度设置到适应高度这样做却是没问题,但是不是我想要的,然后偶然想起自己做的项目中有一个页面是用div来做的左右垂直线,设置div的宽度为1px;高度为适应高度,再设置div的背景图片为1个像素的点即可.代码如下

<style>
	.vertical-line {
		background: url("blogDesign/img/line.png");
		width: 1px;
		height: 1000px;
	}
</style>
<div class="vertical-line"></div>

这样就能产生一条垂直的'线'了.美中不足的是这条线太单薄了.适当为其添加阴影效果

-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;
box-shadow: 1px 1px 1px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000');

这样垂直线基本就完成了.

实际上,垂直线的高度有时候并不是确定的,需要适应div的高度,没找到css的解决办法另其height:100%也会突出父div只能暂且使用js帮助解决

js代码如下(导入了jquery)

$(document).ready(function(){
	var verticalLine = $(".vertical-line");
	var height = $(".row-fluid").height();
	verticalLine.css("height", height);
});

不是完美的解决方案,先这样解决另寻更佳方案.

效果图