CSS标题线（删除线贯穿线效果）实现之一二

isaced 发布于2019-08-01 15:09 / 1460人阅读

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

缘起

其实看到这个问题，心里已经默默把代码已经码好了~，不就想下面这样嘛：
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

GPU云服务器云服务器删除线阿里云云服务器双十二折扣[标签:标题] css效果删除线怎么打html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49799.html

CSS标题线（删除线贯穿线效果）实现之一二

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

Zachary 2019-08-30 12:53 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

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

elliott_hu 2019-08-29 13:56 评论0 收藏0
前端基础入门一（HTML）

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

张宪坤 2019-08-02 14:08 评论0 收藏0