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中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 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设计模式 注册表模式
2012/02/05 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
js 表格隔行颜色
2009/12/02 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
js倒计时显示实例
2016/12/11 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
Python多线程实例教程
2014/09/06 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
使用python为mysql实现restful接口
2018/01/05 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
python实现批量转换图片为黑白
2020/06/16 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
企划主管岗位职责
2013/12/12 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python