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 相关文章推荐
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
Python中join和split用法实例
2015/04/14 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
numpy中索引和切片详解
2017/12/15 Python
python异常触发及自定义异常类解析
2019/08/06 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python之yield和Generator深入解析
2019/09/18 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
软件毕业生个人鉴定
2014/03/03 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA