CSS 固定布局

固定宽度布局的设计不会因为用户扩大或缩小浏览器窗口而发生变化。

这种设计通常以像素作为衡量单位。

优势

能够使用像素值精确地控制大小并定位元素
相比流体布局，设计人员能够在页面上更加自如地控制元素的外观和位置
在控制文本行的长度时可以不用考虑用户窗口的大小
相对于页面其余部分，图像的大小始终不变

劣势

页面的边缘可能存在大块空白区域
如果用户的屏幕比设计人员的屏幕拥有更高的分辨率，那么页面可能看起来很小，文本也可能难以阅读
如果用户放大了字段大小，文本可能会与指定的区域相适应
相比流体布局，对于同样的内容，这种页面常常在垂直方向上占用更多的空间

示例

下面的代码演示了固定布局，包含导航菜单、页脚、功能和3列。

<!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 >

< h2 >< a href = "https://www.liyongzhen.com/" >学编程，上利永贞网</ a ></ h2 >

< 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 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 id = "footer" >

</ div >

</ body >

</ html >

猜你喜欢