css 分割线样式_css实现文章分割线的多种方法总结

时间: 2018-04-09阅读: 4913标签: 样式

这篇文章整理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实现分隔线的多种方法详细讲解的详细内容 ,希望对大家的学习有所帮助。 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/601

关闭

CSS3 简单的砸金蛋样式

实现样式:1、鼠标移入后,鼠标样式图标变为“锤子”。2、用户砸金蛋,锤子简单的扬起效果。3、砸碎金蛋,显示内容

Vue之样式绑定

在前端开发中,设置元素的 class 列表和内联样式是基本要求。本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正。

为什么要初始化css样式?

为什么要初始化css样式1.浏览器差异:不同浏览器对有些标签的默认值是不同的,如果没对css初始化会出现浏览器之间的页面显示差异2.提高编码质量;如果不初始化,整个页面做完会很糟糕,重复的css样式很多

如何用js修改css样式?

如何用js修改css样式?下面本篇文章就来给大家介绍一下使用javascript修改css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

原生js获取、添加、修改_非行间css样式

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

css样式不起作用是什么原因?

在写页面时,有时会发现自己写的css样式无法生效,我们该如何排查css样式无法生效?常见的css样式不起作用的原因有哪些呢?下面我们就来看一下css样式不起作用的原因。

css对大小写敏感吗?

css指的是层叠样式表(Cascading Style Sheets),它是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言,是可以做到网页和内容进行分离的一种样式语言。

为什么css初始化中不推荐使用 *(通配符)

在进行css初始化的时候,因为我们图方便而使用了*{},为什么不推荐使用:这里我个人理解涉及到css权重问题,举例说明:

css样式的继承性、层叠性 、优先级

css样式的继承性:给父元素设置一些属性,子元素也可以使用。应用场景:一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量

css怎么去掉li前的默认点?

list-style这个属性就是控制<li></li>的列表项目标记,默认是实心点,相当于加上了list-style:disc;list-style-type属性用于设置列表项标记的类型。设置list-style-type:none就可将列表项 li 默认样式移除。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!