CSS实现:标题两侧画线效果
如图:

html代码:
<div class="detail-news">
<h5 class="detail-news-title">
<span>详细信息</span>
</h5>
</div>
css代码:
.detail-news-title{
font-size: 16px;
font-weight: normal;
text-align: center;
padding-top: 10px;
position: relative;
}
.detail-news-title::before{
content: "";
display: block;
width: 60vw;
height: 1px;
background: #333;
position: absolute;
left: 50%;
margin-left: -30vw;
top: 18px;
}
.detail-news-title span{
padding: 0 10px;
background: #fff;
position: relative;
z-index:;
}
CSS实现:标题两侧画线效果的更多相关文章
- css样式实现字体删除线效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- [游戏学习25] MFC 橡皮筋画线效果
>_<:这是给出窗口内外不同情况的处理展示的例子. >_<:MouseCap.h #include<afxwin.h> class CMyApp :public C ...
- 画线动画——SVG版和纯CSS版
概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...
- MFC画线功能总结
本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6216464.html MFC画线功能要点有二:其一,鼠标按下时记录初始位置为线的起始 ...
- WPF 画线动画效果实现
原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...
- 画线缩放、瞳距缩放、Line延长到指定长度,内附效果,源码供应,解压就跑
前言 公司项目需要做个画线缩放,我司称之为瞳距缩放,简而言之就是:2张图,从第一张图画一条线,再从第二个图画一条线,第二条线以第一条为基准,延长到一致的长度,并同比缩放图片:文字太枯燥,请先实例图 例 ...
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...
- Android中Path类的lineTo方法和quadTo方法画线的区别
转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...
随机推荐
- Redis-Redi事务注意事项
当客户端处于非事务状态下时, 所有发送给服务器端的命令都会立即被服务器执行.但是, 当客户端进入事务状态之后, 服务器在收到来自客户端的命令时, 不会立即执行命令, 而是将这些命令全部放进一个事务队列 ...
- fedora开机出现There is a problem with the configuration server. (/usr/libexec/gconf-sanity-check-2 exited with status 256)
Install problem!The configuration defaults for GNOME Power Manager have not been installed correctly ...
- Swift3 颜色转换成图片Image
Swift3下的转换写法: /// 将颜色转换为图片 /// /// - Parameter color: <#color description#> /// - Returns: < ...
- xshell连接centos vi编辑器不能使用小键盘
莫名其妙的本人的xshell,在vim编辑脚本的时候,右侧小键盘无法输出数字,输出的都是一些字母,而且还是一个字母占一行,太过艹蛋! 后来就按照正规的操作步骤,又重建了连接,居然发现正常了! 百思一虑 ...
- placement new 笔记
之前看到 偶尔用placement new 的用法,当分配内存频繁,而且对效率要求很高的情况下,可以先申请一块大内存,然后在此内存上构建对象,关键是可以自动调用其构造函数,否则要悲剧. 但是之后要自己 ...
- 自由是有代价的:聊聊这几年尝试的道路 要想生活好,别看哲学书和思想书。简单看看可以,看多了问题就大了。还是要去研究研究些具体的问题。别jb坐在屋子里,嘴里念着海子的诗,脑袋里想康德想的事情,兜里屁都没有,幻想自己是大国总理,去想影帝是怎么炼成的。
自由是有代价的:聊聊这几年尝试的道路 现在不愿意写过多的技术文章了,一点是现在做的技术比较偏,写出来看的人也不多,二来是家庭事务比较繁多,没以前那么有时间写了.最近,园子里多了一些写经历的文章,我也将 ...
- 使用ant优化android项目编译速度,提高工作效率
1.Android项目编译周期长,编译项目命令取消困难 2.在进行Android项目的编译的同时,Eclipse锁定工作区不能进行修改操作 3.在只进行资源文件的修改时,Eclipse对资源文件的修改 ...
- JavaSE入门学习20:Java面向对象之接口(interface)(一)
一Java接口 接口(英文:interface)是抽象方法和常量值的集合,在Java编程语言中是一个抽象类型,接口通常以interface来声 明.类是一种详细实现体.而接口定义了某一批类所须要遵守的 ...
- mysql存储过程批量向表插入数据
业务需要,往某个表中批量插入数据,使用存储过程插入 首先,要建立一张mysql表,表明为phone_number, 三个字段,id 自增,number 就是要插入的表格,is_used 表示十分已经使 ...
- 使用maven生成可执行的jar包
从pom的xsi中可以打开描述pom的schema: 可以看到pom中,project的结构: 默认的mvn install生成的jar是不带主类入口的,需要在maven-compile-plugin ...