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

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Conseil de test Zishu<title> </title> <style> /* zishu.cn */ *{ margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8;} body{ background: #333} #info{padding:50px;} #infobox{padding:0px 20px;background-color: #640000;} #center{background: #ABBAAC; border-top:2px solid #333; padding:20px;} .c{ clear:both; height:1px; overflow: hidden; background:#333} #infobox li{ border-right:1px solid #000; float:left; margin-right:1px; text-align:center;margin-top:-4px; } a{ width:100px;line-height:28px; display:block;} a:link,a:visited{color:#000;background:#FF9900;text-decoration: none;} a:hover,a:active{ color:#FFFF00;background:#000;} /*以是下显示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 ]