html页分割线最简单的实现方式

最新推荐文章于 2024-10-09 17:29:29 发布

对明天的期待丶

最新推荐文章于 2024-10-09 17:29:29 发布

阅读量1.1w

点赞数 4

文章标签：分割线

本文链接：https://blog.csdn.net/qq_39429962/article/details/83064647

版权

我们在写前台页的时候一般会碰到需要实现两个快中间加一条竖线，这样会使得页面分布更加清晰，下面就来说一说我的分割线的实现方式，设置一个div并给他设置宽高，然后设置其边框的颜色和宽度。

竖向分割线：

<body>
	<div style="width:200px;height:200px;background-color:#f0f0f0;float:left;"></div>
	<div style="width:2px;height:200px;border-left:1px solid #ccc;float:left;margin-left:15px;"></div>
	<div style="width:200px;height:200px;background-color:#ccc;float:left;margin-left:15px;"></div>
</body>

效果图：

横向分割线:

<body>
	<div style="width:200px;height:200px;background-color:#f0f0f0;"></div>
	<div style="height:2px;width:200px;border-top:1px solid #ccc;float:left;margin-top:15px;"></div>
	<div style="width:200px;height:200px;background-color:#ccc;margin-top:30px;"></div>
</body>

效果图：