请选择 进入手机版 | 继续访问电脑版
记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 5105|回复: 0
收起左侧

[HTML5/CSS3] CSS制作面包屑[含1P]

[复制链接]
发表于 2017-6-1 23:08:23 | 显示全部楼层 |阅读模式
面包屑是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



上一篇:[视频]纯CSS3腾讯QQ企鹅(附绘制过程)
下一篇:使用 CSS3 制作一组超时尚的动画按钮效果
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表