Një ditë më parë isha në zbatimin e breadcrumbs i një web unë jam duke punuar. Breadcrumbs nuk janë përdorur shpesh, por shumica e korporatës janë duke përdorur faqet e internetit breadcrumbs. Në ky i tutorial do të mësoni se si të krijoni CSS bukur shkallëzuar bazuar Breadcrumbs. Unë jam duke përdorur vetëm një grafik të thjeshtë. Pjesa tjetër është bazë styling CSS me një listë të renditura si kodin HTML.

Final Preview

Kjo është ajo që ne bëjmë sot shkuar. Download file (12,1 kb)

HTML Struktura

Këtu është kodi ynë HTML. Kjo është një listë e thjeshtë parenditur:

 > <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> href <a = "#"> kryesore Lavel </ a> </ li> < li> <a href = "#"> </ a> </ li> <li> href <a = Nen Lavel "#"> Nën nën Lavel </ a> </ li> <li> faqe juaj aktual </ li> </ ul> 

CSS Styling

Këtu është stili i thjeshtë css

  organ ( 
  / 1 .13em "verdana" , arial, tahoma, sans-serif ; font: 0 .69 em / em 1 .13 "Verdana", Arial, Tahoma, sans-serif;  
  ; background: # fff; 
  ) 

  ul, li ( 
  listë-style-type: none; 
  padding: 0; 
  margin: 0; 
  ) 

  height : 2 .7em ;         border : 1px solid #c9c9c9 ; } # Breadcrumbs (height: 2 .7 em; border: 1px solid # c9c9c9;) 

  # breadcrumbs li ( 
  float: left; 
  ; line-height: 2 .7 em; 
  ; color: # 777; 
  ; padding-left: ,85 em; 
  ) 

  Breadcrumbs # li a ( 
  ( breadcrums .jpg ) no-repeat right center ; background: url (breadcrums. jpg) no-repeat center të drejtë; 
  display: block; 
  0 0 ; padding: 0 15px 0 0; 
  ) 

Kjo është vetëm e thjeshtë e drejtë arrow kënd imazh, i cili është i jam duke përdorur në këtë tutorial.

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

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

Rezultati Final

Këtu është Rezultati përfundimtar

Përfundim

Aplikoni këto Këshilla për projektet tuaja aktuale dhe të ardhshme, dhe ju me siguri do të vlerësojmë përpjekjet.

Shkarko burim file

Nëse dëshironi të shikoni punën tuaj, ju mund të shkarkoni skedarin rar për këtë tutorial.

cssbreadcrumbs.rar (12,1 kb)

Nëse mendoni se tutorial mund të jetë më mirë, Ju lutem ndani me ne. Koment ne

në qoftë se ju dëshironi të merrni më shumë frymëzim prej nesh, ju lutem konsideroni nënshkrimit to our feed duke RSS ose me email.

Paraqitur sipas: Css, Tutorials nga admin