活用XHTML/HTML+CSS並不難 Chapter 1 LAYOUT 版面配置
LAYOUT 01 一欄版面 layout01.html
LAYOUT 01 一欄版面 base_layout01.html 最外面:container 裡面: 上:head 中:content 下:foot
LAYOUT 01 一欄版面 base_layout01.html 等同
layout01.html
LAYOUT 02 固定式二欄版面 layout02.html
LAYOUT 02 固定式二欄版面 base_layout02.html 最外面:container 裡面: 上:head 中:content sidebar 下:foot
LAYOUT 02 固定式二欄版面 base_layout02.html 交換此二行, 側邊欄會靠左
layout02a.html
LAYOUT 03 固定三欄 layout03.html
LAYOUT 03 固定三欄 base_layout03.html 最外面:container 裡面: 上:head 中:sidebar01 content sidebar02 下:foot main
LAYOUT 03 固定三欄 base_layout03.html main body裡
LAYOUT 04 變動二欄 layout04.html 可隨視窗調整寬度
LAYOUT 04 變動二欄 base_layout04.html 最外面:container 裡面: 上:head 中:content sidebar 下:foot
LAYOUT 04 變動二欄 base_layout04.html body裡
LAYOUT 05 變動三欄 layout05.html 可隨視窗調整寬度
LAYOUT 05 變動三欄 base_layout05.html 最外面:container 裡面: 上:head 中:sidebar01 content sidebar02 下:foot main main
LAYOUT 05 變動三欄 base_layout05.html
LAYOUT 06 垂直側邊欄 layout06.html
LAYOUT 06 垂直側邊欄 layout06.html 最外面:container 裡面: 上:head 中:content sidebar 下:foot wrapper
LAYOUT 06 垂直側邊欄 base_layout06.html 不顯示超出邊界的部份
LAYOUT 07 方框圍繞 layout07.html
LAYOUT 07 方框圍繞 layout07.html 最外面:container 裡面: 上:head 中:content sidebar 下:foot wrapper
LAYOUT 07 方框圍繞 base_layout07.html
LAYOUT 08 邊框區隔 layout08.html
LAYOUT 08 邊框區隔 layout08.html 最外面:container 裡面: 上:head 中:content sidebar 下:foot wrapper
LAYOUT 08 邊框區隔 base_layout08.html