CSS标题线(删除线贯穿线效果)实现之一二

缘起

其实看到这个问题,心里已经默默把代码已经码好了~,不就想下面这样嘛:
JSBIN代码示例

嗯,是的,我们日常确实基本上就是用的这种方式,也没啥问题呀~,来个背景色定下位就欧拉欧拉的了。

不过,因为一次问题需要,发现还是有需要多了解下的。



来,请看下图,这个需求是这样子的,实现这样子的效果(可以先构思下实现代码,看下思路是不是差不多的呢?)

可以看到,这个线后面有背景图,随着屏幕尺寸渐宽时,会盖到背景图上,缩小时,则不会盖在背景图上,这就不能使用我们平常的填充背景色的写法了,只能另寻他路(想到有什么好的方法实现了么?)

所以这个问题是:因屏幕的伸展收缩会导致内容区所能容纳的内容不一,从而导致高度不一,各个元素也是随着屏幕时高时底,背景色的用法无法生效,有何好的解决办法?

当然,你有可能会说这是特例,可以直接上图,固然这种方式可以,但是,有很多这样的区块,难道就全部都直接上图么?肯定不行啦~,能懒就懒,如能找到一劳永逸的办法肯定比直接上图,结果发现弄完发现文案有问题,要改字就蛋疼了。

方法

好了,开始想办法解决上面的问题了。

先从float下手,两条线各浮动在两侧,其实我们可以理解为常见的网页三栏布局,可是问题是,不能定宽度呀,定了还怎么去自适应呢?所以这条pass

既然float不行了,那想想别的,这回就用position吧~开头的用法也是这种,不过是有背景色的而已,这回我们不许用背景色,看如何处理这个问题。

首先,基本结构:

<div class="title">
    <span class="caption">Headling</span>
</div>

我们可以用伪类:before:after来生成一些无关紧要的东西,不过为了能让大家看的清楚些,直接用标签了,
这是改进后的结构:

<div class="title">
    <span class="caption"><span class="line line-l"></span>Headling<span class="line line-r"></span></span>
</div>

接着给样式(答案就在里面噢):

