不用背景图片，只用css代码实现面包屑样式，是什么样子的呢？

不用背景图片，只用css代码实现面包屑样式，有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助！！！

用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;
 }

推荐学习：《PHP视频教程》