javascript布局查看器效果代碼

2019-11-21 01:36:35

字體：大中小

來源：轉載

供稿：網友

<html> <head> <style> body{     margin:0 auto;     width:950px;     font-size:12px;     text-align:center; } #wholebody{     width:950px; } .newline{/*僅應用于右側*/     clear:both;     width:700px; }     #top{         height:auto;     }     .left_square{     }     .right_square{     }     #topic{         height:100px;     }     #left{         float:left;         width:250px;     }         #left_qq{             height:80px;         }         #left_inquire{             height:220px;         }         #left_master_page{             height:200px;         }         #left_online{             height:220px;         }         #left_keyword{             height:140px;         }         #left_aboutus{             height:200px;         }     #right{         float:left;         width:700px;     }         #right_flash{             width:700px;             height:300px;             float:left;         }         #right_chara{             width:350px;             float:left;             height:200px;         }         #right_master_answer{             width:350px;             float:left;             height:200px;         }         #right_knowledge{             clear:both         }             .knowledge{                 float:left;                 width:140px;                 height:360px;             }         #right_research{             float:left;             width:50%;             height:200px;         }         #right_recommend{             float:left;             width:50%;             height:200px;         } </style> </head> <body> <div   class="iwvjtn8m0"   id="wholebody">     <div   class="iwvjtn8m0"   id="top"></div> <div   class="iwvjtn8m0"   id="topic"></div>     <div   class="iwvjtn8m0"   id="left">     <div   class="iwvjtn8m0"   id="left_qq"></div> <div   class="iwvjtn8m0"   id="left_inquire"></div> <div   class="iwvjtn8m0"   id="left_master_page"></div> <div   class="iwvjtn8m0"   id="left_online"></div> <div   class="iwvjtn8m0"   id="left_keyword"></div> <div   class="iwvjtn8m0"   id="left_aboutus"></div> </div> <div   class="iwvjtn8m0"   id="right">     <div   class="iwvjtn8m0"   id="right_flash"></div> <div   id="iwvjtn8m0"   class="newline">     <div   class="iwvjtn8m0"   id="right_chara"></div> <div   class="iwvjtn8m0"   id="right_master_answer"></div> </div> <div   class="iwvjtn8m0"   id="right_knowledge">     <div   id="iwvjtn8m0"   class="knowledge"></div> <div   id="iwvjtn8m0"   class="knowledge"></div> <div   id="iwvjtn8m0"   class="knowledge"></div> <div   id="iwvjtn8m0"   class="knowledge"></div> <div   id="iwvjtn8m0"   class="knowledge"></div> </div> <div   id="iwvjtn8m0"   class="newline">     <div   class="iwvjtn8m0"   id="right_research">res</div> <div   class="iwvjtn8m0"   id="right_recommend">rec</div> </div> </div> </div> </body> <script> var divs=document.getElementsByTagName("div"); var m=0; for(i=0;i<divs.length;i++){     if(!divs[i].hasChildNodes()){         var text=document.createElement("span");         var firstdivnode=divs[i].firstchild;         divs[i].appendChild(text);     }     switch ((m++) % 5){         case 0:         divs[i].style.backgroundColor="#2F615A";         break;         case 1:         divs[i].style.backgroundColor="#F3F7E1";         break;         case 2:         divs[i].style.backgroundColor="#F7B17E";         break;         case 3:         divs[i].style.backgroundColor="#ED7745";         break;         default:         divs[i].style.backgroundColor="#214A45";     } } var spans=document.getElementsByTagName("span"); for (i=0;i<spans.length;i++){     spans[i].innerHTML=spans[i].parentNode.className;     if(spans[i].parentNode.id){         spans[i].innerHTML=spans[i].innerHTML+" id: "+spans[i].parentNode.id;     } } </script> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：鼠標跟隨效果代碼

下一篇：判斷JavaScript對象是否可用的最正確方法分析