背景画像を使用せずに 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 ビデオ チュートリアル》