固定宽度布局的设计不会因为用户扩大或缩小浏览器窗口而发生变化。
这种设计通常以像素作为衡量单位。
优势
劣势
- 页面的边缘可能存在大块空白区域
- 如果用户的屏幕比设计人员的屏幕拥有更高的分辨率,那么页面可能看起来很小,文本也可能难以阅读
- 如果用户放大了字段大小,文本可能会与指定的区域相适应
- 相比流体布局,对于同样的内容,这种页面常常在垂直方向上占用更多的空间
示例
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS 固定布局</
title
>
<
style
type
=
"text/css"
>
* {
color: #665544;
text-align: center;}
body {
width: 960px;
margin: 0 auto;}
#content {
overflow: auto;
height: 100%;}
#nav,#feature,#footer {
padding: 10px;
margin: 10px;}
.column1,.column2,.column3 {
width: 300px;
float: left;
margin: 10px;}
li {
display: inline;
padding: 5px;}
</
style
>
</
head
>
<
body
>
<
div
id
=
"header"
>
<
h1
style
=
"color:#706fd3"
>软件开发,成就梦想</
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
>
</
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
>