html浅灰分割线样式,css实现文章分割线样式的多种方法总结

这篇文章整理css如何实现文章分割线的多种方式，分割线在页面中可以起到美化作用，那么就来看看使用css实现分割线样式的多种方法。效果如下：

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

html:

小小分隔线单标签实现

css:

.demo_line_01{

padding: 0 20px 0;

margin: 20px 0;

line-height: 1px;

border-left: 190px solid #ddd;

border-right: 190px solid #ddd;

text-align: center;

}

优点：代码简洁

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

html:

小小分隔线巧用色实现

css:

.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实现分隔线：

html:

小小分隔线 inline-block实现

css:

.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;

}

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

html:

小小分隔线浮动来实现

css:

.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;

}

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

html:

———————————小小分隔线字符来实现————————————

css:

.demo_line_05{

letter-spacing: -1px;

color: #ddd;

}

.demo_line_05 span{

letter-spacing: 0;

color: #222;

margin:0 20px;

}

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

到此这篇关于css实现文章分割线样式的多种方法总结的文章就介绍到这了,更多相关css分割线样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

html浅灰分割线样式,css实现文章分割线样式的多种方法总结相关推荐

html怎么设置img样式,css默认样式 css中img默认样式问题
css a标签去掉默认样式是什么? 以下为css a标签去掉默认样式: a { text-decoration:none out-line: nonecolor: #*****;} 层叠样式表(英文全 ...
html5怎么删除样式,css怎么删除一个样式
css删除一个样式的方法:首先创建一个HTML示例文件:然后给div添加css样式:最后通过"removeClass()"方法从被选元素删除一个或多个类即可. 本教程操作环境:wi ...
php外边框样式,CSS中的边框样式
摘要: T S教学开发网批改老师:欧阳批改时间:2019-04-24 15:41:51 老师总结:完成的不错,可以把常用的样式,写到一个公用的文件,每次直接拿来用就可以了.继续加油.
html图片上下居中的源代码,厉害了我的哥,css图片居中原来有这么多种方法
图片的居中显示css有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如一般设置图片属性text-align:centre水平居中,但这个方法经常无效,很多前端攻程师都有研究过或者说是搜索 ...
css图片居中不好,厉害了我的哥,css图片居中原来有这么多种方法
图片的居中显示 css 有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如一般设置图片属性 text-align:center 水平居中,但这个方法经常无效,很多前端工程师都有研 ...
css 默认显示滚动条,css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...
php+jq+添加css,jquery设置内联样式css()
jquery设置内联样式css() 设置内联样式css() .box1 { width: 300px; height: 300px; background-color: wheat; position ...
php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式水果苹 ...
wordpress文章添加css样式,给WordPress文章循环加上CSS类方便实现各种页面布局
在做WordPress主题开发的时候,为了帮助实现布局,我们经常需要给网站存档页的文章循环加上一些CSS类,看一下下面的例子,我们需要实现一个每行4列的图片布局,我们使用左浮动的方式,给每张图片定义一 ...

html浅灰分割线样式,css实现文章分割线样式的多种方法总结

html浅灰分割线样式,css实现文章分割线样式的多种方法总结相关推荐

最新文章

热门文章