用CSS的float和clear特性开展3栏网页页面合理布局

2021-03-14 01:51 jianzhan
3栏合理布局是最多见的网页页面合理布局,关键页內容放在正中间1栏,旁边的两栏置放导航栏连接之类的內容。基础合理布局1般是题目之下置放3栏,3栏占有全部网页页面的宽度,最终在页的底端置放页脚,页脚也占有全部网页页面宽度。本文详细介绍1种用CSS的float和clear特性来得到3栏合理布局的方式。
绝大部分网页页面设计方案者都熟习传统式的网页页面设计方案技术性,用这些技术性能够转化成带有报表、建立固定不动宽度合理布局或“液态”(它能够依据客户访问器对话框宽度全自动伸缩)合理布局的网页页面。
基础方式
基础的合理布局包括5个div,即题目、页脚和3栏。题目和页脚占有全部页宽。左栏div和右栏div全是固定不动宽度的,而且用float特性来把它们挤压到访问器对话框的左边和右边。中栏具体上占有了全部页宽,中栏的內容在左、右两栏之间“流淌”。因为中栏div的宽度其实不固定不动,因而它能够依据访问器对话框的更改开展必要的伸缩。中栏div的左边和右边的填充(padding)特性确保內容分配在1个齐整的栏中,乃至当它屈伸到边栏(左栏或右栏)的底端也是这样。
3栏合理布局的1个事例
XHTML编码:

拷贝编码
编码以下:

<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...
</div>
</body>

下面是CSS编码:

拷贝编码
编码以下:

body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}