一、一列布局
一列布局多用于网站的首页,比如360搜索,一列布局的结构简洁明了,主题突出,适合排列简单的内容,不适合多行内容,通常一列布局都是固定宽度的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一列布局</title>
<style>
*{margin:0;padding:0;}
#header{
height:50px;
min-width:960px;/*建议设置*/
background:blue;
}
#main{
width:960px;
height:800px; /* 在实际开发中不设置列的高度,让高度自适应。 */
background:green;
margin:0 auto;
}
#footer{
width:960px;
height:100px;
background:gray;
margin:0 auto;
}
</style>
</head>
<body>
<div id="header">页头</div>
<div id="main">主体内容</div>
<div id="footer">页脚</div>
</body>
</html>
二、单列宽度自适应布局。
要想宽度自适应,只需要按照百分比来设置宽度,内容就可以根据浏览器窗口自动调节大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一列自适应布局</title>
<style>
*{margin:0;padding:0;}
#header{
height:50px;
background:blue;
}
#main{
width:80%;
height:800px; /* 在实际开发中不设置列的高度,让高度自适应。 */
background:green;
margin:0 auto;
}
#footer{
width:80%;
height:50px;
background:gray;
margin:0 auto;
}
</style>
</head>
<body>
<div id="header">页头</div>
<div id="main">主体内容</div>
<div id="footer">页脚</div>
</body>
</html>
三、自适应单列布局
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>单列布局</title>
<style>
*{margin:0;padding:0;}
#wrap{
width:80%;
margin:0 auto;
border:2px solid black;
}
#header{
width:100%;
height:100px;
background:blue;
margin-bottom:10px;
}
#main{
width:100%;
margin-bottom:10px;
}
#main .content{
height:500px; /* 在实际开发中不设置列的高度,让高度自适应。 */
background:yellow;
}
#footer{
width:100%;
height:100px;
background:gray;
}
</style>
<body>
<div id="wrap">
<div id="header">页头</div>
<div id="main">主体
<div class="content">内容</div>
</div>
<div id="footer">页脚</div>
</div>
</body>
</html>