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 ...
随机推荐
- 电子商务(电销)平台中商品模块(Product)数据库设计明细（转载）
电子商务(电销)平台中商品模块(Product)数据库设计明细 以下是自己在电子商务系统设计中的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 商品表 (product)|-- 自 ...
- Memcached 测试
Memcached set 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果set的key已经存在,该命令可以更新该key所对应的原来的数据,也就是实现更新的作用. 语法: s ...
- sklearn 中模型保存的两种方法
一. sklearn中提供了高效的模型持久化模块joblib,将模型保存至硬盘. from sklearn.externals import joblib #lr是一个LogisticRegressi ...
- pdo连接mysql操作方法
PDO常用方法: PDO::query()主要用于有记录结果返回的操作(PDOStatement),特别是select操作. PDO::exec()主要是针对没有结果集合返回的操作.如insert,u ...
- 远程调试 Weinre
什么是远程调试? 说白了,就是可以通过PC端[F12开发者工具]查看并调试移动端的页面内容,如html.css.js.Network资源等. 重要的事情说三遍:weinre所占有的端口不需要和监听页面 ...
- mybatis开发流程，增删改查
一.开发流程 1)引jar包 //mybatis_core mybatis3.4core\asm-5.2.jar mybatis3.4core\cglib-.jar mybatis3.4core\co ...
- Java小型知识点
1. API 1.1 byte[].File.InputStream 互相转换 1.将File.FileInputStream 转换为byte数组: File file = new File(&quo ...
- Atitit.atiJsBridge 新特性v7q329
Atitit.atiJsBridge 新特性v7q329 atiJsBridge 未来计划 Postdata 图像上传的支持 Simp param计划 p1 p2 p3 p4 $method 的si ...
- [Android]Volley源代码分析(叁)Network
假设各位看官细致看过我之前的文章,实际上Network这块的仅仅是点小功能的补充.我们来看下NetworkDispatcher的核心处理逻辑: <span style="font-si ...
- struts-tiles学习笔记
网上搜了一些,稀里糊涂的,要么是代码不全,要么是版本不对,还是去struts官网大概学习了一下 http://struts.apache.org/development/1.x/struts-tile ...