Méthode simple de page Web DIV+CSS TIP_CSS/HTML-tutoriel CSS-php.cn

Méthode simple de page Web DIV+CSS TIP_CSS/HTML

WBOY

Libérer： 2016-05-16 12:10:47

original

1682 Les gens l'ont consulté

Le principe de base est d'utiliser display; when display: block; when display: none il n'est pas affiché

Copier le code; Le code est le suivant :

#infobox span{ display: none } 
#infobox a:hover span{display: block;position:absolute; ;} 

/*以是下显示TIP的内容*/ 
#infobox span{ display: none; } 
#infobox a:hover span{display: block;position:absolute;border:1px solid #640000;background: #FFFFCC;margin-top:26px!important; margin-top:20px;color:#000;padding:5px;white-space: nowrap;} 
</style>

<div id="info">
  <div id="infobox">
   <ul>
<li>
<a href="http://www.zishu.cn" target="_blank">Vous pouvez accéder à ma page d'accueil à partir d'ici ! <span>Page d'accueil</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank">Il y a de l'anglais et des blagues ici ! <span>Blagues en anglais</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank">Voici les sites de quelques amis ! <span>Liens amicaux</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank">Si vous avez quelque chose à dire, venez ici ! <span>Laissez-moi un message</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank"> sont des articles écrits et collectés par moi-même ! <span>Articles techniques</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank"> Si vous n'en avez plus, mettez-les dans votre agenda ! <span>Photos de vie</span></a>
  </li>
  </ul>
<div class="c">
 </div>
</div>
<div id="center">
</div>
</div>

[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]