2007/09/28

怎麼用CSS把網站做起來+基本佈局16例

用table排版網頁,光看原始碼完全很難想像排出來是什麼樣子、html code比較多導致網頁速度慢、容易出現跑位等等的問題,讓MiyaC斷斷續續在磨些CSS排版功,尤其對於能夠兼容於IE6、IE7、FireFox瀏覽器的一些基本佈局設定,剛開始還真是很頭大,因為自學是沒有人教應該怎麼做會更快速、便捷,而且對於css不熟悉的人,一開始看到用css去編排網頁、版面、設定字型,會覺得也經過了不少錯誤的學習,一直以來都還能勝任。
直到有次當自己寫的layout配置,程式設計看了說:『架構有點亂、可以再嚴謹些』,才開始study,到底當版型該怎麼開始著手規劃,然後撰寫div+css排版。

構思-->畫出草圖-->作出版型

可以在版型做好後,也可以在畫草圖的時候,根據不同類別,畫出區塊與區塊名稱,如圖:

圖片引用自:>網站製作學習誌:蠟筆小新 CSS 版型大進擊



剛開始,自己規劃撰寫配置時,容易遇到很多不知問題出在哪裡的狀況,可以用一些常見的基本版型配置去調整應用。以下是基本佈局16例:


資料來源:http://www.w3cn.org/article/layout/2004/55.html

單行單列

  • :採用float浮在左上角,固定寬度。
  • :固定在左上角,固定寬度,採用的是絕對(absolute)定位。
  • :固定在左上角,不固定寬度,採用百分比(%)定義寬度來自適應頁面。
  • (推薦):固定寬度,採用在body樣式中定義居中屬性(text-align: center;)實現適應頁面自動居中。

單行兩列

  • :兩列都固定寬度。第一列浮在左上角,第二列浮在第一列右邊。
  • :兩列都百分比寬度,但不滿版。第一列固定在左上角,第二列浮在第一列右邊。
  • :兩列都百分比寬度,滿版。兩列都採用絕對定位。
  • :兩列都百分比寬度,滿版。第一列浮在左上角,第二列浮在右上角。
  • :兩列都百分比寬度,滿版。第一列浮在左上角,第二列浮在第一列右邊。

單行三列

  • :左右列都絕對定位(右列定位在右上)。左列和右列固定寬度,中間列自適應頁面。
  • :左列定位在左上,右列定位在右上,中間列浮在左列右面。左列和右列固定寬度,中間列自適應頁面。
  • :三列都絕對定位。左列和右列固定寬度,中間列根據內容自適應。
  • (推薦):類似樣式2,只是將margin: 20px屬性增加在body樣式中,解決了中間列在Netscape6.0中置頂的問題。
  • :左右列絕對定位,中間列自適應。寬度滿版。

頂行三列




延伸閱讀:
> 徹底弄懂CSS盒子模式
> CSS 排版觀念:Position - 史考特部落格園地
> DIV CSS佈局實例:用css佈局網站的十步驟!

沒有留言:

張貼留言