网站首页网站地图google地图百度地图学习库RSS在线PSPS联盟素材下载  PS视频教程专题 PS爱好者教程网www.psahz.com PS教程自学网QQ群

网页制作实用教程,用CSS创建扁平化面包屑导航(2)

时间:2015-05-12 11:46 来源:教程资料 作者:网页制作实用教程 阅读:

这一段原始代码使得列表每项呈现为蓝色矩形。文本放置在中央,每一边都有间隔和相同的内边距。添加 position:relative; 使得那些绝对定位的元素能够相对这一父元素显示。

第三步

网页制作实用教程,用CSS创建扁平化面包屑导航

1 2 3 4 5 6 7 #crumbs ul li a:after { content:"";   border-top:40pxsolid red; border-bottom:40pxsolid red; border-left:40pxsolid blue; position:absolute;right:-40px;top:0; }

现在我们来用CSS创建原本只能用背景图片才能实现的雪佛龙样式。使用 :after  选择器创建一个额外的元素,通过各种CSS边框属性形成一个三角形。在demo中,你能够看到通过应用边框属性中的top和bottom交叉重叠实现一个单独的蓝色三角形。他们现在被标记为红色用作示范,但只要将这些改成tansparent(透明)就能够输出一个蓝色三角形。通过绝对定位这些效果就能够很好实现。

第四步

网页制作实用教程,用CSS创建扁平化面包屑导航

1 2 3 border-top:40pxsolid transparent; border-bottom:40pxsolid transparent; border-left:40pxsolid#3498db;

使用正确的颜色我们得到了我们想要的形状,面包屑链接实现了流行的雪佛龙形状!!

第五步

网页制作实用教程,用CSS创建扁平化面包屑导航

1 2 3 4 5 6 7 #crumbs ul li a:before { content:"";   border-top:40pxsolid transparent; border-bottom:40pxsolid transparent; border-left:40pxsolid#d4f2ff; position:absolute;left:0;top:0; }

PS笔刷下载 PS滤镜下载 PS形状下载 PS样式下载 PS动作下载 PS图案下载
相关教程