CSS Layout 網頁常見版型設計
以下文章中列出常見的 CSS 版型設計,蠻實用的喔!給大家參考看看!
http://www.maxdesign.com.au/articles/css-layouts/
註:一般而言,IE8、Chrome、Firefox 所看到的版面是比較一致的,但是如果是 IE6 或是更早期的 IE5,就有可能會有不同,因此可以在網頁的 標籤中,針對舊版本指定參考的 CSS 檔案,語法如下:
----------------------------------------------------------------------------------------------------------------------
http://www.maxdesign.com.au/articles/css-layouts/
註:一般而言,IE8、Chrome、Firefox 所看到的版面是比較一致的,但是如果是 IE6 或是更早期的 IE5,就有可能會有不同,因此可以在網頁的 標籤中,針對舊版本指定參考的 CSS 檔案,語法如下:
----------------------------------------------------------------------------------------------------------------------
CSS layouts
Date: 1 November 2002
Author: Russ Weakley
Author: Russ Weakley
Here are a range of free CSS page layouts, including 1, 2 and 3 column layouts – free to use and abuse as needed.
Sample CSS layouts
- One column fixed width layout
- One column liquid layout
- Two column fixed width layout
- Two column fixed width (with spread) layout
- Two column liquid layout
- Three column fixed width layout
- Three column liquid layout
“Floatutorial” step by step layout tutorial
- Liquid two column layout
- Liquid two column layout – final result
- Liquid three column layout
- Liquid three column layout – final result
“Two columns with color” step by step layout tutorial
- Two column layout with full height colours
- Two column layout with full height colours – final result
- Two column layout with full height colours – variation 1
- Two column layout with full height colours – variation 2
- Two column layout with full height colours – variation 3
“Selectutorial” step by step layout tutorial
- Three column layout with full height colours
- Three column layout with full height colours – final result
“Liquid Layouts” step by step layout tutorial
- Three column liquid layout
- Three column liquid layout – final result
- Three column liquid layout – variation 1
- Three column liquid layout – variation 2
- Three column liquid layout – variation 3
- Liquid insanity
留言