单列布局1
头部和底部占满浏览窗口，内容限定宽度并居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.header,.content,.footer{
text-align: center;
}
.header{
width: 100%;
background-color: #ac8daf;
}
.content{
width: 1200px;
margin: 0 auto;
background-color:#ddb6c6;
}
.footer{
width: 100%;
background-color: #ac8daf;
}
</style>
</head>
<body>
<div class="header">头部导航栏</div>
<div class="content">中间内容区</div>
<div class="footer">尾部导航栏</div>
</body>
</html>
单列布局2
限定最大宽度，超过最大宽度时自适应显示，水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
max-width: 1300px;
margin: 0 auto;
}
.header,.content,.footer{
text-align: center;
}
.header{
background-color: #ac8daf;
}
.content{
background-color:#ddb6c6;
}
.footer{
background-color: #ac8daf;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">头部导航栏</div>
</div>
<div class="wrap">
<div class="content">中间内容区</div>
</div>
<div class="wrap">
<div class="footer">尾部导航栏</div>
</div>
</body>
</html>
下一篇：两栏布局
