ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript レイアウトビューア効果コード_javascript スキル

JavaScript レイアウトビューア効果コード_javascript スキル

WBOYオリジナル: 2016-05-16 19:00:151030ブラウズ

<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">レス</div>
<div id="right_recommend">録音</div>
</div>
</div>
</div>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]<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>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：アンカーポイント内での JavaScript の動的作成_JavaScript スキル次の記事：アンカーポイント内での JavaScript の動的作成_JavaScript スキル

関連記事

続きを見る