Fausse barre de navigation de la page d'accueil Qiji DIV+CSS+JS [Exemple de code]_Échange d'expérience

Auteur Zi Shu
Un effet de la page d'accueil de Keqiji Aujourd'hui, quelqu'un m'a demandé comment je l'avais écrit, alors je l'ai réécrit dans la soirée, d'ailleurs, j'ai réorganisé la mise en page
Vous pouvez jeter un œil au Keqiji ; page d'accueil en premier. L'effet : http://shanghai.kijiji.cn
J'ai essayé de ne pas utiliser la méthode position:absolute ; travailler sur le site Keqiji ; je ne sais vraiment pas comment c'était écrit à cette époque
Ce qui suit est le rendu :


Ce qui suit est la partie mise en page

>

• Événements populaires


 

• Dernières fonctionnalités< /a>




• Engagement de service




• La dernière réussite


                                                                                                      " >Recommandation de publication chaude< /li>

Zi Shu00001< /a>

zishu00002< ;/div>

zishu00003

zishu00004

;div id="info5">Zi Mo 00005

div>


Ce qui suit est la partie CSS : CSS n'est toujours pas optimisé

Copier le code

Le code est le suivant :

以下为JS部分：由于javascript对于我来说太难了；所以可能这部分写的比较烂，但效果是出来了；

复制代码 代码如下 :

 var k = Math.floor(Math.random()*5+1); 
 for(i=1; i <6; i++){
  if( i==k){
   document.getElementById("info"+i).className="sw";
   document.getElementById("tag"+i).className="ha";
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
  }
  else{
   document.getElementById("info"+i).className="hd";
  }
 }
function kijijitag(tag){ 
 for(i=1; i <6; i++)
 {
  if (i==tag)
{ 
   document.getElementById("info"+i).className="sw";
   document.getElementById("tag"+i).className="ha";
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
  }
  else{
   document.getElementById("info"+i).className="hd";
   document.getElementById("tag"+i).className="";
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="";
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
  } 
 }
}

Voici les quatre images utilisées :




Regardez l'effet !

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test de la barre de navigation Keqiji</title> <style> /*子鼠 www.zishu.cn*/ * {margin:0;padding:0;font-size:12px;font-family:Verdana, Arial, "宋体"; list-style:none;} body {background: #FFFFCC;margin:100px 0 0 100px;} #info {border:1px solid #FFCC66;padding:30px;background:#f7f7f7;width:500px;} #kjj_tag {width:500px;border-bottom:1px solid #CCC; background:url(http://www.zishu.cn/attachments/month_0704/o200742501718.gif) repeat-x left bottom;height:30px;} #info1,#info2,#info3,#info4,#info5{ border:1px solid #ccc;border-top:none; padding:10px; background:#fff; clear:both; } h4{ font-weight:normal;float:left;border-right:1px solid #fff;} .hd {display:none;} .sw {display:block;} #info li {float:left;} #info li a{float:left; display:block; padding:4px 10px 4px 10px; color:#37572E; text-decoration:none} #info li a:hover{ background:#E9FE70; color:#000} #info ul { float:left; margin-top:-28px; padding:5px 0; position:absolute} #info .ha a{ color:#FFF} #info .ha a:hover{color:#FFF; background:none} #info .ha .hc:hover{background:url(http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat center bottom; } .ha {background:url(http://www.zishu.cn/attachments/month_0704/a20074250170.gif) no-repeat left top;margin-top:-3px;padding-top:3px;} .hb{ background:url(http://www.zishu.cn/attachments/month_0704/x200742501712.gif) no-repeat right top; margin-top:-3px; padding-top:3px;} .hc {background:url(http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat center bottom; height:17px; color:#FFF; font-weight:bold} </style> <div id="info"> <div id="kjj_tag"> </div> <ul> <li id="tag1"><h4><a href="javascript:kijijitag('1');">Activités populaires</a></h4></li> <li id="tag2"><h4><a href="javascript:kijijitag('2');">Dernières fonctionnalités</a></h4></li> <li id="tag3"><h4><a href="javascript:kijijitag('3');">Engagement de service</a></h4></li> <li id="tag4"><h4><a href="javascript:kijijitag('4');">Dernière success story</a></h4></li> <li id="tag5"><h4><a href="javascript:kijijitag('5');">Recommandation de publication chaude</a></h4></li> </ul> <div id="info1"> <a href="http://www.zishu.cn" target="blank">Zi Mo 00001</a><a href="http://shanghai.kijiji.cn" target="blank">Les invités se rassemblent à Shanghai</a> </div> <div id="info2"> <a href="http://www.zishu.cn" target="blank">Zi Mo 00002</a><a href="http://beijing.kijiji.cn" target="blank">Nous nous réunissons à Pékin</a> </div> <div id="info3"> <a href="http://www.zishu.cn" target="blank">Zi Mo 00003</a><a href="http://huhehaote.kijiji.cn" target="blank">Rassemblement à Hohhot</a> </div> <div id="info4"> <a href="http://www.zishu.cn" target="blank">Zi Mo 00004</a><a href="http://hangzhou.kijiji.cn" target="blank">Tous les invités réunis à Hangzhou</a> </div> <div id="info5"> <a href="http://www.zishu.cn" target="blank">Zi Mo 00005</a><a href="http://www.kijiji.cn/index.html" target="blank">Page d'accueil de Keqi</a> </div> </div> <a href="http://www.zishu.cn" target="blank"> </a>Zi Shu25/04/2007 Tôt le matin.
[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter

]
Instructions particulières :

1. La partie CSS n'est pas très claire car j'avais un peu le vertige en l'écrivant
2. Les cinq TAG ont été modifiés de manière aléatoire
3. une partie est toujours Cela peut être plus rationalisé, mais il doit être pris en charge par CSS