Cu câteva zile în urmă, am fost de punere în aplicare pesmet într-un site web I'm working on. Breadcrumbs nu sunt utilizaţi de multe ori, dar de cele mai multe site-uri corporative sunt utilizaţi pesmet. In acest tutorial am vor învăţa cum să creaţi frumos CSS scalabila Bazat pesmet. I sînt, folosind doar un grafic simplu. Restul este de bază, CSS styling, cu o listă neordonată ca cod HTML.

Final Preview

Aceasta este ceea ce am plecat face azi. Descarcă (12.1 kb)

HTML Structura

Aici este codul nostru HTML. Este o listă de simplu neordonate:

 > <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> href <a = "#"> Home </ a> </ li> <li> <a href = "#"> Principalele Lavel </ a> </ li> < li> <a href = "#"> Sub Lavel </ a> </ li> <li> <a href = "#"> Sub sub Lavel </ a> </ li> <li> Pagina dvs. de curent </ li> </ ul> 

CSS Styling

Aici este styling simple 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 ( 
  ; înălţime: 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 un fundal (: url (breadcrums. jpg) no-repeat centru dreapta; display: block; padding: 0 15px 0 0;) 

Aceasta este singura imagine simplă săgeată colţul din dreapta, care este i sînt folosire in acest tutorial.

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

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

Rezultatul final

Aici este rezultatul final

Concluzii

Aplicaţi aceste sfaturi pentru a proiectelor dvs. curente şi viitoare, şi vă vor aprecia cu siguranta eforturile.

Descărcaţi fişierul sursă

Dacă doriţi să verifice activitatea dumneavoastră, puteţi descărca fişierul rar pentru acest tutorial.

cssbreadcrumbs.rar (12.1 kb)

Dacă credeţi că tutorialul poate fi mai bine, Va rugam sa imparti cu noi. Comment-ne

Dacă doriţi să primiţi inspiraţie mai mult de la noi, vă rugăm să ia în considerare aderarea la feed noastre prin RSS sau prin e-mail.

Depusă în conformitate cu: Css, Tutoriale de admin