Điều này hướng dẫn, giải thích làm thế nào để tạo một khối di chuột có hiệu lực cho một danh sách các liên kết bằng cách sử dụng một hình thức sạch CSS thiết kế chỉ với li, span và em thẻ.

Bước: 1 cơ bản HTML Cơ cấu tổ chức

  > <div id = "linkBox"> 
  <ul> 
  > Link Heading One <li> <a href = "#"> Liên kết Heading Một 
  <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui NEC risus.  Trong một neque eu tortor lacinia rhoncus. </ Em> 
  <span> 20 tháng sáu 2009 </ span> </ a> </ li>  
 
  > Link Heading Two <li> <a href = "#"> Liên kết Heading Hai 
  <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui NEC risus.  Trong một neque eu tortor lacinia rhoncus. </ Em> 
  <span> 21 tháng sáu 2009 </ span> </ a> </ li>  
 
  > Link Heading Three <li> <a href = "#"> Liên kết Heading Ba 
  <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui NEC risus.  Trong một neque eu tortor lacinia rhoncus. </ Em> 
  <span> 22 tháng sáu 2009 </ span> </ a> </ li>  
  </ ul> 
  </ div> 

Bước: 1 Mã số CSS

  # linkBox ul ( 
  ; danh sách kiểu-loại: none; 
  ; width: 400px; 
  )  

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

  # linkBox một li (  
  ; color: # E67701; 
  ; hiển thị: chặn; 
  100 . 1 % "Georgia" , Times New Roman, Times, serif ; Phông chữ: in đậm 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 một li (/ * hover làm cho hiệu quả làm việc trong IE * / 
  ; width: 400px; 
  ) 

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

  # linkBox một em (  
  ; color: # 333; 
  ; hiển thị: chặn; 
  82 . 5 % "Georgia" , Times New Roman, Times, serif ; Phông chữ: bình thường 82. 5% "Georgia", Times New Roman, Times, serif; 
  . 5 %; line-height: 182. 5%;  
  ) 

  # linkBox một span ( 
  ; color: # 006AFF; 
  82 . 5 % "Georgia" , Times New Roman, Times, serif ; Phông chữ: bình thường 82. 5% "Georgia", Times New Roman, Times, serif; 
  % ; line-height: 150%; 
  ) 

Các Ví dụ

Cuối cùng, chúng tôi đã làm xong. chúng tôi tạo ra một khối di chuột có hiệu lực cho một danh sách các liên kết. Xem ví dụ của tôi và cuộn qua danh sách các bản ghi để xem hover chặn có hiệu lực trong hành động.

Filed under: Css, Hướng dẫn bởi admin