css 横线中间添加文字
<style>
.demo_line_01 {
width: 200px;/*这指的是文字的宽度*/
padding: 0 20px 0;
margin: 20px auto;
line-height: 1px;
border-left: 200px solid #ddd;
border-right: 200px solid #ddd;
text-align: center;
}
.demo_line_02 {
width:100%;/*这指的是整个行的宽度*/
margin:0 auto;
height: 1px;
border-top: 1px solid #ddd;
text-align: center;
}
.demo_line_02 span {
position: relative;
top: -10px;
background: #666;/*背景可改为白色*/
padding: 0 20px;
}
</style>
</head>
<body>
<div class="demo_line_01">分割线 </div>
<div class="demo_line_02"><span>分割线</span></div>
</body>
css 横线中间添加文字的更多相关文章
- 用css实现在横线中间插入文字
在一些登录或者注册界面中常常可看到,一个大框框上面的横线中有插入文字,大概示意图如下: 这种现象其实是相对位置作用的结果,可以通过相对定位,是某元素恰好出现在div的边框上. position: re ...
- three.js添加文字
添加文字需要用到fontLoader,测试貌似只能异步.在success中回调. 对于中文字体,需要将ttf格式转换为json格式或者是js格式之后才能使用,不过一般转换之后的文件比较大.建议使用Fo ...
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- css超出一行添加省略号属性:text-overflow和white-space
通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 不同CSS布局实现与文字鼠标选择的可用性——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的 ...
- CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...
- css伪类实现文字两侧划线效果
css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...
- C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9
视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...
随机推荐
- 使用cros实现跨域请求
直接上代码 后端 this.Response.Headers.Add("Access-Control-Allow-Origin","*"); 响应流里添加一个h ...
- MySQL-group-replication 配置
MySQL-Group-Replication 是mysql-5.7.17版本开发出来的新特性:它在master-slave 之间实现了强一致性, 但是就目前来说主要是性能不太好. [1]确定当前的m ...
- Laravel 手动分页实现
Laravel 手动分页实现 基于5.2版本 在开发过程中有这么一种情况,你请求Java api获取信息,由于信息较多,需要分页显示.Laravel官方提供了一个简单的方式paginate($perP ...
- CCNA2.0笔记_VTP
VTP(VLAN Trunking Protocol) 一个能够宣告VLAN配置信息的信息系统: 通过一个共有的管理域,维持VLAN配置信息的一致性: VTP只能在trunk端口发送要宣告的信息: 二 ...
- JavaScript学习日志(2)
javascript数据类型: 字符串string.数字number.未定义Undefined.空Null.布尔Boolean.数组Array.对象Object.javascript对象: 对象由花括 ...
- strncmp----c++库函数
某天,蒜头君和花椰妹在公园里散步,走着走着,我的天!他们各自都捡到了一串漂亮的字符串,然而蒜头君好奇心比较重,他想知道自己的字符串在花椰妹的字符串中出现了多少次,例如花椰妹的字符串为abababa,蒜 ...
- 作为一个Linux/Unix程序员有哪些要求
C程序开发: 熟悉数据库sql语言: 熟练掌握C语言(面向过程的),掌握C++(面向对象的) 工程管理工具:make,会写Makefile 熟悉IBM DB2.Informix.Sysbase.SQL ...
- Qt之模式、非模式对话框
关于“模式”和“非模式”对话框,相信大家都比较熟悉,但其中有一个可能很多人都比较陌生,介于两者之间的状态,我们称之为“半模式“. 模式对话框 描述 阻塞同一应用程序中其它可视窗口输入的对话框.模式对话 ...
- P3P解决cookie跨域
P3P是什么 P3P(Platform for Privacy Preferences)是W3C公布的一项隐私保护推荐标准,以为用户提供隐私保护. P3P标准的构想是:Web 站点的隐私策略应该告 ...
- phpcms 初次建站心得
最近要给客户建个网站,考虑到效率问题,直接找了个开源的phpcms,(现在被收购了,以前的时候我还知道是个开源的).由于对这个东西不熟悉,原来就是了解一些,php的建站系统,php的MVC框架.故此, ...