Před pár dny jsem se provádí strouhanka na internetových stránkách I'm working on. strouhanka nepoužívají často, ale většina z firemních webových stránek používáte strouhanky. V tomto tutoriálu se budu učit, jak vytvořit pěkné škálovatelné CSS Based řízek. I am using pouze jeden jednoduchý grafický. Zbytek je základní CSS styl s neuspořádaný seznam jako HTML kód.

Konečné Preview

To je to, co už dnes. Stáhněte si soubor (12,1 kb)

Struktura HTML

Tady je náš HTML kód. Je to jednoduché neuspořádaný seznam:

 > <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 = "#"> Domů </ a> </ P> <li> <a href = "#"> Hlavní Lavel </ a> </ li> < P> <a href = "#"> Sub Lavel </ a> </ P> <li> <a href = "#"> Sub sub Lavel </ a> </ P> <li> Váš aktuální stránky </ li> </ ul> 

CSS Styling

Zde je jednoduchý 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;) 

  (# strouhanka 
  ; výška: 2 .7 em; 
  #c9c9c9 ; border: 1px solid # c9c9c9; 
  ) 

  # strouhanka 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 ; } # strouhankou li (background: url (breadcrums. jpg) no-repeat právo center; display: block; padding: 0 15px 0 0;) 

Toto je pouze jednoduchý rohu šipku obraz, který je i am using v tomto tutoriálu.

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

  , a: link, a: visited,  
  , # strouhankou li: hover, 
  { # strouhankou li: zaměření ( 
  color: # 222 
  ) 

Konečný výsledek

Zde je konečný výsledek

Závěr

Použít tyto tipy na aktuální a další projekty, a vy jistě ocení úsilí.

Stáhněte si zdrojový soubor

Pokud si chcete zkontrolovat svou práci, můžete stáhnout rar soubor pro tento tutoriál.

cssbreadcrumbs.rar (12,1 kb)

Pokud si myslíte, že cvičení může být lepší, prosím, podělit se s námi. Komentář nás

Pokud chcete získat více inspirace od nás, prosím, přihlašte se náš RSS s RSS nebo e-mailem.

Soubor pod: Css, Návody admin