制作网站中的静态网页最重要的是什么呢？很多人肯定知道，当然是布局了。那什么是布局呢？页面布局是对页面的文字、图像或表格进行格式化版式排列。想制作出好看的网页，就必须要弄懂网页布局所用到的知识，那么需要用到哪些知识?对于初学者而言，可能比较陌生，对网页布局这块可能还不能很好的掌握，布局最主要是就是css样式，要制作好看的网页，这是最基础的部分。所以就要灵活运用css，一般css都是配合div（块元素）使用，来实现好看的页面，所以大家可以看看一些网页中常见的布局方式。
网页布局一般分为 一列布局，二列布局，三列布局和混合布局，四种布局方式。
1、一列布局
一列布局多用于网站的首页，比如360搜索，一列布局的结构简洁明了，主题突出，适合排列简单的内容，不适合多行内容，通常一列布局都是固定宽度的。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>一列布局</title>
<style>
body{ margin:0; padding:0;}
.top{ height:100px; background:blue; } /*在实际开发中，布局中的高度不能固定，让它根据内容进行自适应调整*/
.main{ width:500px; height:300px; background:#ccc; margin:0 auto;}
.footer{ width:500px; height:100px; background:pink; margin:0 auto;}
</style>
</head>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
实际效果图：
这就是典型的一列布局方式，顺便讲下margin:0 auto;的用法，这个样式在什么情况下使用呢。必须要给块元素设置宽度（width），margin:0 auto才会生效，否则设置了会不起作用，属性含义是对块元素进行水平居中。一般用的比较多。
2、二列布局
二列布局也是网页中常见的布局方式，一般都是配合浮动（float）来实现的。宽度和高度可以设置百分比形式，可以对其自适应。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>二列布局</title>
<style>
body{ margin:0; padding:0;}
.left{ width:22%; height:400px; background:blue; float:left; }
.right{ width:78%; height:400px; background:#ccc; float:right; } /*自适应宽度width*/
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
实际效果图：
这种布局方式配合浮动方法完美的实现了想要的效果，讲下所用到的知识点吧。
float:left; 是对块元素进行左浮动。
float:right; 是对块元素进行右浮动。
浮动都是根据块元素的宽度来决定浮动方向。宽度的总百分比是100%，想要排成一行两列，就必须保证宽度要等于100%；当一个块元素宽度百分比设置50%，第二个块元素设置为50%，那么会排在一行；如果第一个块元素还设置了别的样式的话，对第二个块元素设置float:right; 那么这种方式就不能出现在如上图的效果，第二个块元素就会出现在第二行的右边对齐，从而就变成了两行，这是必须主要的一点。
3、三列布局
三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。
同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>三列布局</title>
<style>
body{ margin:0; padding:0;}
.left{ width:200px; height:300px; background:blue; position:absolute; left:0; top:0;}
.middle{ height:300px; background:#ccc; margin:0 300px 0 200px; } /*0 300px表示上边距和右边距 0 200px表示下边距和左边距 */
.right{ width:300px; height:300px; background:pink; position:absolute; right:0; top:0;}
</style>
</head>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
</html>
实际效果图：
三列布局主要是多了中间一列，这个我用的方法是定位的方式实现的，也可以使用float方式。使用float的话，当第一列设置了float:left，中间一列就会根据第一列进行浮动，所以中间一列就不需要设置float，前提是一行宽度不能超过100%，否则中间一列就不会随着第一列浮动，切记！！
4、混合布局
在详细了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>混合布局</title>
<style>
body{ margin:0; padding:0;}
.top{ height:100px; background:blue; }
.top_l{ width:500px; height:100px; background:purple; margin:0 auto;}
.main{ width:500px; height:300px; background:#ccc; margin:0 auto;}
.left{ width:100px; height:300px; background:orange; float:left; }
.right{ width:400px; height:300px; float:right;}
.sub_l{ width:400px; height:150px; background:green; }
.sub_r{ width:400px; height:150px; background:black;}
.footer{ width:500px; height:100px; background:pink; margin:0 auto;}
</style>
</head>
<body>
<div class="top">
<div class="top_l"></div>
</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="sub_l"></div>
<div class="sub_r"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
实际效果图：
这是网站网页中用使用广泛的一种布局方式，在设置网站时网页可以根据个人的需求进行设计和布局，能够很好的配合css样式制作出非常漂亮的页面。其实布局也就是元素与元素之间的联系，都是随着样式的改变而改变的。
看了这篇我相信大家应该能够布局出更加好看的页面，也能够满足自己的需求。