Download presentation
Presentation is loading. Please wait.
1
活用XHTML/HTML+CSS並不難 Chapter 1 LAYOUT 版面配置
2
LAYOUT 01 一欄版面 layout01.html
3
LAYOUT 01 一欄版面 base_layout01.html 最外面:container 裡面: 上:head 中:content
下:foot
4
LAYOUT 01 一欄版面 base_layout01.html 等同
5
layout01.html
6
LAYOUT 02 固定式二欄版面 layout02.html
7
LAYOUT 02 固定式二欄版面 base_layout02.html 最外面:container 裡面: 上:head
中:content sidebar 下:foot
8
LAYOUT 02 固定式二欄版面 base_layout02.html 交換此二行, 側邊欄會靠左
9
layout02a.html
10
LAYOUT 03 固定三欄 layout03.html
11
LAYOUT 03 固定三欄 base_layout03.html 最外面:container 裡面: 上:head 中:sidebar01
content sidebar02 下:foot main
12
LAYOUT 03 固定三欄 base_layout03.html main body裡
13
LAYOUT 04 變動二欄 layout04.html 可隨視窗調整寬度
14
LAYOUT 04 變動二欄 base_layout04.html 最外面:container 裡面: 上:head 中:content
sidebar 下:foot
15
LAYOUT 04 變動二欄 base_layout04.html body裡
16
LAYOUT 05 變動三欄 layout05.html 可隨視窗調整寬度
17
LAYOUT 05 變動三欄 base_layout05.html 最外面:container 裡面: 上:head
中:sidebar01 content sidebar02 下:foot main main
18
LAYOUT 05 變動三欄 base_layout05.html
19
LAYOUT 06 垂直側邊欄 layout06.html
20
LAYOUT 06 垂直側邊欄 layout06.html 最外面:container 裡面: 上:head 中:content
sidebar 下:foot wrapper
21
LAYOUT 06 垂直側邊欄 base_layout06.html 不顯示超出邊界的部份
22
LAYOUT 07 方框圍繞 layout07.html
23
LAYOUT 07 方框圍繞 layout07.html 最外面:container 裡面: 上:head 中:content
sidebar 下:foot wrapper
24
LAYOUT 07 方框圍繞 base_layout07.html
25
LAYOUT 08 邊框區隔 layout08.html
26
LAYOUT 08 邊框區隔 layout08.html 最外面:container 裡面: 上:head 中:content
sidebar 下:foot wrapper
27
LAYOUT 08 邊框區隔 base_layout08.html
Similar presentations