CSS 绝对定位与相对定位
2016-05-30 16:07
357 查看
前几天遇到了上班的第一个难题,项目想要实现这样的效果:
一开始我天真地以为只要设置边框加上圆圈的图片就可以了,然而按这种方法实际上实现的效果是这样的:
实际效果比视觉图上下多了两截。。。
但是,聪明如我怎么可以在我的第一个页面上屈服呢!于是在光明正大地看了其他网站类似效果的源码之后,我也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
一开始我天真地以为只要设置边框加上圆圈的图片就可以了,然而按这种方法实际上实现的效果是这样的:
实际效果比视觉图上下多了两截。。。
但是,聪明如我怎么可以在我的第一个页面上屈服呢!于是在光明正大地看了其他网站类似效果的源码之后,我也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
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''