Ang ilang mga araw nakaraan ako ay pagpapatupad ng breadcrumbs sa isang website na ako gumagawa. breadcrumbs ay hindi gumagamit ng madalas ngunit karamihan ng mga corporate website ay gumagamit ng breadcrumbs. Sa ganitong tutorial ko ay malaman mo kung paano gumawa nice scalable CSS Batay Breadcrumbs. Ako ay gumagamit lamang ng isang simpleng graphic. Ang iba ay basic CSS styling sa isang unordered list bilang HTML code.

Final Preview

Ito ay kung ano ang aming wala na ko ngayon. I-download ang file (12.1 KB)

HTML Structure

Heto ang aming HTML code. Ito ay isang simpleng unordered list:

 > <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> iyong mga kasalukuyang pahina </ li> </ ul> 

CSS Styling

Ito ay simple css styling

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

  ul, li ( 
  listahan ng-style-uri: none; 
  padding: 0; 
  margin: 0; 
  ) 

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

  # breadcrumbs li ( 
  magpalutang: kaliwa; 
  ; line-height: 2 .7 em; 
  ; color: # 777; 
  ; padding-kaliwa: .85 em; 
  ) 

 background : url ( breadcrums .jpg ) no-repeat right center ;         display :block ;         padding : 0 15px 0 0 ; } # breadcrumbs isang li (background: url (breadcrums. jpg) no-ulitin ang karapatan na sentro; display: block; padding: 0 15px 0 0;) 

Ito ay ang tanging simpleng karapatan sulok arrow na imahe, na kung saan ay ako gamit sa tutorial.

  , # breadcrumbs li a: link, 
  { # breadcrumbs li isang: binisita ( 
  ; color: # 777; 
  text-labor: none; 
  ) 

  , a: link, isang: binisita,  
  , # breadcrumbs li isang: pinapadaan, 
  { # breadcrumbs li a: focus ( 
  color: # 222 
  ) 

Final Result

Narito ang huling Resulta

Paghihinuha

Mag-apply ang mga Tips sa iyong kasalukuyan at susunod na proyekto, at ikaw ay tiyak na pahalagahan ang mga pagsisikap.

I-download ang source ng file

Kung nais mong suriin ang iyong trabaho, maaari mong i-download ang rar file para sa tutorial.

cssbreadcrumbs.rar (12.1 KB)

Kung sa tingin mo na ang tutorial ay maaaring maging mas mahusay, Paki-share sa amin. Comment sa amin

kung nais mong makatanggap ng mas maraming inspirasyon mula sa amin, mangyaring isaalang-alang-subscribe sa aming mga feed sa pamamagitan ng RSS o sa pamamagitan ng email.

Filed under: Css, Tutorials sa pamamagitan ng admin