关闭

CSS 绝对定位与相对定位

标签: css
55人阅读 评论(0) 收藏 举报
分类:

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


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


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

但是,聪明如我怎么可以在我的第一个页面上屈服呢!于是在光明正大地看了其他网站类似效果的源码之后,我也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





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1034次
    • 积分:42
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档