(非原创)
先看第一种,背景纯色的实现方案。
用的一个方法是用一个空的标签,来写这条横线。当然也可以用背景图,切一个中间透明,两边白条的图片。也可以使用伪元素。before after前后夹击。
在背景为图片的时候使用了伪元素这种方法,个人感觉伪元素这个东西真的是太强大了。
废话不说上代码:
HTML:
<div class="onpure_bg">
<h2 class="onpure">
<span class="onpure_title">标题在此</span>
</h2>
<span class="line"></span>
</div>
CSS:
/*纯背景实现原理代码*/
.onpure_bg{
background: #ccc;
width: 700px;
height: 400px;
margin:0 auto;
background-size: cover;
position: relative;
}
.onpure{
position: absolute;
top: 70px;
left:50%;
width: 150px;
margin-left: -75px;
margin-top: 50px;
z-index: 1
}
.onpure_title{
/*关键点:设置和背景颜色一样的颜色。*/
background:#ccc;
padding:0px 20px;
}
.line{
display: inline-block;
width: 500px;
height: 0px;
border: 2px solid #fff;
position: absolute;
top:130px;
left: 50%;
margin-left: -250px;
}
代码解析:
把标题和线条定位左右居中,上下靠上部分,用z-index将文字层级放置线条上方,在给标题使用和背景色一样的背景色。padding设置左右值撑开空隙。
It is so easy!
再来看背景为图片的实现方法,很显然,上边的方法取了个巧,利用背景色一致看不出差别。换成一张有复杂的背景图案的图片,这种方法就失效,我们借助 伪元素来实现。
代码
HTML
<div class="onimg_bg">
<h2 class="onimg">
<span class="onimg_title">标题在此</span>
</h2>
</div>
CSS
/*背景图片实现原理代码*/
.onimg_bg{
background: none no-repeat;
width: 700px;
height: 400px;
margin:0 auto;
background-size: cover;
position: relative;
margin-bottom: 20px;
}
.onimg{
position: absolute;
top: 70px;
left:50%;
width: 600px;
margin-left: -300px;
text-align: center;
}
/*伪元素实现*/
.onimg_title:before{
display: inline-block;
position: relative;
top:-7px;
right: 20px;
content: "";
width: 200px;
height: 0px;
border: 2px solid #fff;
}
.onimg_title:after{
display: inline-block;
position: relative;
top:-7px;
left: 20px;
content: "";
width: 200px;
color: #fff;
height: 0px;
border: 2px solid #fff;
}
伪元素这种方法,也很简单,刚遇到的时候也是纠结了一会儿,有时候是思路的问题,想到这个方法,问题就迎刃而解了。
代码解析:
需要注意的是使用伪元素content属性必不可少,然后给伪元素块级化,就可以像设置正常的元素一样设置你想要的样式了,在这里设置了一个没有高度,宽200px的长条,通过border控制高;
也可以通过设置背景图片background: none no-repeat,代替border实现
相关推荐
本文实例为大家分享了Android实现文字下方加横线的具体代码,供大家参考,具体内容如下 public class WhiteTextviewWithWhiteBottomLine extends LinearLayout { private Context mContext; public ...
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
办公自动化WPS 2019 基础课程WPS文字-加下横线.mp4
文字居中,横线两端排列
horizontal 横线(分割线 break 打断,换行 ※div span 标签:起到一个包裹作用,将网页分开布局,没有任何语义化 div是一个块级标签,可以设置其大小 span是一个行内元素,不能设置其大小,限定于内容的元素...
在编辑Word文档时,常需要在文档中添加页眉页脚,但此时Word会自动在文字下方加一条横线。
选中横线所在的上下行,直接delete 全选文章,点击段落,选择无框线,如果删不掉,就一直回车,等横线到页眉位置再删 取消此项应用: 选项–>校对–>自动更正选项–>自动套用格式:取消“连字符替换为长划线”...
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式。... 中间文字,两边横线 <span class=line></span> <style> .header { width:400px; height:36px; line-height:3
TextBox控件显示为一条横线,真正的定义样式实现效果,可以直接使用样式
编辑框加横线
word页眉中的横线如何去掉
.NET 中横线样式的TextBox控件
来源:Licence:MIT作者:huligongying 简单的一个类实现UILabel 的上划线、下划线和中划线,可以设置画线类型和颜色。
tab切换并且底部横线跟随点击选中目标滑动。
实用上横线二级网页导航条 推荐下载 素材
替换原来圆点的样式,改为短横线,使界面更加美观,也可以自定义样式
在网上原有的继承于UGUI的Text基础上根据正则表达式找出表情标记文本替换为表情图片并实现序列帧动画的基础上扩展了下划线和超链接功能,跟UGUI的下划线和超链接功能一样
横线报警指标LineAlarm.ex4