巧用CSS实现分隔线

下面是几种简单实现分隔线的方法，个人比较喜欢第二种，我也给出了最后第五种比较2的写法，请大家拍砖，或者提供其他好的方法。

单个标签实现分隔线：

点此查看实例展示

.demo_line_01{padding: 0 20px 0;margin: 20px 0;line-height: 1px;border-left: 200px solid #ddd;border-right: 200px solid #ddd;text-align: center;
}

优点：代码简洁

巧用背景色实现分隔线：

点此查看实例展示

.demo_line_02{height: 1px;border-top: 1px solid #ddd;text-align: center;
}
.demo_line_02 span{position: relative;top: -8px;background: #fff;padding: 0 20px;
}

优点：代码简洁，可自适应宽度

inline-block实现分隔线：

点此查看实例展示

.demo_line_03{width:600px;
}
.demo_line_03 b{background: #ddd;margin-top: 4px;display: inline-block;width: 180px;height: 1px;_overflow: hidden;vertical-align: middle;
}
.demo_line_03 span{display: inline-block;width: 220px;vertical-align: middle;
}

优点：文字可多行

浮动实现分隔线：

点此查看实例展示

.demo_line_04{width:600px;
}
.demo_line_04{overflow: hidden;_zoom: 1;
}
.demo_line_04 b{background: #ddd;margin-top: 8px;float: left;width: 26%;height: 1px;_overflow: hidden;
}

优点：NUN

利用字符实现分隔线：

点此查看实例展示

<div class="demo_line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>

.demo_line_05{letter-spacing: -1px;color: #ddd;
}
.demo_line_05 span{letter-spacing: 0;color: #222;margin:0 20px;
}

优点：以上只是简单例举了几个简单的分隔线方法，以后肯定还会有更加简单明了的方法，希望可以帮到大家。

代码简洁以上简单介绍了分隔线的写法，也许还有其它比较合适的写法，看环境各取所需吧！

前端知识学习交流158565420验证码：4

学习咨询q2189877100

巧用CSS实现分隔线相关推荐

CSS巧妙实现分隔线的几种方法
实际效果 1.单个标签实现分隔线 HTML部分代码如下所示 <div class="line_01">小小分隔线单标签实现</div> CSS部分代码如下 ...
html在直线中间添加文字,文字在线中间，CSS巧妙实现分隔线的几种方法
单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px so ...
文字在线中间，CSS巧妙实现分隔线的几种方法
单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px so ...
html水平分隔线样式,CSS生成漂亮的水平分隔线（horizontal rule）设计效果
HTML代码中,我们常常使用标签来生成水平分隔线,下面分享几款不同样式的水平分隔线相关CSS代码 /* 渐变 color1 - color2 - color1 */ hr.style-one { ...
css自适应华为手机屏幕大小,CSS实现自适应分隔线的N种方法
分割线是网页中比较常见的一类设计了,比如说知乎的更多回答这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了心想 ...
html分割线自动适应,CSS实现自适应分隔线的N种方法
CSS实现自适应分隔线的N种方法分割线是网页中比较常见的一类设计了, 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景 ...
巧用CSS的Border属性
. 作者:冯永曜来源:黄山村夫制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
html 垂直线代码,html – Bootstrap 3水平和垂直分隔线
你必须使用Bootstrap吗?这是一个基本的HTML / CSS示例,用于获取不使用任何Bootstrap的外观: HTML: Rich Media Ad Production Web Design ...
Bootstrap下拉菜单分隔线
下拉菜单分隔线在下拉菜单中,可以使用 class="divider" 的 <li> 空元素,在菜单项之间添加一条水平分隔线,用于将多个动作分组.如: <ul c ...

巧用CSS实现分隔线

单个标签实现分隔线：

巧用背景色实现分隔线：

inline-block实现分隔线：

浮动实现分隔线：

利用字符实现分隔线：

巧用CSS实现分隔线相关推荐

最新文章

热门文章