首页 >web前端 >js教程 >javascript布局查看器效果代码_javascript技巧

javascript布局查看器效果代码_javascript技巧

WBOY原创: 2016-05-16 19:00:151048浏览

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

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

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JavaScript for in锚点的动态创建_javascript技巧下一篇：判断JavaScript对象是否可用的最正确方法分析_javascript技巧

相关文章

查看更多