CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS制作面包屑

CSS制作面包屑

面包屑是Web中常见的一个元件,今天@逆天使用上原始的CSS配合一定的标签制作了一款兼容多浏览器的面包屑案例,感兴趣的可以看看。


HTML CODE
<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 CODE
.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;
}


DEMO:http://www.w3cplus.com/demo/css3/breadcrumb/index.html
下载:breadcrumb.zip

【CSS制作面包屑】相关文章

1. CSS制作面包屑

2. CSS制作水平垂直居中对齐

3. 使用CSS制作APPLE WATCH刻度盘动画效果

4. 如何用HTML5 Canvas制作子画面动画

5. HTML5的绝活:巧用Canvas制作会动的时钟

6. CSS制造出光泽一闪而过的图片效果

7. 利用CSS3制作动画效果

8. 用css3制作纸张效果

9. 利用CSS3制作动画效果

10. CSS3制作的分页导航

本文来源:https://www.51html5.com/a929.html

点击展开全部

﹝CSS制作面包屑﹞相关内容

「CSS制作面包屑」相关专题

其它栏目

也许您还喜欢