固定宽度布局的设计不会因为用户扩大或缩小浏览器窗口而发生变化。
这种设计通常以像素作为衡量单位。
优势
劣势
- 页面的边缘可能存在大块空白区域
- 如果用户的屏幕比设计人员的屏幕拥有更高的分辨率,那么页面可能看起来很小,文本也可能难以阅读
- 如果用户放大了字段大小,文本可能会与指定的区域相适应
- 相比流体布局,对于同样的内容,这种页面常常在垂直方向上占用更多的空间
示例
<!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
>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。