css常見布局

一列布局

1.一列布局

不是自適應


"header
">頁頭
"main
">主體內容
"footer
">頁尾

2.一列寬度自適應布局

要想寬度自適應，只需要按照百分比來設定寬度，內容就可以根據瀏覽器視窗自動調節大小。

下例中寬度是自適應的，而高度不是自適應的。

頁頭主體內容

頁尾

3.單列經典布局

頁頭左列

右列頁尾

寬度自適應兩列布局在**中一般很少使用，最常使用的是固定寬度的兩列布局。

要實現固定寬度的兩列布局，也很簡單，只需要把左右兩列包裹起來，也就是給他們增加乙個父容器，然後固定父容器的寬度，父容器的寬度固定了，那麼這兩列就可以設定具體的畫素寬度了，這樣就實現了固定寬度的兩列布局。

頁頭左列

右列頁尾

同理，只需要給定父容器的寬度，然後讓父容器水平居中。

頁頭左列

右列頁尾

和單列布局相同，可以把所有塊包含在乙個容器中，這樣做方便設定，但增加了無意義的**，固定寬度就是給定父容器的寬度，然後中間主體使用浮動。

頁頭導航

左-上右-上

左-下右-上右-下

頁尾

三列布局

三列布局的原理和兩列布局的原理是一樣的，只不過多了一列，只需給寬度自適應兩列布局中間再加一列，然後重新計算三列的寬度，就實現了寬度自適應的三列布局。

同樣的道理，更多列的布局，其實和兩列、三列的布局模式是一樣的。

頁頭左列

中間右列

頁尾

要想實現左右兩列固定寬度，中間寬度自適應的布局，那麼使用浮動就做不到了，使用浮動之後頁面就亂了，必須使用絕對定位來將三列固定在一行。

頁頭左列

設計網頁的第一步就是設計版面布局，搭建**結構，網頁排版的合理性，在一定程度上也影響著**整體的布局以及後期的優化。乙個好的**形象能更容易地吸引使用者、留住使用者。因此，**首頁第一屏的排版非常重要，很多時候能決定使用者的去與留。

右列頁尾