流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。
优势
- 页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白；
- 如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动；
- 即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。
劣势
- 如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大相径庭，例如某些项目或元素挤压到一起，其周围出现意想不到的空隙；
- 如果用户的窗口非常宽，文本行就会很长，以至于难以阅读；
- 如果用户的窗口非常窄，单词可能会被挤压，导致每行只有几个单词；
- 如果一个固定宽度的元素位于一个不能容纳它的盒子里，那么这个元素就会溢出盒子。
由于流体布局可以伸展到浏览器窗口的整个宽度，产生难以阅读的长文本行，所以有些流媒体布局只让页面的一部分伸展和收缩。
在页面的其它部分则限制最大和最小宽度。
下面的代码演示了流体布局，关键技术是设置宽度单位为百分比。
|
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 { 90%; margin: 0 auto;} #content { overflow: auto;} #nav, #feature, #footer { margin: 1%;} .column1, .column2, .column3 { 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> |