内容简介:文字两侧加横线的需求你遇到过吗?在参与的项目中我遇到过这种需求,总结了一下,目前分为两种:一,文字所在的背景是纯色,单一颜色;二,文字所在背景是花色,或者是背景图片
文字两侧加横线的需求你遇到过吗?在参与的项目中我遇到过这种需求,总结了一下,目前分为两种:
一,文字所在的背景是纯色,单一颜色;
二,文字所在背景是花色,或者是背景图片
给你一些时间,思考一下:
脑海闪过了什么?定位,浮动,背景图片,伪元素。。。还是大脑一片空白?
条条大路通罗马,相信给你足够的时间,静静的坐在开着空调的房间里,你会得到自己的实现方法。
先看第一种,背景纯色的实现方案。
用的一个方法是用一个空的标签,来写这条横线。当然也可以用背景图,切一个中间透明,两边白条的图片。也可以使用伪元素。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
实现
针对这种需求,目前只想到伪元素实现,如果您有更好的方法,欢迎留言。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Hadoop小文件解决方案-基于文件整合的解决方案
- Hadoop小文件解决方案-基于NameNode内存和MapReduce性能解决方案
- 10 种跨域解决方案(附终极方案)
- React 服务端渲染方案完美的解决方案
- 跨域解决方案
- 异步解决方案---promise
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
以匠心,致设计:网易 UEDC 用户体验设计
网易用户体验设计中心 / 电子工业出版社 / 2018-8 / 95.00元
为什么网易云音乐的体验流畅细腻、富有温度?为什么网易严选App的UI设计让人感到温馨、舒适?为什么网易蜗牛读书App的界面设计让用户爱不释手…… 《以匠心,致设计:网易 UEDC 用户体验设计》是网易用户体验设计团队对自身过去的设计思考的精心总结,最大程度还原了网易产品背后的设计故事,内容涵盖设计基础、设计实践、方法思考、成长指南四章,借助网易产品设计的实际案例具体讲述了设计师日常工作中不可......一起来看看 《以匠心,致设计:网易 UEDC 用户体验设计》 这本书的介绍吧!