您好，欢迎来到[码蚁之家]阅读室  笑话大全  编程问答  问答大全  移民之家  娱乐之家  范文之家  源码下载  电子书籍  软件下载  专题

• 首 页
• jrs看球网直播吧
• 低调看直播体育app软件下载
• 低调看体育直播
• 数据库jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• 设计jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• 操作系统
• 网站运营
• 手机学院
• 开网店jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• 软件jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• 信息工程

我感觉做前端的人玩神马找找看，找不同之类的游戏肯定牛X，毕竟整天面对着代码调bug，分析不同类型的代码在不同的浏览器实现的不同效果…呵呵，啰嗦了。你应该看到不一样的地方了。
上面想要实现的效果就是，左边的块要压在右边的块上面，来实现整体的块元素之间的衔接工作。看到这里，我知道您在思考什么，z-index是不是？难道不是，你也想到透明了？那么说明你已经领悟到css三角形的真谛了。

三、border变形记之分步导航效果（火箭组装法）
电视中大家都看到过火箭，以及类火箭形物体。今天我这里讲的技术就是火箭组装是非常不可能的，我要讲的是类似火箭的组装来实现纯css分布导航效果。
大家都知道火箭由最下面的发动机+推进器，中间燃料箱发送机，头上是卫星整流罩等等…大概这么个情况。ok，看我下面的结构

看到了上面的图解之后你肯定应该知道自己该干神马了，我们只需要给中间的块一个固定的值，然后左右两边的形状采用相对于中间的块绝对定位就可以了。既然知道了原理，那么就开始行动吧。

CSS Code复制内容到剪贴板

1. <>"text/css">   
2. #step{margin:50px;font-size:16px;color:#fff;letter-spacing:0.5em;}   
3. #step a{width:100px;height:30px;background:#9BBB38;text-align:center;display:inline-block;line-height:30px;position:relative;margin-right:20px;}   
4. #step a s{width:0px;height:0px;border:15px solid #9BBB38;border-left-color: transparent; _border-left-color: snow; _filter: chroma(color=snow);font-size:0;line-height:0;position:absolute;left:-30px;top:0px;}   
5. #step a b{width:0px;height:0px;border:15px solid #fff;border-left-color:#9BBB38;font-size:0;line-height:0;position:absolute;top:0px;rightright:-30px;}   
6. #step .first{border-left-color:#9BBB38}   
7. #step .last{border-color:#9BBB38;rightright:-15px;}   
8. #step .on{background:#E58712;}   
9. #step .on s{border:15px solid #E58712;border-left-color: transparent; _border-left-color: snow; _filter: chroma(color=snow);}   
10. #step .on b{border-left-color:#E58712;}   
11.   
12. <>"step">   
13.  <>"first">注册   
14.  <>"on">登录   
15.  下单   
16.  付款<>"last">   
17.   

如果看到这里你仍旧在问怎么实现神马的巴拉巴拉…那么我只能告诉你：跪求的话我也不告诉你。你只有自己去实践，并且掌握的知识才能是自己的，所以自己去参照上面代码写一个效果，你绝对不虚此览。

相关图片

相关文章