.title { position: relative; z-index: 2; font-size: 16px; line-height: 24px; text-align: center; color: #999; overflow: hidden; }
.title .caption { position: relative; display: inline-block; }
.title .caption .line { position: absolute; top: 11px; width: 600px; height: 1px; background-color: #ddd; }
.title .caption .line-l { right: 100%; margin-right: 15px; }
.title .caption .line-r { left: 100%; margin-left: 15px; }

看了上面的样式有没看出些端倪呢?解释下这个实现细节:

  • 首先,将.caption设为行内框,相对定位
  • 接着,两根线的定位是被.caption所包含的,接着将它们推向它们各自的地方(left: 100%right: 100%),应该知道这100%是基于谁算的吧?(没错,就是第一步里的.caption,结果你应该猜到了?)
  • 最后再用margin-left/right隔出间隙,就满足了我们的需求啦

我们可以将.line的宽度设的超长,overflow掉即可,这样就可以做到自适应了,下面提个小问题:

用以上的方法,解决这个线的问题~

最后

这个问题还有别的解决方式,比如line-gradient这些~

参考

Line-On-Sides Headers

原文地址:https://www.cnblogs.com/homehtml/p/12642697.html

时间: 2024-09-30 06:26:15

CSS标题线(删除线贯穿线效果)实现之一二的相关文章

线上操作与线上问题排查实战

转自:https://mp.weixin.qq.com/s?__biz=MjM5ODYxMDA5OQ==&mid=2651960323&idx=1&sn=e04af14d2ebf939133869e0f18bb0dd1&chksm=bd2d01df8a5a88c98c3cb94a99334a16b372fd997f36bc757a38bb44b70d977797fa840064dc&mpshare=1&scene=23&srcid=0816Yl1Rl

双绞线的制作,T568A线序,T568B线序

双绞线的制作 1.1 实验目的 双绞线是组建局域网时常常使用的通信传输介质,通过本实验,让学生学会制作双绞线. 1.2 实验任务 (1)了解双绞线的特性及屏蔽与非屏蔽双绞线的区别. (2)了解EIA/TIA 568A标准和EIA/TIA 568B标准,掌握网线的线序. T568A线序: 1    2   3   4   5   6   7   8 绿白 绿 橙白 蓝 蓝白 橙 棕白 棕 T568B线序 : 1    2   3   4   5   6   7   8 橙白 橙 绿白 蓝 蓝白 绿

图形学--(中点画线法+Bresenham画线算法)

编程环境:codeblocks+EGE库 用到的函数:putpixel(int x1,int y1,int color)  用某种颜色打亮一个坐标点. 这俩种算法都是用来在计算机上画一条直线的,那么我们为什么不直接用直线方程分别带点再打亮呢,这是因为,计算机中每个坐标点都是整数,而直线是由一个个像素点组合而成的,那么,直接将坐标点再进行四舍五入整数化就好了啊,的确,这是一种方法,但计算机中进行浮点数的四舍五入会使运算效率变差,因此真正画直线时是用到上边这俩种方法的. 1.中点画线法 只考虑当直线

简单移动平均线、加权移动平均线、指数平滑移动平均

移动平均线的种类 移动平均线可分为"算术移动平均线"."加权移动平均线"."指数平滑移动平均线"三种. 1.算术移动平均线(MA) 算术移动平均线是简单而普遍的移动平均线.平均线是指算术平均数,计算方法为一组数字相加,除以该组数据的组成个数. 以5天移动平均线为便,计算方法如下: MA=(C1+C2+C3+C4+C5)/5 一般公式:MA=(C1+C2+C3+C4+C5+....+Cn)/n C:第一日收盘价 n:移动平均数周期 "移动

从线下走到线上,艺术品能否找到新突破口?

艺术品因其具有的收藏价值.文化价值.观赏价值以及不可复制性,让收藏者愿不远万里前去赴约,许以千金只求抱得珍品归.中国作为有五千年悠久历史的古国之一,前人留下的传世艺术品不计其数,艺术品交易需求不小,但是传统的线下艺术品交易方式存在着许多弊端. 传统线下艺术品交易,不管是画廊还是拍卖的形式都受到了地域和空间的限制,知名画廊或拍卖机构大多集中在一.二线城市,譬如北京著名的798艺术区,国内外消费者在购买艺术品时都要长途奔波,耗费购买之外的时间和费用.此外,由于线下画廊属于私下交易,成交价格保密,传统

CubieBoard开发板不用ttl线也不用hdmi线的安装方法

本文重点在于CubieBoard开发板系统的初始化安装,并且不用ttl和hdmi线,开机就可以远程ssh进系统.本文适合没有配线的同学参考操作.事实上,无论有没有ttl线,按照本文的方法安装效率都是一样的. ##需求条件 本地环境:Linux (我的是ubuntu11.04) 一个CubieBoard开发板 一个sd卡的读卡器 一个4G的SD卡 一个你已经确定好要安装的系统img文件,不是uboot而是完整的系统! 我选的安装包Linaro/Ubuntu custom server images

微寻,把“线下医院”带到“线上轻松问诊”

国内医生资源分布不均,造成人们看病难等问题,像北京.上海.广州等一线城市,医疗机构相对丰富均匀,方便当地人轻松看病,但对于以外的城市居民和城外乡民都很不利,生病了如果是小病,在当地找个医生就可以了,但如果是大病,也不得不去大医院治疗.还有,即使想要去大医院治疗,还要排队等待很久,并且不一定轮得到自己,这会造成患者病情严重,浪费人力物力财力等,对患者来说,是非常大的损失,那么,如何解决这些问题呢? 随着医疗健康越来越受国人关注,并在国家各种政策支持下,医疗技术.医疗服务.医疗设备等得到突飞猛进,为

allegro关于连上走线还是有飞线的问题

allegro关于连上走线还是有飞线的问题: 一般初学者都会遇到这样的问题,其实这是对allegro的操作习惯还不是很熟悉做造成的,在allegro中一般常见的操作过程是这样的: 1 先执行命令:2 在find面板里面勾选要操作的对象,在option面板里面设置操作的层面以及其他参数(视命令不同而不同),在visibility面板里面打开或关闭层面和对象 :3 点击对象,执行操作.另外如果需要连接的两个pin不在同一面,那是连不起来的,必须打via换层,连线的时候还要在option里面勾选sna

PCB走线之直角走线

PCB设计是一个复杂的过程,布线是极其重要的步骤,走线的好坏直接影响整块板子的性能,PCB走线的方式有很多种,下面就来说说其中的直角走线.直角走线是PCB走线方式中尽量要避免的,这也是衡量布线好坏的标准之一,直角走线会使传输线的线宽发生变化,造成阻抗不连续.其实不光是直角走线,顿角,锐角走线都可能会造成阻抗变化的情况. PCB直角走线的对信号的影响就是主要体现在三个方面:一.拐角可以等效为传输线上的容性负载,减缓上升时间:二.阻抗不连续会造成信号的反射:三.直角尖端产生的EMI.总的说来,PCB

数据中心光纤跳线:可转换极性LC跳线和MPO跳线

一条光链路的传输必须确保光纤的接收端和发射端处于互联状态,我们把从光纤链路的发送端到接收端的匹配称为极性.确保极性的准确是任何网络传输数据的基础,特别是在高速.高密度布线环境中显得尤为重要.如果极性出现错误,那么再去改变极性将会非常繁琐而浪费时间,现在为您介绍两种可以转换极性的光纤跳线:可转换极性LC光纤跳线和可转换极性MPO光纤跳线. 可转换极性LC光纤跳线 可转换极性LC光纤跳线通过uniboot设计,线缆部分采用双芯单管.一体尾套的设计,比普通LC双工光纤跳线更加紧凑和节省空间,有利于布线