Prieš kelias dienas buvau įgyvendinimo džiūvėsėliai į svetainę I'm working on. džiūvėsėliai nesinaudojate dažnai, bet dauguma įmonių tinklalapiai naudojate džiūvėsėliai. Šiame pavyzdyje aš išmokti, kaip sukurti Nice scalable CSS Breadcrumbs. Aš naudoju tik viena paprasta grafika. Poilsis yra pagrindinė CSS stilius su netvarkingai sąrašą kaip HTML kodą.

Galutinė Peržiūrėti

Tai, ką mes gone daryti šiandien. Parsisiųsti failą (12.1 kb)

HTML Struktūra

Čia yra mūsų HTML kodą. Tai paprastas netvarkingai sąrašas:

 > <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 = "#"> Pradžia </ a> </ li> <li> <a href = "#"> Pagrindinis Lavel </ a> </ li> < li> <a href = "#"> Sub Lavel </ a> </ li> <li> <a href = "#"> Sub Sub Lavel </ a> </ li> <li> esamą puslapį </ li> </ ul> 

CSS Styling

Čia yra paprastas CSS stilius

  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; 
  ) 

  # džiūvėsėliai ( 
  ; aukštis: 2 .7 em; 
  #c9c9c9 ; border: 1px solid # c9c9c9; 
  ) 

  # džiūvėsėliai 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 ; } # džiūvėsėliai li (background: url (breadcrums. jpg) no-repeat right center; display: block; padding: 0 15px 0 0;) 

Tai tik paprastas dešiniajame kampe arrow vaizdas, kurį aš naudoju šiame vadove.

 , #breadcrumbs li a :visited { color : # 777 ;         text-decoration :none ; } # džiūvėsėliai li a: link, # džiūvėsėliai li a: visited (color: # 777; text-decoration: none;) 

  , : link, a: visited,  
  , # džiūvėsėliai li: hover, 
  { # džiūvėsėliai li: Focus ( 
  color: # 222 
  ) 

Galutinis rezultatas

Čia yra galutinis rezultatas

Išvada

Taikyti šiuos Patarimai jūsų dabartinius ir šalia projektus, ir jums bus tikrai dėkingi už pastangas.

Parsisiųsti šaltinio failo

Jei norite patikrinti savo darbą, galite atsisiųsti rar šį vadovėlį.

cssbreadcrumbs.rar (12.1 kb)

Jei manote, kad pamoka gali būti dar geriau, prašome pasidalinti su mumis. Komentaras mus

Jei norite gauti daugiau įkvėpimo iš mums, prašom, galite užsiprenumeruoti mūsų kanalo RSS arba el.

Filed under: Css, Pamokos admin