常用網頁布局(div+css)之一

來源:互聯網
上載者:User
乘著閑暇時間,自己弄了個web,主介面是用div+css布局,用ajax+javascript進行介面控制及擷取資料!
我就說說其中的div+css布局。
整個頁面分為三大塊,可以稱之為:頁首(站標+橫幅),主體(左邊菜單+右邊內容),頁尾(顯示著作權及備案等資訊)。三大塊我用position:relative;相對定位來設定,這樣有個好處,就是當某一塊內容太多要闊漲時,其它部分也會相應的調整位置。
每一塊內部採用float為left或right布局;在主體中,我左邊為

#divLeft
{}{
    width:228px;
    height:400px;
    left:26px;
    float:left;
    padding:0;
    margin:0;
    filter:revealTrans(duration=2,transition=3)  progid:DXImageTransform.Microsoft.Gradient(startColorStr=#adde21, endColorStr=#d8e7c2, gradientType=0);

}

右邊為

#divRight
{}{    float:left;
    left:286px;
    width:744px;
    height:400px;
    padding:0;
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#f5efda, endColorStr=#F7f7f7, gradientType=0);

}

請注意,在這兩部分布局中我都採用了float:left;,這樣當我左邊divLeft部分隱藏時,右邊divRight部分會自動往左移動,如果#divRight用float:right;right:0;則達不到這樣的效果!  

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.