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 ...
随机推荐
- ios 中sqlite的用法
#import <sqlite3.h> @interface ViewController () { sqlite3 *_sqldb; } @end @implementation Vie ...
- ACM经验分享[转]
明确规则 规则:以最少的时间过题 (这意味着0ms与1000ms是一样的) 了解规则,善用规则 虽然这个题我不会但是AC是没有问题的 --ACRush 大力出奇迹 学会对拍数据,准备好对拍脚本:测试很 ...
- ng-file-upload结合springMVC使用
引入angular和ng-file-upload. 前端代码 Upload.upload({ url: 'upload', fields: {'username': 'zouroto'}, // ad ...
- 自动化安装smokeping-2.6.11脚本
自动化安装Smokeping-2.6.11脚本 一.目的 1.1 监控目的 为方便监测各数据中心网络状况,自定义全国各节点,从而发现网络异常,判断网络故障. 1.2 本文目的 快速部署Smokepin ...
- HDU 2208 唉,可爱的小朋友(DFS)
唉,可爱的小朋友 Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- 两段检验系统生成的identityHashCode是否重复的代码
前言:承接上一篇hashCode和identityHashCode 的关系,下面的两段简单的程序主要是检验一下系统生成的identityHashCode是否存在重复的情况. 1:可以自由控制生成对象的 ...
- mysql join left join区别
mysql默认的join是inner join,inner join 和 left join的区别看图:
- gtest测试代码编写思想
mockXXX类 . testXXX类 . mock method 1. mockXXX 类,通常使用继承测试目标类的方法,来方便针对目标类的测试提供部分扩展功能,比如为protected 成员添加g ...
- 【Qt】StackedWidget
一个简单的堆栈窗体类: 左側列表框会出现不同的选项,右側显示所选的不同的窗口 #include<QHBoxLayout> #include "stackdlg.h" S ...
- notepad++添加插件管理器
notepad++ 是一个很不错的文本编辑器,添加一些插件可以更好地使用. 首先需要使用插件管理器,最新版本的github地址是:https://github.com/bruderstein/nppp ...