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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 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
模仿OSO的论坛(三)
2006/10/09 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
javascript测试题练习代码
2012/10/10 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
python基础教程之匿名函数lambda
2017/01/17 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
django主动抛出403异常的方法详解
2019/01/04 Python
详解Python:面向对象编程
2019/04/10 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
经管应届生求职信
2013/11/17 职场文书
应聘自荐信
2013/12/14 职场文书
交通事故和解协议书
2014/09/25 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
怎么写工作检讨书
2014/11/16 职场文书
外出听课学习心得体会
2016/01/15 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL