Een paar dagen geleden was ik de uitvoering van paneermeel in een website waar ik aan werk. broodkruimels niet gebruikt vaak, maar de meeste van de corporate websites zijn met paneermeel. In deze tutorial zal ik u leren hoe u nice schaalbare CSS Based paneermeel. Ik gebruik slechts een eenvoudige afbeelding. De rest is fundamenteel CSS styling met een ongeordende lijst als HTML-code.

Final Preview

Dit is wat we gaan doen vandaag. Bestand downloaden (12.1 kb)

HTML Structuur

Hier is onze HTML-code. Het is een eenvoudig geordende lijst:

 > <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 = "#"> Home </ a> </ li> <li> <a href = "#"> Algemene Lavel </ a> </ li> < li> <a href = "#"> Sub Lavel </ a> </ li> <li> <a href = "#"> Sub Sub Lavel </ a> </ li> <li> Uw huidige pagina </ li> </ ul> 

CSS Styling

Hier is eenvoudig css styling

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

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

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

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

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

Dit is de enige eenvoudige rechterbovenhoek pijl beeld, die ik gebruik in deze tutorial.

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

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

Eindresultaat

Hier is het eindresultaat

Conclusie

Pas deze tips om uw huidige en volgende projecten, en u zal zeker waardering voor de inspanningen.

Download het bronbestand

Als u wilt uw werk te controleren, kunt u downloaden van de rar-bestand voor deze tutorial.

cssbreadcrumbs.rar (12.1 kb)

Als u denkt dat tutorial kan meer beter, U kunt hier met ons deelt. Reactie ons

Als u wilt meer inspiratie van ons te ontvangen, kunt u overwegen een abonnement op onze feed met RSS of per e-mail.

Geplaatst onder: Css, Tutorials door admin