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


Posted in HTML / CSS onApril 21, 2021

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

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

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

html:

<div class="line_01">小小分隔线 单标签实现</div>

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:

<div class="line_02"><span>小小分隔线 巧用色实现</span></div>

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:

<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>

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: 

<div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>

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:

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

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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 #HTML / CSS
CSS3鼠标悬浮过渡缩放效果
纯CSS实现hover图片pop-out弹出效果的实例代码
CSS3实现的文字弹出特效
Apr 16 #HTML / CSS
Html5新增了哪些功能
Apr 16 #HTML / CSS
Html5调用企业微信的实现
Apr 16 #HTML / CSS
CSS3 制作的图片滚动效果
You might like
php中的比较运算符详解
2013/10/28 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php检测url是否存在的方法
2015/04/14 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
JS中的三个循环小结
2017/06/20 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python实现折半查找和归并排序算法
2017/04/14 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python中的列表与元组的使用
2019/08/08 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
python搜索算法原理及实例讲解
2020/11/18 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
暑假实习求职信范文
2013/09/22 职场文书
智能电子应届生求职信
2013/11/10 职场文书
早读迟到检讨书
2014/01/24 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
法律六进活动方案
2014/03/13 职场文书
电子商务求职信
2014/06/15 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
实现GO语言对数组切片去重
2022/04/20 Golang