qq空间-XUECSS.CN

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ页面布局</title>
	<style type="text/css">
		body, ul, li{
			margin: 0px;
			padding: 0px;
		}
		body {
			background-image: url(img/bg.png);
			background-repeat: no-repeat;
			background-color: #E9E9E9;
			background-position: 0 41px;
		}
		.top { /*顶部固定导航:固定定位*/
			width: 100%;
			height: 41px;
			background-color: #000;
			position: fixed;
		}

.container { /*主体内容区:*/
			width: 1100px;
			height: 1000px;
			position: absolute; /*主体绝对定位*/
			top:41px;
			left:0;
			right:0;
			margin: auto;  /*主体内容水平居中*/
			z-index: -1;
		}

.container .header {  /*主体区头部*/
			height:200px;
			background-color: lightgray;
		}

.container .main {  /*内容主体区*/
			position: relative;  /*设置定位父级*/
		}

.container .main .left {  /*内容区左侧*/
			position: absolute;
			top:0;
			left:0;
			height: 520px;
			width: 170px;
			background-color: green;
		}

.container .main .right { /*内容区右侧*/
			position: absolute;
			top:0;
			right:0;
			height: 520px;
			width: 300px;
			background-color: green;
		}

.container .main .content { /*内容区*/
			height: 520px;
			margin-left:180px;
			margin-right: 310px;
			background-color: yellow;
		}

.container .footer {  /*页面底部*/
			height: 50px;
			background-color: #FD8008;
		}

</style>
</head>
<body>
	
	<div class="top">顶部固定导航区</div>
		
	
	<div class="container">

<div class="header">主体头部</div>

<div class="main">

<div class="left">主体左侧</div>

<div class="content">主体内容区</div>

<div class="right">主体右侧</div>		
		</div>
		
		<div class="footer">主体底部</div>
	</div>
</body>
</html>