html分割线样式,css在div里加一条分割线

　　本文梳理了css如何实现文章分割线的各种方式。分割线可以美化页面，下面我们来看看各种使用css实现分割线样式的方法。效果如下：

方式一：单个标签实现分隔线：

　　 html:

　　Class= line _ 01 小分频器/divcss的单标签实现：demo _ line _ 01 { padding:0 20px 0；边距：20px 0；行高：1px边框-左侧：190px solid # ddd右边框：190px solid # ddd文本对齐：居中；}优点：代码简洁

方式二、巧用背景色实现分隔线：

　　 html:

　　span小分割线是通过color /span/divcss实现的：demo _ line _ 02 { height:1px；border-top:1px solid # DDD；文本对齐：居中；} .demo_line_02 span{ position:相对；top:-8px；背景：# fff填充：0 20px}优点：代码简洁，能适应宽度。

方式三、inline-block实现分隔线：

　　 html:

　　 line _ 03 b/b span小分隔符的内嵌块的实现/spanb/b/divcss:demo _ line _ 03 { width:600 px；} .demo_line_03 b{背景：# dddmargin-top:4px；显示：内嵌-块；宽度：180px高度：1px_overflow:隐藏；垂直对齐：居中；} .demo _ line _ 03 span { display:inline-block；宽度：220px垂直对齐：居中；}

方式四、浮动实现分隔线：

　　 html:

　　span一个小分割线浮动实现/spanb/b/divcss:demo _ line _ 04 { width:600 px；} .demo_line_04{溢出：隐藏；_ zoom:1；} .demo_line_04 b{背景：# ddd边距-顶部：8px浮动：左；宽度：26%；高度：1px_overflow:隐藏；}

方式五、利用字符实现分隔线：

　　 html:

　　class= line _ 05 ——33543——3543———span小分隔符实现/span ——335434335333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333。demo_line_05{字母间距：-1px；颜色：# ddd} .demo_line_05 span{字母间距：0；颜色：# 222；边距：0 20px}优点：代码简洁。以上简单介绍了分割线的写法，可能还有其他合适的写法。我们根据环境各取所需吧！

　　以上就是本文关于css实现文章分割线样式的各种方法的总结。更多相关css分割线样式内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。