资讯专栏INFORMATION COLUMN

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

Zachary / 2188人阅读

摘要:不过,因为一次问题需要,发现还是有需要多了解下的。方法好了,开始想办法解决上面的问题了。

缘起

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

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

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

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

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

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

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

方法

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

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

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

首先,基本结构:

Headling

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

Headling

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

.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: #ffffd; }
.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.ucloud.cn/yun/115147.html

相关文章

  • CSS标题线删除线贯穿线效果实现之一

    摘要:不过,因为一次问题需要,发现还是有需要多了解下的。方法好了,开始想办法解决上面的问题了。 缘起 其实看到这个问题,心里已经默默把代码已经码好了~,不就想下面这样嘛:JSBIN代码示例 嗯,是的,我们日常确实基本上就是用的这种方式,也没啥问题呀~,来个背景色定下位就欧拉欧拉的了。 不过,因为一次问题需要,发现还是有需要多了解下的。 来,请看下图,这个需求是这样子的,实现这样子的效果(可...

    isaced 评论0 收藏0
  • SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

    摘要:层叠即表示允许以多种方式来描述样式,一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用后,将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

    elliott_hu 评论0 收藏0
  • 前端基础入门一(HTML)

    摘要:所谓超文本,因为它可以加入图片声音动画多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。意思是超文本引用用于指定链接页面的打开方式,其取值有和两种,其中为默认值,为在新窗口中打开方式。 学习目标 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签 掌握三种列表标签 掌握表格标签 掌握表格标签 掌...

    张宪坤 评论0 收藏0

发表评论

0条评论

Zachary

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<