javascript布局查看器效果代码

时间:2020-05-12 人气:0

<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> 
    <div></div> 
<div></div> 
    <div> 
    <div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
</div> 
<div> 
    <div></div> 
<div> 
    <div></div> 
<div></div> 
</div> 
<div> 
    <div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
</div> 
<div> 
    <div>res</div> 
<div>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需刷新才能执行]

加载全部内容