CSS 绝对定位与相对定位

原创 2016年05月30日 16:07:30

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


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


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

但是,聪明如我怎么可以在我的第一个页面上屈服呢!于是在光明正大地看了其他网站类似效果的源码之后,我也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 相对/绝对(relative/absolute)定位系列(三)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1528 ...

CSS 相对|绝对(relative/absolute)定位系列(三)

css

CSS 相对定位和绝对位置

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它...
  • j20lin
  • j20lin
  • 2017年03月28日 16:53
  • 733

CSS教程:相对、绝对定位及布局和浮动

 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 如果将 ...

CSS 相对|绝对(relative/absolute)定位系列(一)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1287 一、有话...

CSS 相对/绝对(relative/absolute)定位系列(四)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1834 ...

CSS 相对|绝对定位 张鑫旭博客

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1287 ab...

CSS 相对/绝对(relative/absolute)定位系列(三)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1528 //...

CSS 相对|绝对(relative/absolute)定位系列(一)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1287 ...

CSS 相对/绝对(relative/absolute)定位系列(四)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1834 前三...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 绝对定位与相对定位
举报原因:
原因补充:

(最多只允许输入30个字)