前端入门之页面布局的一点看法

常见的页面布局有如下几种：

三行模式

三列模式

三行两列模式

三行三列模式

多行多列的复杂结构

下面列举一下三行三列的基本布局：

三行三列的DIV模式：

<div id="container">
			<div id="header" class="">
			</div>
			<div id="main" class="">
				<div id="main-left" class=""></div>
				<div id="main-center" class=""></div>
				<div id="main-right" class=""></div>
			</div>
			<div id="footer" class=""></div>
		</div>

然后编写三行三列模式的CSS定义：

#container{
	width: 1200px;
	background-color: palegoldenrod;
}
#header{
	height: 400px;
	background-color: aquamarine;
}
#main{
	height: 800px;
	background: wheat;
}
#main-left{
	float: left;
	background: pink;
	width: 600px;
	height:100%;
}
#main-right{
	float: left;
	background: yellowgreen;
	width: 300px;
	height: 100%;
}
#main-center{
	background: tomato;
	width: 300px;
	height: 600px;
	float: left;
}
#footer{
	background: yellow;
	height: 200px;
	width: 100%;
}

附上其基本效果图：

这样基本就实现了第一步布局，在开始制作网页时建议先画出布局图确定基本框架再开始丰富网页的内容，初学者建议按照这种步骤来编写网页源代码，使思路更加清晰。