html竖直分割线如何设置？html竖直分割线的代码讲解

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

第三种竖直分割线的实现方法：利用border和padding

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!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>

效果如下：

2345截图20181031135550.png

说明：这里使用padding主要是可以调控竖线的高度。

第四种竖直分割线的实现方法：利用背景图片实现竖直分割线

这种方法可以随意选择不同颜色，不同类型的分割线；但是在调整图片大小，尤其是宽度时，边缘会出现一定的锯齿的情况，而且，要调整图片的颜色还要换成其他的图片，不利于后期的调整。所以就不多说了，有感兴趣的朋友可以自己试试。

本篇文章到这里就全部结束了，更多其他精彩内容大家可以关注php中文网html教程！！！

以上就是html竖直分割线如何设置？html竖直分割线的代码讲解的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

html竖直分割线如何设置？html竖直分割线的代码讲解

更多相关阅读请进入《竖直分割线》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...