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 {
css实现三列布局
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>软件开发，成就梦想</h1>
<h2><a href="">学编程，上利永贞⽹</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>
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。