À quoi cela ressemble-t-il d'implémenter le style fil d'Ariane en utilisant uniquement du code CSS sans utiliser d'image d'arrière-plan ?

Aucune image d'arrière-plan n'est utilisée, seul le code CSS est utilisé pour implémenter le style fil d'Ariane. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. ! !

Utilisez l'attribut CSS boder pour implémenter intelligemment les flèches. Le code html est le suivant :

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

Le code css est le suivant :

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

Apprentissage recommandé : "Tutoriel vidéo PHP"