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 绘制BMW logo实的现代码
Apr 25 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 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 常用时间函数资料整理
2016/10/22 PHP
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
python实现目录树生成示例
2014/03/28 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python字符串的拼接方法总结
2019/11/18 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Python网页解析器使用实例详解
2020/05/30 Python
Python爬虫教程知识点总结
2020/10/19 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
大学英语专业求职信
2014/06/21 职场文书
爱国主义电影观后感
2015/06/18 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL