Et par dage siden var jeg gennemføre rasp i en hjemmeside, jeg arbejder på. breadcrumbs ikke bruger ofte, men de fleste af corporate websites bruger rasp. I denne tutorial vil jeg lære dig, hvordan du opretter rart skalerbare CSS Baseret Breadcrumbs. Jeg bruger kun en simpel grafisk. Resten er grundlæggende CSS styling med en uordnet liste, som HTML-kode.

Final Preview

Det er, hvad vi gået gør i dag. Hent fil (12,1 kb)

HTML Struktur

Her har vores HTML-kode. Det er en enkel uordnet 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 = "#"> Hjem </ a> </ li> <li> <a href = "#"> Main Lavel </ a> </ li> < li> <a href = "#"> Sub Lavel </ a> </ li> <li> <a href = "#"> Sub Lavel </ a> </ li> <li> Din nuværende side </ li> </ ul> 

CSS Styling

Her er simple CSS styling

  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øjde: 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øjre center; display: block; padding: 0 15px 0 0;) 

Dette er den eneste simple højre hjørne pil billede, som jeg bruger i dette selvstudium.

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

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

Slutresultat

Her er det endelige resultat

Konklusion

Anvende disse tips til din nuværende og kommende projekter, og du vil helt sikkert sætte pris på den indsats.

Download den kildefil

Hvis du ønsker at kontrollere dit arbejde, kan du hente den rar fil til denne tutorial.

cssbreadcrumbs.rar (12,1 kb)

Hvis du tror, at tutorial kan være mere bedre, kan du dele med os. Kommentar os

hvis du ønsker at modtage mere inspiration fra os, kan du overveje at abonnere på vores feed ved RSS eller e-mail.

Filed under: Css, Tutorials af admin