在公司做一个关于面包屑的项目时发现用图片实现需要用图片来解决,但是图片加载很慢,就上网查了一下一般实现的方法,自己总结了一下,实现的方法也是主要用css的boder的属性来巧妙的实现箭头,html代码如下:
<ul class="breadCrumb">
<li><a href="">首页<span class="arrow"></span></a></li>
<li><a href="" class="old">关于我们<span class="arrow"></span></a></li>
<li><a href="">联系我们<span class="arrow"></span></a></li>
<li><a href="" class="old">在线留言<span class="arrow"></span></a></li>
<li><a href="">首页</a></li>
</ul>
css代码如下:
<style type="text/css">
* {
margin:0;
padding:0;
}
.breadCrumb {
width:600px;
height:30px;
background:#cccccc;
list-style:none;
line-height:30px;
}
.breadCrumb li {
float:left;
}
.breadCrumb a {
text-decoration:none;
padding:0 20px 0 10px;
position:relative;
float:left;
}
.breadCrumb a span {
position: absolute;
display: block;
line-height: 0px;
height: 0px;
width: 0px;
right: 0px;
top: 0px;
border-left: 10px solid #CCCCCC;
border-top: 15px solid #e9e9e9;
border-bottom: 15px solid #e9e9e9;
}
.breadCrumb a.old {
background:#e9e9e9;
}
.breadCrumb a.old span {
border-left: 10px solid #e9e9e9;
border-right: none;
border-top: 15px solid #cccccc;
border-bottom: 15px solid #cccccc;
}
运行效果如下:
分享到:
相关推荐
css代码添加背景图片常用代码
html+css 实现面包屑导航,无js 效果
HTML、CSS代码实现的发票样式的模板
css3面包屑导航 css3面包屑导航代码下载.zip
CSS3扁平化面包屑导航源代码.
利用CSS3制作的扁平化面包屑导航,是学习SCSS的好教材。
代码简介:CSS3扁平化面包屑导航是一款纯CSS3实现的网站导航,鼠标移到导航上高亮显示。
CSS3圆形风格面包屑导航是一款圆形修边可伸缩的CSS3网站导航。
今天我们来分享一款基于Bootstrap的CSS3面包屑菜单,面包屑菜单导航可以嵌入到网站中,可以帮助用户进行网站各级目录之间的跳转。这款面包屑菜单的色彩沿用了bootstrap的风格,十分清新自然,并且利用CSS3特性,让...
CSS代码实现背景透明而文字不透明,兼容支持火狐、360、谷歌、IE6-IE11等浏览器
纯CSS代码实现的图片列表滚动,就像有些网站的图片友情链接的功能一样,有拖动条哦,采用CSS实现类似框架的效果,好处是对搜索引擎友好,并非使用了框架,实现方法推敲一下,部分图片实现了透明效果。
面包屑菜单一般贯穿整个网站,可以很清晰地描述访客的当前层级目录,让用户更清楚地了解网站各个频道之间的关系。这款CSS3面包屑菜单十分精巧,它采用了扁平化设计,让...该CSS3面包屑菜单的箭头也是用纯CSS3代码实现。
下面是两个纯CSS 面包屑导航栏实现代码,在网上找了一些方法但觉得都不合适唯独这两个纯css的就差不多了,下面一聚小编来给大家整理一下。 方法一, 说明:本方法使用CSS3,无图片,兼容各种webkit系浏览器,...
纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar
纯css3实现各种图形样式是一款纯css3样式属性制作各种图形图标样式代码。
纯CSS兼容各浏览器的面包屑导航 修改方便
让我们来实现它! 呈现光泽图片 下面就是这张Addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些。 注意:左边的那张是纯白色的,所以看不到,两张图在CSS代码中都要用到。 HTML代码 制作这种...
模仿苹果导航条效果,背景图片大小适中适合导航文字宽度
CSS3实现的点击图片下方按钮,文字的背景会出现切换效果