博客列表 >网站三列布局

网站三列布局

清雨的博客
清雨的博客原创
2018年03月27日 19:52:39803浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{
		padding: 0;
		margin:0;
	}
		.top {
			width: 1000px;
			height: 60px;
			margin: auto;
			background-color: #847F7F;
		}
		.main {
			width: 1000px;
		    margin: auto;
			position: relative;
		}
		.main .left {
			position: absolute;
			width: 200px;
			height: 650px;
			top: 0;
			left: 0;
			background-color: #5E2020;
		}
		.main .right {
			position: absolute;
			width: 200px;
			height: 650px;
			top: 0;
			right: 0;
			background-color: #5E2020;
		}
		.main .content {
			height: 650px;
			margin-left: 200px;
			margin-right: 200px;
			background-color: #CEC857;
		}
		.footer {
			width: 1000px;
			height: 60px;
			margin: auto;
			background-color: #474646;
		}
	</style>
</head>
<body>
	<div class="top">
		
	</div>
	<div class="main">
		<div class="left"></div>
		<div class="content"></div>
		<div class="right"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议