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的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
PHP Array交叉表实现代码
2010/08/05 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
Python中random模块生成随机数详解
2016/03/10 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python如何操作mysql
2020/08/17 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
运动会入场词50字
2014/02/20 职场文书
供电工程专业求职信
2014/08/09 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
离婚协议书样本
2015/01/26 职场文书
团员年度个人总结
2015/02/26 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
python实现简单反弹球游戏
2021/04/12 Python
mysql死锁和分库分表问题详解
2021/04/16 MySQL
Python图像处理库PIL详细使用说明
2022/04/06 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android