Et par dager siden var jeg implementere brødsmuler i en nettside jeg jobber på. breadcrumbs ikke bruker ofte, men de fleste websider bruker brødrasp. I denne opplæringen jeg vil lære deg hvordan du kan lage fine skalerbare CSS Basert Brødsmuler. Jeg bruker bare en enkel grafikk. Resten er grunnleggende CSS med en ikke-sorterte liste som HTML-kode.

Final Forhåndsvisning

Dette er hva vi borte gjør i dag. Last ned fil (12,1 kb)

HTML Struktur

Her er vår HTML-kode. Det er en enkel sorterte liste:

 > <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 = "#"> </ 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> gjeldende side </ li> </ ul> 

CSS

Her er enkel CSS

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

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

  # breadcrumbs ( 
  ; høyde: 2 .7 em; 
  #c9c9c9 ; border: 1px solid # c9c9c9; 
  ) 

  # breadcrumbs 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 ; } # breadcrumbs li a (background: url (breadcrums. jpg) no-repeat høyre center; display: block; padding: 0 15px 0 0;) 

Dette er den eneste enkle høyre pil bilde, som jeg bruker i denne opplæringen.

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

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

Sluttresultatet

Her er det endelige resultatet

Konklusjon

Bruk disse tipsene til din nåværende og neste prosjekter, og du vil sikkert sette pris på innsatsen.

Last ned kildefilen

Hvis du vil kontrollere arbeidet ditt, kan du laste ned rar-filen for denne opplæringen.

cssbreadcrumbs.rar (12,1 kb)

Hvis du tror at opplæringen kan bli mer bedre, kan du dele med oss. Kommentar oss

Hvis du ønsker å motta mer inspirasjon fra oss, kan du vurdere å abonnere på vårt feed via RSS eller via e-post.

Arkivert under: Css, Tutorials av admin