Il ya quelques jours j'ai été mise en œuvre de la chapelure dans un site web, je suis en train. chapelure n'utilisez pas souvent, mais la plupart des sites Web des entreprises utilisent la chapelure. En cela, je tutoriel va vous apprendre comment créer de jolis évolutive CSS Based chapelure. J'utilise un seul graphique simple. Le reste est basique style CSS avec une liste non ordonnée comme du code HTML.

Final Preview

C'est ce que nous allés faire aujourd'hui. Télécharger le fichier (12.1 ko)

Structure HTML

Voici notre code HTML. C'est une liste non-ordonnée simple:

 > <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > Main Lavel </a> </li> <li> <a href = "#" > Sub Lavel </a> </li> <li> <a href = "#" > Sub sub Lavel </a> </li> <li> Your Current page </li> </ul> <ul id = "breadcrumbs"> <li> <a href = "#"> Accueil </ a> </ li> <li> href <a "#" => Main Lavel </ a> </ li> < li> <a href = "#"> Sous Lavel </ a> </ li> <li> href <a "#" => Sous sous Lavel </ a> </ li> <li> votre page actuelle </ li> </ ul> 

CSS Styling

Voici feuilles de style CSS simple

  body ( 
  / 1 .13em "verdana" , arial, tahoma, sans-serif ; police: 0 ,69 em / 1 .13 em "Verdana", Arial, Tahoma, sans-serif;  
  ; background: # fff; 
  ) 

  ul, li ( 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
  ) 

  # breadcrumbs ( 
  ; Hauteur: 2 .7 em; 
  #c9c9c9 ; border: 1px solid # C9C9C9; 
  ) 

  # chapelure li ( 
  float: left; 
  ; line-height: 2 .7 em; 
  ; color: # 777; 
  ; padding-left: .85 em; 
  ) 

 background : url ( breadcrums .jpg ) no-repeat right center ;         display :block ;         padding : 0 15px 0 0 ; } chapelure # li a (background: url (Breadcrums. jpg) no-repeat center right; display: block; padding: 0 15px 0 0;) 

C'est le seul coin de l'image de droite simple flèche, qui est que je suis en utilisant dans ce tutoriel.

 , #breadcrumbs li a :visited { color : # 777 ;         text-decoration :none ; } chapelure # li a: link, # chapelure li a: visited (color: # 777; text-decoration: none;) 

  , a: link, a: visited,  
  , chapelure # li a: hover, 
  { # chapelure li a: focus ( 
  color: # 222 
  ) 

Résultat final

Voici le résultat final

Conclusion

Appliquez ces conseils pour vos projets en cours et la prochaine, et vous apprécierez sûrement les efforts.

Télécharger le fichier source

Si vous souhaitez vérifier votre travail, vous mai télécharger le fichier rar pour ce tutoriel.

cssbreadcrumbs.rar (12.1 ko)

Si vous pensez que tutoriel peut être plus mieux, S'il vous plaît partagez avec nous. Commentaire nous

Si vous souhaitez recevoir plus d'inspiration de nous, s'il vous plaît inscrivez-vous à notre flux par RSS ou par e-mail.

Classé sous: Css, Tutoriels par admin