Wie sieht es aus, den Breadcrumb-Stil nur mit CSS-Code und ohne Verwendung eines Hintergrundbilds zu implementieren?

Es wird kein Hintergrundbild verwendet, sondern nur CSS-Code. Es hat einen gewissen Referenzwert. Ich hoffe, es wird für alle hilfreich sein. ! !

Verwenden Sie das CSS-Boder-Attribut, um Pfeile geschickt zu implementieren. Der HTML-Code lautet wie folgt:

<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>

Der CSS-Code lautet wie folgt:

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

Empfohlenes Lernen: „PHP-Video-Tutorial“