DIV+CSS常見(jiàn)布局1.ppt

《DIV+CSS常見(jiàn)布局1.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、DIV+CSS常見(jiàn)布局主要內(nèi)容1單列版式2雙列版式3三列版式DIV+CSS常見(jiàn)布局DIV+CSS布局看起來(lái)像是把頁(yè)面劃分成若干個(gè)區(qū)域，如果還劃分區(qū)域，根據(jù)內(nèi)容的排列方式，常見(jiàn)的頁(yè)面布局有如下三個(gè)：1、單列版式2、雙列版式3、三列版式單列版式是最簡(jiǎn)單的布局版式，網(wǎng)頁(yè)內(nèi)容在一欄中顯示，如下圖：1、單列版式標(biāo)題網(wǎng)頁(yè)內(nèi)容頁(yè)腳單列版式分為：?jiǎn)瘟泄潭▽挾劝媸礁鱾€(gè)區(qū)域?qū)挾仁枪潭ǖ膯瘟凶赃m應(yīng)寬度版式各個(gè)區(qū)域?qū)挾葧?huì)隨著包含框的寬度自適應(yīng)（將寬度設(shè)置為百分比）網(wǎng)頁(yè)內(nèi)容部分源代碼，如下圖：1、單列版式1、單列版式CSS部分源代碼，如下圖：雙列版式是網(wǎng)頁(yè)

2、中最常用的布局版式，如下圖：2、雙列版式標(biāo)題副欄主欄頁(yè)腳雙列版式分為：雙列固定寬度版式各個(gè)區(qū)域?qū)挾仁枪潭ǖ碾p列自適應(yīng)寬度版式各個(gè)區(qū)域?qū)挾葧?huì)隨著包含框的寬度自適應(yīng)（將寬度設(shè)置為百分比）雙列兼容寬度版式一欄寬度固定，一欄寬度自適應(yīng)2、雙列版式（雙列固定寬度版式）雙列固定寬度版式網(wǎng)頁(yè)內(nèi)容部分源代碼，如下圖：2、雙列版式（雙列固定寬度版式）CSS部分源代碼，如下圖：2、雙列版式（雙列自適應(yīng)寬度版式）雙列自適應(yīng)寬度版式網(wǎng)頁(yè)內(nèi)容部分源代碼，如下圖：CSS部分源代碼，如下圖：2、雙列版式（雙列自適應(yīng)寬度版式）雙列兼容寬度版式網(wǎng)頁(yè)內(nèi)容部分源代碼，

3、如下圖：2、雙列版式（雙列兼容寬度版式）CSS部分源代碼，如下圖：左側(cè)浮動(dòng)，右側(cè)采用margin-left2、雙列版式（雙列兼容寬度版式）三列版式是企業(yè)網(wǎng)站和商用網(wǎng)站中最常用的布局版式，如下圖：3、三列版式標(biāo)題副欄主欄次欄頁(yè)腳三列版式分為：三列固定寬度版式各個(gè)區(qū)域?qū)挾仁枪潭ǖ娜凶赃m應(yīng)寬度版式各個(gè)區(qū)域?qū)挾葧?huì)隨著包含框的寬度自適應(yīng)（將寬度設(shè)置為百分比）三列兼容寬度版式①雙列固定，一列寬度自適應(yīng)②一列固定，雙列寬度自適應(yīng)3、三列版式（三列固定寬度版式）三列固定寬度版式網(wǎng)頁(yè)內(nèi)容部分源代碼，如下圖：CSS部分源代碼，如下圖：3、三列版式（

4、三列固定寬度版式）三列自適應(yīng)寬度版式網(wǎng)頁(yè)內(nèi)容部分源代碼，如下圖：3、三列版式（三列自適應(yīng)寬度版式）CSS部分源代碼，如下圖：3、三列版式（三列自適應(yīng)寬度版式）三列兼容寬度版式①雙列固定，一列寬度自適應(yīng)（副欄、次欄固定寬度，主欄寬度自適應(yīng)）方法一：網(wǎng)頁(yè)內(nèi)容部分源代碼，如下圖：3、三列版式（三列兼容寬度版式—雙列固定，一列寬度自適應(yīng)）CSS部分源代碼，如下圖：左右兩側(cè)絕對(duì)定位，中間采用margin-left,margin-right3、三列版式（三列兼容寬度版式—雙列固定，一列寬度自適應(yīng)）三列兼容寬度版式①雙列固定，一列寬度自適應(yīng)（副

5、欄、次欄固定寬度，主欄寬度自適應(yīng)）方法二：網(wǎng)頁(yè)內(nèi)容部分源代碼，如下圖：3、三列版式（三列兼容寬度版式—雙列固定，一列寬度自適應(yīng)）CSS部分源代碼，如下圖：左右兩側(cè)浮動(dòng)，中間采用margin-left,margin-right3、三列版式（三列兼容寬度版式—雙列固定，一列寬度自適應(yīng)）三列兼容寬度版式②一列固定，雙列寬度自適應(yīng)（副欄固定寬度，次欄、欄寬度自適應(yīng)）方法一：網(wǎng)頁(yè)內(nèi)容部分源代碼，如下圖：3、三列版式（三列兼容寬度版式—一列固定，雙列寬度自適應(yīng)）CSS部分源代碼，如下圖：左右兩側(cè)絕對(duì)定位，中間采用margin-left,mar

6、gin-right。左側(cè)寬度固定，右側(cè)寬度百分比。3、三列版式（三列兼容寬度版式—一列固定，雙列寬度自適應(yīng)）三列兼容寬度版式②一列固定，雙列寬度自適應(yīng)（副欄固定寬度，次欄、欄寬度自適應(yīng)）方法二：網(wǎng)頁(yè)內(nèi)容部分源代碼，如下圖：3、三列版式（三列兼容寬度版式—一列固定，雙列寬度自適應(yīng)）CSS部分源代碼，如下圖：3、三列版式（三列兼容寬度版式—一列固定，雙列寬度自適應(yīng)）左右兩側(cè)浮動(dòng)，中間采用margin-left,margin-right。左側(cè)寬度固定，右側(cè)寬度百分比。