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 ...
随机推荐
- 【LeetCode】207. Course Schedule (2 solutions)
Course Schedule There are a total of n courses you have to take, labeled from 0 to n - 1. Some cours ...
- syslog远程日志存储/514端口【转】
昨天在抓包的时候,发现在514端口,有SYSLOG字段的东西,不知道是用来干啥的,现在来分析一下: 其实他是在电脑间用了syslog远程日志存储,他用udp监控了514端口的数据流,之后收集整理日志: ...
- 重写Checkbox 改写选择框的大小
/* 作者:Starts_2000 * 日期:2009-07-30 * 网站:http://www.csharpwin.com CS 程序员之窗. * 你可以免费使用或修改以下代码,但请保留版权信息. ...
- Spring使用内存数据库
有时候为了做些测试需要创建数据库及相关表,安装MySQL等轻量数据库虽然简单但还是有点麻烦?而且用于自己临时测试的数据库对象一般不会被多次使用,还是浪费?内存数据库结合ORM可以很好解决这个问题. H ...
- 【Android】Android连接SQLite3数据库的操作
在前面使用SQLite3的时候,并没有留意到有SQLiteOpenHelper这个类,所以只好在Activity里面去创建和维护数据库跟数据表的创建. 但是,现在有了SQLiteOpenHelper这 ...
- ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三(MySQL) Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段
ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...
- Fragment使用具体解释
fragment是Google在3.0版本号中推出的新功能,如今已经增加到V4包中,假设要使用V4兼容包中的Fragment须要将Activity换成FragmentActivity,调用的getSu ...
- iphone 开发中使用zbar时遇到的几个典型问题解决方法。
iphone 开发中使用zbar时遇到的几个典型问题解决方法. 在近期的一个ios项目中使用到了一个二维码扫描库(Qrcode)--ZBar, 期间遇到2个问题. 1. zbar下载后使用其l ...
- centos中添加php扩展pdo_mysql步骤
本文内容是以 CentOS 为例,红帽系列的 Linux 方法应该都是如此,下面就详细说明步骤,在这里严重鄙视哪些内容??隆⑺档脑悠咴影说挠泄 PDO 编译安装的文章. 1.进入 PHP 的软件包 p ...
- struts2:在Action中使用Servlet的API,设置、读取各种内置对象的属性
有两种方式可以实现在Action中使用Servlet的API.一种是使用org.apache.struts2.ServletActionContext类,另一种是使用com.opensymphony. ...