WEB开发网
开发学院网页设计JavaScript javascript布局查看器效果代码 阅读

javascript布局查看器效果代码

 2010-09-14 13:28:36 来源:WEB开发网   
核心提示:运行可以看到效果<html><head><style>body{margin:0 auto;width:950px;font-size:12px;text-align:center;}#wholebody{width:950px;}.newline{/*仅应用于右侧*/clear:b

运行可以看到效果

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

Tags:javascript 布局 查看

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接