Néhány nappal ezelőtt végrehajtási rántva egy internetes oldalon, amin dolgozom. zsemlemorzsa nem használ gyakran, de a legtöbb vállalati honlapok segítségével zsemlemorzsa. A bemutató meg fogom tanulni, hogyan kell létrehozni szép méretezhető CSS Based Breadcrumbs. Én használ csak egy egyszerű grafikus. A többi már alapvető CSS styling egy Rendezetlen lista a HTML-kódot.

Final Preview

Ez az, amit nem ment ma. Fájl letöltése (12,1 kb)

HTML felépítése

Itt van a HTML kódot. Ez egy egyszerű Rendezetlen 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 = "#"> Fő Lavel </ a> </ li> < li> <a href = "#"> Sub Lavel </ a> </ li> <li> <a href = "#"> Sub sub Lavel </ a> </ li> <li> az aktuális oldal </ li> </ ul> 

CSS Styling

Itt egyszerű 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;) 

  : (# zsemlemorzsa 
  ; magasság: 2 .7 em; 
  #c9c9c9 ; border: 1px solid # c9c9c9; 
  ) 

  # zsemlemorzsa li ( 
  float: left; 
  ; a 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 ; } # zsemlemorzsa li a (background: url (breadcrums. jpg) no-repeat right center; display: block; padding: 0 15px 0 0;) 

Ez az egyetlen olyan egyszerű sarokban nyíl képet, ami én használ ez a bemutató.

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

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

Végeredménye

Itt a végeredmény

Következtetést

Tippek, hogy alkalmazzák ezeket a jelenlegi és a következő projekteket, és akkor biztosan értékelni az erőfeszítéseket.

Töltsd le a forrás fájl

Ha azt szeretné, hogy ellenőrizze a munkát, akkor töltse le a rar fájlt a bemutató.

cssbreadcrumbs.rar (12.1 kb) A

Ha úgy gondolja, hogy a tutorial nagyobb lehet, jobban, kérjük ossza meg velünk. Hozzászólás minket

Ha szeretne többet kapnak ihletet tőlünk, kérjük, fontolja meg a feliratkozást a feedre az RSS, vagy e-mailben.

Kategória: Css, Tutorials by admin