流體布局設計隨着用戶對瀏覽器窗口的擴大或縮小而伸展或收縮。這種設計通常使用百分數。
優勢
- 頁面會伸展到整個瀏覽器窗口，所以即使在大屏幕上，頁面的周圍 也沒有空白；
- 如果用戶的窗口很小，頁面就會收縮以適應窗口，而不必橫向滾動；
- 即使用戶設置的字體比設計人預設的更大，這種設計也可以適應（因為頁面可以伸展）。
劣勢
- 如果不對頁面各個部分的寬度加以控制，那么頁面設計會和預期的效果大相徑庭，例如某些項目或元素擠壓到一起，其周圍出現意想不到的空隙；
- 如果用戶的窗口非常寬，文本行就會很長，以至於難以閱讀；
- 如果用戶的窗口非常窄，單詞可能會被擠壓，導致每行只有幾個單詞；
- 如果一個固定寬度的元素位於一個不能容納它的盒子里，那么這個元素就會溢出盒子。
由於流體布局可以伸展到瀏覽器窗口的整個寬度，產生難以閱讀的長文本行，所以有些流媒體布局只讓頁面的一部分伸展和收縮。
在頁面的其它部分則限制最大和最小寬度。
下面的代碼演示了流體布局，關鍵技術是設置寬度單位為百分比。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Liquid Layout</
title
>
<
style
type
=
"text/css"
>
* {
color: #fff;
text-align: center;}
body {
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;}
#nav, #feature, #footer {
margin: 1%;}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;}
.column3 {
margin-right: 0%;}
li {
display: inline;
padding: 0.5em;}
#nav, #footer {
padding: 0.5em 0;}
#feature, .article {
color:#fff;
height: 10em;
margin-bottom: 1em;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:#706fd3"
>軟件開發，成就夢想</
h1
>
<
div
id
=
"header"
>
<
h1
>Logo</
h1
>
<
div
id
=
"nav"
>
<
ul
>
<
li
><
a
href
=
""
>首頁</
a
></
li
>
<
li
><
a
href
=
""
>產品</
a
></
li
>
<
li
><
a
href
=
""
>服務</
a
></
li
>
<
li
><
a
href
=
""
>關於我們</
a
></
li
>
<
li
><
a
href
=
""
>聯系我們</
a
></
li
>
</
ul
>
</
div
>
</
div
>
<
div
id
=
"content"
>
<
div
id
=
"feature"
>
<
p
>功能</
p
>
</
div
>
<
div
class
=
"article column1"
>
<
p
>第一列</
p
>
</
div
>
<
div
class
=
"article column2"
>
<
p
>第二列</
p
>
</
div
>
<
div
class
=
"article column3"
>
<
p
>第三列</
p
>
</
div
>
</
div
>
<
div
id
=
"footer"
>
<
p
>© Copyright 2019</
p
>
</
div
>
</
body
>
</
html
>
|