如何做到顶部和底部背景全屏，网页内容居中？
我是CSS的新手，我看了一下这个演示站点的布局，标题、导航栏背景和尾部背景都是全屏的，但内容都居中。还有九格陈列的商品。
想知道如何实现这个布局?
能提供CSS参考指导吗?
可以设置border的margin和padding为0。border就可以紧贴浏览器。另外给父盒子设置一个text-align:centent，里面的内容就可以居中 用这个试试看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
body{
min-width: 1200px;
}
#head{
height: 60px;
background: red;
}
#head-search{
width: 1200px;
margin: 0 auto;
height: 60px;
background: orange;
}
#nav{
height: 60px;
background: yellow;
}
#main{
width: 1200px;
margin: 0 auto;
min-height: 800px;
background: blue;
}
#footer{
height: 60px;
background: gray;
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="head-search">
</div>
<div id="nav">
</div>
<div id="main">
</div>
<div id="footer">
</div>
</body>
</html>
页:
[1]