javascript布局查看器效果代码
<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 id="wholebody">
<div id="top"></div><!--top-->
<div id="topic"></div><!--topic-->
<div id="left">
<div id="left_qq"></div><!--qq-->
<div id="left_inquire"></div><!--inquire-->
<div id="left_master_page"></div><!--masterpage-->
<div id="left_online"></div><!--online-->
<div id="left_keyword"></div><!--keyword-->
<div id="left_aboutus"></div><!--aboutus-->
</div><!--left-->
<div id="right">
<div id="right_flash"></div><!--rightflash-->
<div class="newline">
<div id="right_chara"></div>
<div id="right_master_answer"></div>
</div>
<div id="right_knowledge">
<div class="knowledge"></div>
<div class="knowledge"></div>
<div class="knowledge"></div>
<div class="knowledge"></div>
<div class="knowledge"></div>
</div><!--know-->
<div class="newline">
<div id="right_research">res</div>
<div 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>
«
»