CSS 绝对定位与相对定位

前几天遇到了上班的第一个难题，项目想要实现这样的效果：

一开始我天真地以为只要设置边框加上圆圈的图片就可以了，然而按这种方法实际上实现的效果是这样的：

实际效果比视觉图上下多了两截。。。

但是，聪明如我怎么可以在我的第一个页面上屈服呢！于是在光明正大地看了其他网站类似效果的源码之后，我也get到了这个技能！

原来这里是用到障眼法，分别画出两个细成一条线的div，分别为.border-first和.border-last。（这里需要了解绝对定位和相对定位）

然后调整这两条线（两个div）到合适的位置，这里为了方便观察，线条设置为红色，效果是这样的：

最后，只要将线条设置为白色就大功告成咯~

如果觉得黑色圈圈很丑也可以用图片替换，再改改文字样式就perfect了~

代码演示在这里：https://jsfiddle.net/chenjunxia/8bmLz95n/

在该过程中参考的资料有：

http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html

http://blog.sina.com.cn/s/blog_93a6a0c30101fshd.html

CSS 绝对定位与相对定位相关推荐

css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
css绝对定位与相对定位结合使用
css绝对定位与相对定位结合使用 1.绝对定位与相对定位绝对定位使元素的位置与文档流无关,因此不占据空间.这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普 ...
css 绝对定位和相对定位
绝对定位绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占据空间. 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素.如果当前需要被定位的元素没 ...
css绝对定位和相对定位实例。
先写一段简单代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
CSS绝对定位和相对定位
绝对定位和相对定位(可以直接看总结) 1. 概念 2. 例子 3. 总结 4. 常用前言: 一直觉得位置放的对就行了,放不对的top bottom和left right乱调,调对了却不知道为什么 ...
CSS——绝对定位与相对定位
文章目录前言一.什么是定位? 二.常用的四种定位方法 1.相对定位 2.绝对定位 3.固定定位 4.粘滞定位总结前言本文主要介绍了CSS中常用的四种定位方法一.什么是定位? 定位是一种更加 ...
CSS绝对定位和相对定位的百分比计算以及宽高计算
参考文章:relative 和 absolute 元素的百分比定位.CSS进阶--绝对定位元素的宽高是如何定义的一.设置top.right.bottom.left的值为百分比如果没有设置top.r ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...

CSS 绝对定位与相对定位

CSS 绝对定位与相对定位相关推荐

最新文章

热门文章