För några dagar sedan var jag genomföra ströbröd på en webbplats som jag arbetar på. ströbröd använder inte ofta men de flesta företagswebbplatser använder ströbröd. I denna tutorial jag ska lära dig hur du skapar trevligt skalbara CSS Based ströbröd. Jag använder bara en enkel grafik. Resten är grundläggande CSS med en oordnad lista som HTML-kod.

Final Preview

Detta är vad vi gått gör idag. Ladda ner fil (12,1 kB)

HTML Struktur

Här är vår HTML-kod. Det är en enkel oordnad lista:

 > <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 = "#"> Main Lavel </ a> </ li> < li> <a href = "#"> Sub Lavel </ a> </ li> <li> <a href = "#"> Sub Sub Lavel </ a> </ li> <li> Din Aktuell sida </ li> </ ul> 

CSS

Här är 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; 
  ) 

  # ströbröd ( 
  ; Höjd: 2 .7 em; 
  #c9c9c9 ; border: 1px solid # c9c9c9; 
  ) 

  # ströbröd 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 ; } # ströbröd li a (background: url (Brödsmulor. jpg) no-repeat rätt center; display: block; padding: 0 15px 0 0;) 

Detta är det enda höger pil bild, som jag använder i den här guiden.

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

  , a: link, a: visited,  
  , # ströbröd li a: hover, 
  { # ströbröd li a: fokus ( 
  color: # 222 
  ) 

Slutresultat

Här är det slutliga resultatet

Slutsats

Använd dessa tips för att din nuvarande och nästa projekt, och du kommer säkert uppskattar de ansträngningar.

Ladda ner källfilen

Om du vill kontrollera ditt arbete, kan du ladda ner rar filen för den här läraren.

cssbreadcrumbs.rar (12,1 kB)

Om du tror att handledning kan vara bättre, Vänligen dela med oss. Kommentar oss

Om du vill få mer inspiration från oss, vänligen överväga att prenumerera på vårt foder genom RSS eller e-post.

Filed under: Css, Tutorials av admin