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> 
<div id="topic"></div> 
    <div id="left"> 
    <div id="left_qq"></div> 
<div id="left_inquire"></div> 
<div id="left_master_page"></div> 
<div id="left_online"></div> 
<div id="left_keyword"></div> 
<div id="left_aboutus"></div> 
</div> 
<div id="right"> 
    <div id="right_flash"></div> 
<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> 
<div class="newline"> 
    <div id="right_research">res</div> 
<div id="right_recommend">rec</div> 
</div> 
</div> 
</div> 
</body> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20divs%3Ddocument.getElementsByTagName(%22div%22)%3B%20%0D%0Avar%20m%3D0%3B%20%0D%0Afor(i%3D0%3Bi%3Cdivs.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20if(!divs%5Bi%5D.hasChildNodes())%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20text%3Ddocument.createElement(%22span%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20firstdivnode%3Ddivs%5Bi%5D.firstchild%3B%20%0D%0A%20%20%20%20%20%20%20%20divs%5Bi%5D.appendChild(text)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20switch%20((m%2B%2B)%20%25%205)%7B%20%0D%0A%20%20%20%20%20%20%20%20case%200%3A%20%0D%0A%20%20%20%20%20%20%20%20divs%5Bi%5D.style.backgroundColor%3D%22%232F615A%22%3B%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20case%201%3A%20%0D%0A%20%20%20%20%20%20%20%20divs%5Bi%5D.style.backgroundColor%3D%22%23F3F7E1%22%3B%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20case%202%3A%20%0D%0A%20%20%20%20%20%20%20%20divs%5Bi%5D.style.backgroundColor%3D%22%23F7B17E%22%3B%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20case%203%3A%20%0D%0A%20%20%20%20%20%20%20%20divs%5Bi%5D.style.backgroundColor%3D%22%23ED7745%22%3B%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20default%3A%20%0D%0A%20%20%20%20%20%20%20%20divs%5Bi%5D.style.backgroundColor%3D%22%23214A45%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Avar%20spans%3Ddocument.getElementsByTagName(%22span%22)%3B%20%0D%0Afor%20(i%3D0%3Bi%3Cspans.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20spans%5Bi%5D.innerHTML%3Dspans%5Bi%5D.parentNode.className%3B%20%0D%0A%20%20%20%20if(spans%5Bi%5D.parentNode.id)%7B%20%0D%0A%20%20%20%20%20%20%20%20spans%5Bi%5D.innerHTML%3Dspans%5Bi%5D.innerHTML%2B%22%26nbsp%3Bid%3A%20%22%2Bspans%5Bi%5D.parentNode.id%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</html>

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

教程首页更多教程