css分割线使用教程(css实现文章分割线样式的多种方法总结)
类别:Web前端 浏览量:2878
时间:2021-10-26 11:42:27 css分割线使用教程
css实现文章分割线样式的多种方法总结这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法。效果如下:
方式一:单个标签实现分隔线:
html:
<li class="line_01">小小分隔线 单标签实现</li>
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:
<li class="line_02"><span>小小分隔线 巧用色实现</span></li>
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:
<li class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></li>
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:
<li class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></li>
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:
<li class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</li>
css:
.demo_line_05{ letter-spacing: -1px; color: #ddd; } .demo_line_05 span{ letter-spacing: 0; color: #222; margin:0 20px; }
优点:代码简洁 以上简单介绍了分隔线的写法,也许还有其它比较合适的写法,看环境各取所需吧!
到此这篇关于css实现文章分割线样式的多种方法总结的文章就介绍到这了,更多相关css分割线样式内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5div怎样居中(HTML5+CSS设置浮动却没有动反而在中间且错行的问题)
- css cursor鼠标效果
- 如何编写更好的CSS
- 哪些属性可以具体描述css盒模型(浅谈CSS中盒模型的理解)
- css圆角边框设置教程(css效果之边框内圆角)
- 加载页面执行css动画效果(纯CSS实现预加载动画效果)
- css的4个基础选择器(详解css常用选择器)
- Css Reset的作用
- CSS3动画属性animation
- 怎么用css3画椭圆(用CSS3画一个爱心)
- css用什么设置透明度(详解css透明度之rgba和opacity的区别及兼容)
- css中的margin属性(css布局之负margin妙用及其他实现)
- css3设置元素的边框图像(详解CSS3 用border写 空心三角箭头 两种写法)
- css3所有动画(CSS3常见动画的实现方式)
- CSS中的伪类与伪元素
- cssgrid普及情况(5分钟教你学会 CSS Grid 布局)
- 春节放假几天(春节放假几天2023法定几天)
- 今天 3月13日,31年前,一个英雄少年感动了中国(今天3月13日31年前)
- 你好,新成理人丨成都理工大学2019级新生开学典礼隆重举行(新成理人丨成都理工大学2019级新生开学典礼隆重举行)
- 这部民警编演的红色话剧,讲述了一个不断追寻的故事(这部民警编演的红色话剧)
- 日本菜有什么好吃(日本菜有什么好吃的做法)
- 韩国泡菜做法(韩国泡菜的做法步骤)
热门推荐
- mysql触发器语法规则(MySQL 触发器的使用及需要注意的地方)
- docker1.12.5容器假死(解决docker run后容器出现Exited 0情况的问题)
- python入门练习网页(详解python项目实战:模拟登陆CSDN)
- web.config自定义配置节点,将多个节点合并
- python中怎么查看函数的用法(Python中函数的基本定义与调用及内置函数详解)
- mysql 慢查询排查方法(MYSQL慢查询和日志实例讲解)
- jquery 淡入淡出
- linux telnet命令使用(Linux telnet命令的使用)
- mysql效率查询(MySQL 如何分析查询性能)
- uniapp 动态表单(详解uniapp无痛刷新token方法)