CSS制作面包屑
作者:大漠 日期:2013-03-18 点击:2308
特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
面包屑是Web中常见的一个元件,早前在《CSS3制作Breadcrumbs》和案例《css3面包屑设计》使用CSS3制作了各式各样的面包屑效果,今天@逆天使用上原始的CSS配合一定的标签制作了一款兼容多浏览器的面包屑案例,感兴趣的可以看看:
HTML
<ul class="clearfix"> <li>面包屑一<em></em><i></i></li> <li class="current">面包屑二<em></em><i></i></li> <li>面包屑二<em></em><i></i></li> </ul>
CSS
.demo{ width:600px; margin:100px auto; background:#f0f0f0; height:32px; overflow:hidden; line-height:32px; position:relative; } .demo li{ float:left; width:200px; text-align:center; position:relative; z-index:2; font-weight:bold; font-size:14px; } .demo li em{ position:absolute; right:-24px; top:-8px; width:0; height:0; line-height:0; border-width:24px 0 24px 24px; border-color:transparent transparent transparent #fff; border-style:dashed dashed dashed solid; } .demo li i{ position:absolute; right:-16px; top:0; width:0; height:0; line-height:0; border-width:16px 0 16px 16px; border-color:transparent transparent transparent #f0f0f0; border-style:dashed dashed dashed solid; } .demo li.current{ background:#f60; color:#fff; z-index:1; } .demo li.current i{ border-color:transparent transparent transparent #f60; }
如需转载,烦请注明出处:http://www.w3cplus.com/demo/css-create-breadcrumb.html
Nike Phantom Vision DF FG