1.先看一下效果
头行、脚行和中间部分的最小宽度可设，当浏览器视窗宽度大于此值时，按比例增长，中间部分划分为三栏，三栏宽度比例固定，但宽度皆不固定，随览器视窗宽度变化而变化，三栏的高度自适应内容，脚标自动适应漂浮栏的长度大于中间栏的情况。
2.代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
*{margin:0px;/*取消部分浏览的默认值*/
}
div
{
padding:0;/*所有div内边距为0，主要征对定位类框，
如本例中的ground、leftbar、rightbar、middle等*/
}
div.ground
{
min-width:800px;
margin:0 auto ;/*居中*/
width:80%;/*相对body的宽度*/
background-image:linear-gradient(90deg,#bdf5d9 20%,#fff 20%,#fff 80%,#f6cb8f 80%,#f6cb8f 100%);
/*上句将三栏的背景色设在ground div上，避免出现背景色中断*/
}
div.footer,div.header{
font-family:黑体;
padding:0.5em;
clear:both;
/*clear:both使元素的左右两侧都没有飘浮元素
换言之，如有飘浮元素在其左侧或右侧对其形成覆盖，则自动下
移到合适位置，刚好避开飘浮元素对的覆盖。
*/
}
/*
footer和hear的设置体现了css的一个原则，先合后分，不要颠倒。
这样的好处是如果在合规则和分规则中有相同属性的不同设置，则
总是以后边的分规则为叠层结果。应形成习惯，有利于后续维护。
*/
div.header{
text-shadow:3px 3px 3px #333;
background-color:#f00;
color:#fff;
}
div.footer{
background-color:#70e1f6;
color:#fff;
text-shadow:2px 2px 3px #333;
}
div.leftbar
{
width:20%;/*/*宽度比例*/*/
float:left;
}
div.rightbar{
width:20%;/*/*宽度比例*/*/
float:right;
/*飘浮者的上限是其在文档位置的前的一个块元素的下边沿，下限没有规定*/
}
div.center
{
margin:0 20% 0 20%;
/*仍在流中*/
}
div.forcontent
{
padding:0.5em;
/*这是用于盛放内容的div,称之为内容框，位于定位框内*/
/*定位框内必有内容框，为何不能合并在一起？如合并，*/
/*则对其设置内边距时，会改变div的真实大小，从而使在ground中*/
/*设置的颜色发生错位*/
}
</style>
</head>
<body>
<div class="ground">
<div class="header"><h1>这是头标</h1></div>
<div class="leftbar">
<div class="forcontent">这是左侧栏.这是左侧栏.这是左侧栏.这是左侧栏.</div>
</div>
<div class="rightbar"><div class="forcontent">这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.</div></div>
<div class="center"><div class="forcontent">这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.</div></div>
<div class="footer">这是脚标。脚标div使用了clear:both;使左侧栏或右侧栏的长度长于中间栏时自动下降避开它们的覆盖。</div>
</div>
</body>
</html>
3.应充分理解float属性的机制，float在父元素内浮动，可左靠或右靠，这样可做成左右栏，中间栏不浮动，但设置margin以避开浮动的左右栏的遮挡。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
