流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。
优势
- 页面会伸展到整个浏览器窗口,所以即使在大屏幕上,页面的周围 也没有空白;
- 如果用户的窗口很小,页面就会收缩以适应窗口,而不必横向滚动;
- 即使用户设置的字体比设计人预设的更大,这种设计也可以适应(因为页面可以伸展)。
劣势
- 如果不对页面各个部分的宽度加以控制,那么页面设计会和预期的效果大相径庭,例如某些项目或元素挤压到一起,其周围出现意想不到的空隙;
- 如果用户的窗口非常宽,文本行就会很长,以至于难以阅读;
- 如果用户的窗口非常窄,单词可能会被挤压,导致每行只有几个单词;
- 如果一个固定宽度的元素位于一个不能容纳它的盒子里,那么这个元素就会溢出盒子。
由于流体布局可以伸展到浏览器窗口的整个宽度,产生难以阅读的长文本行,所以有些流媒体布局只让页面的一部分伸展和收缩。
在页面的其它部分则限制最大和最小宽度。
下面的代码演示了流体布局,关键技术是设置宽度单位为百分比。
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"
>
<
div
id
=
"nav"
>
<
ul
>
<
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"
>
</
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"
>
</
div
>
</
body
>
</
html
>
|
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。