Comment faire pour créer un effet de bloquer le vol stationnaire pour une liste de liens |

Comment faire pour créer un effet de bloquer le vol stationnaire pour une liste de liens

Ce tutoriel explique comment créer un effet de bloquer le vol stationnaire pour une liste de liens au moyen d'un formulaire propre design en CSS avec seulement li, span et em tags.

Étape: 1 Structure HTML de base


  > <div id = "linkBox"> 
  <ul> 
  > Link Heading One <li> <a href = "#"> Link One rubrique 
  <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui nec risus.  Dans un neque eu lacinia rhoncus tortor. </ Em> 
  <span> 20e juin 2009 </ span> </ a> </ li>  
 
  > Link Heading Two <li> <a href = "#"> Link Rubrique Deux 
  <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui nec risus.  Dans un neque eu lacinia rhoncus tortor. </ Em> 
  <span> 21 juin 2009 </ span> </ a> </ li>  
 
  > Link Heading Three <li> <a href = "#"> Link Three rubrique 
  <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui nec risus.  Dans un neque eu lacinia rhoncus tortor. </ Em> 
  <span> 22 juin 2009 </ span> </ a> </ li>  
  </ ul> 
  </ div>

Étape: 1 Code CSS


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

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

  # linkBox li a (  
  ; 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 a (/ * faire planer effet travailler dans IE * / 
  ; largeur: 400 px; 
  ) 

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

  # linkBox un em (  
  ; 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%; 
  )

L'exemple

Enfin, nous nous sommes fait. nous avons créé un effet de bloquer le vol stationnaire pour une liste de liens. Voir mon exemple et de rouler sur la liste des questions pour voir le bloc d'effet hover en action.

Share & Support: