缘起

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

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

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


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

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

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

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

方法

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

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

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

首先,基本结构:

  1.  
    <div class="title">
  2.  
    <span class="caption">Headling</span>
  3.  
    </div>

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

  1.  
    <div class="title">
  2.  
    <span class="caption"><span class="line line-l"></span>Headling<span class="line line-r"></span></span>
  3.  
    </div>

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

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

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

  • 首先,将.caption设为行内框,相对定位

  • 接着,两根线的定位是被.caption所包含的,接着将它们推向它们各自的地方(left: 100%right: 100%),应该知道这100%是基于谁算的吧?(没错,就是第一步里的.caption,结果你应该猜到了?)

  • 最后再用margin-left/right隔出间隙,就满足了我们的需求啦

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

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

最后

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

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

  1. CSS 常见样式 特殊用法 贯穿线&徽章&箭头

    ### 贯穿渐变线,中间插值- 如图: > ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427200554843.png) ![在这里插入图片描述 ...

  2. CSS 常见样式 特殊用法 贯穿线&徽章&箭头

    贯穿渐变线,中间插值 如图: <h3 class="brief-modal-title"> <span>公告</span> </h3> ...

  3. altium6.x中自动删除重复走线的位置

    在protel 2004 DXP中,“自动删除走线”的位置就在"PCB Editor"的默认页面,非常好找. 但是升级到了altium 6.7,6.9之后,很多人就找不到这个了. ...

  4. iOS 删除黑色边框线导航栏&amp;删除搜索框的阴影边界线和中黑色文本输入框 - 解

    删除黑色边框线导航栏 in viewDidload: [self.navigationController.navigationBar setBackgroundImage:[[UIImage all ...

  5. 神奇的canvas——点与线绘制的绚丽动画效果

    代码地址如下:http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...

  6. Tableau绘制K线图、布林线、圆环图、雷达图

    Tableau绘制K线图.布林线.圆环图.雷达图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. K线图 1.1 导入数据源 1.2 拖拽字段 将[日期]托到列 ...

  7. OTG线与普通USB线的区别

    转自OTG线与普通USB线的区别 USB数据线是我们常见的设备,OTG线作为近年来随着手机行业的快速发展,逐步进入了我们的日常使用范围.OTG线与普通USB线的有什么区别?       USB数据线用 ...

  8. otg线是什么,otg线和数据线的区别介绍

    OTG是什么? OTG主要应用于各种不同的设备或移动设备间的联接,进行数据交换.USB技术的发展,使得PC和周边设备能够通过简单方式.适度的制造成本将各种数 据传输速度的设备连接在一起.上述我们的应用 ...

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

    双绞线的制作 1.1 实验目的 双绞线是组建局域网时常常使用的通信传输介质,通过本实验,让学生学会制作双绞线. 1.2 实验任务 (1)了解双绞线的特性及屏蔽与非屏蔽双绞线的区别. (2)了解EIA/ ...

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

    本文重点在于CubieBoard开发板系统的初始化安装,并且不用ttl和hdmi线,开机就可以远程ssh进系统.本文适合没有配线的同学参考操作.事实上,无论有没有ttl线,按照本文的方法安装效率都是一 ...

随机推荐

  1. Jenkins report 打开样式失败解决方案

    1.临时解决方案(重启Jenkins失效):在系统管理->脚本命令行: 执行: System.setProperty("hudson.model.DirectoryBrowserSup ...

  2. Codeforces 1138B Circus (构造方程+暴力)

    题意: 给你两个01串,要你选n/2个位置,使得选的位置在s1中"1"的数量等于未选的s2中"1"的数量 n<=5000,1s 思路: 设两个串中出现&q ...

  3. 怎么理解Laravel的核心架构

    使用过larave框架的朋友都知道laravel框架里面除了提供一些基本的功能(如控制器.视图.模型)之外,还有中间件.门面.契约等,这些东西是如何在laravel框架运用起来的呢?今天就和大家详聊一 ...

  4. 如何在 Linux 中找出 CPU 占用高的进程

    1) 怎样使用 top 命令找出 Linux 中 CPU 占用高的进程 在所有监控 Linux 系统性能的工具中,Linux 的 top 命令是最好的也是最知名的一个.top 命令提供了 Linux ...

  5. Winfrom 减少控件重绘闪烁的方法

    Winform控件的双缓冲.控件的双缓冲属性是隐藏的,可以通过反射改变其属性值. lv.GetType().GetProperty("DoubleBuffered", Bindin ...

  6. 【C#】写文件时如何去掉编码前缀

    我们都知道,文件有不同的编码,例如我们常用的中文编码有:UTF8.GK2312 等. Windows 操作系统中,新建的文件会在起始部分加入几个字符的前缀,来识别编码. 例如,新建文本文件,写入单词 ...

  7. html基本介绍,了解html与css,html语法和结构

    一般来说,制作自己第一个网页通常书写的文字是"hello world!你好,全世界",代码如下展示: <!DOCTYPE html> <html lang=&qu ...

  8. SAP S4HANA如何取到采购订单ITEM里的'条件'选项卡里的条件类型值?

    SAP S4HANA如何取到采购订单ITEM里的'条件'选项卡里的条件类型值? 最近在准备一个采购订单行项目的增强的function spec.其中有一段逻辑是取到采购订单行项目条件里某个指定的条件类 ...

  9. 常见Linux命令学习

    Linux命令学习 命令分类: 文件处理命令 权限管理命令 文件搜索命令 帮助命令 用户管理命令 压缩解压命令 网络命令 关机重启命令 1.文件处理命令 命令格式:命令 [-选项] [参数] 例:ls ...

  10. Mysql 字符串转数字类型

    使用场景: 在数据库中进行数字比较,但是数字的存储格式是varchar的时候可以使用以下方法进行转换,然后进行比较 方法一:SELECT CAST('123' AS SIGNED); 方法二:SELE ...