Cum de a crea un bloc hover efect pentru o listă de link-uri |

Cum de a crea un bloc hover efect pentru o listă de link-uri

Acest ghid explică modul de a crea un bloc hover efect pentru o listă de link-uri, folosind un formular curat CSS design cu doar li, span şi le etichete.

Pasul: 1 Structura de bază HTML


  > <div id = "linkBox"> 
  <ul> 
  > Link Heading One <li> <a href = "#"> Link Heading One 
  <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui nec risus.  În UE, neque o tortor lacinia rhoncus. </ Em> 
  <span> 20 iunie 2009 </ span> </ a> </ li>  
 
  > Link Heading Two <li> <a href = "#"> Link Rubrica Doi 
  <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui nec risus.  În UE, neque o tortor lacinia rhoncus. </ Em> 
  <span> 21 iunie 2009 </ span> </ a> </ li>  
 
  > Link Heading Three <li> <a href = "#"> Link Rubrica Trei 
  <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui nec risus.  În UE, neque o tortor lacinia rhoncus. </ Em> 
  <span> 22 iunie 2009 </ span> </ a> </ li>  
  </ ul> 
  </ div>

Pasul: 1 CSS Codul


  # linkBox ul ( 
  ; list-style-type: none; 
  ; width: 400px; 
  )  

  # linkBox li ( 
  0 ; margin: 5px 0; 
  #ccc ; Border-bottom: 1px punctate # ccc; 
  #ccc ; Border-top: 1px punctate # ccc; 
  ) 

  # linkBox li o (  
  ; color: # E67701; 
  ; display: block; 
  100 . 1 % "Georgia" , Times New Roman, Times, serif ; font: bold 100. 1% "Georgia", Times New Roman, Times, serif; 
  ; padding: 5px; 
  ; text-decoration: none; 
  %; LINE-HEIGHT: 182. 5%; 
 
  ) 

  /* make hover effect work in IE */ * Html # linkBox li o (/ * face hover efect munca in IE * / 
  ; width: 400px; 
  ) 

  { # linkBox li a: hover ( 
  ; background: # eeeeee; 
  ) 

  # linkBox una din (  
  ; color: # 333; 
  ; display: block; 
  82 . 5 % "Georgia" , Times New Roman, Times, serif ; font: normal 82. 5% "Georgia", Times New Roman, Times, serif; 
  . 5 %; LINE-HEIGHT: 182. 5%;  
  ) 

  # linkBox un span ( 
  ; color: # 006AFF; 
  82 . 5 % "Georgia" , Times New Roman, Times, serif ; font: normal 82. 5% "Georgia", Times New Roman, Times, serif; 
  % ; LINE-HEIGHT: 150%; 
  )

Exemplul

În cele din urmă am făcut. am creat un bloc hover efect pentru o listă de link-uri. Vezi-mi exemplu şi nominal pe lista de articole pentru a vedea bloc hover efect în acţiune.

Share & Support: