“布局”印象中这是一个高大上的词，什么“战略布局”、“业务布局”，都是些霸道总裁们说的话，今天小编辑和你聊聊如何成为HTML里的“霸道总裁”！哈哈哈…

页面布局一般是定好大框架，再细化局部区域的美工。直接上效果：

上面这个效果把页面分为三个大区域，分别是：头部、中部、尾部，中部又分为：边栏区域、内容区域。

各位霸道总裁们理解了吗？

电脑在谁手，谁就是总裁！页面由你说得算，各种布局只要你能想到，就能做到。

另外小编辑认为页面布局需要注意的几点：易读、顺眼、稳定！

也就是说页面要让用户、访客、读者能轻易的找到想看到的内容，色调、规划是常态化（希望突出个性的总裁例外）不辣眼睛，不用配着眼药水，稳定的不经常变动，别让用户每次打开都不一样要花大量时间来找“茬”。

最后上面示例的代码如下：

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>

<div id="header">
<h1>Header 头部</h1>
</div>

<div id="nav">
边栏<br>
区域<br>
导航<br>
目录<br>
</div>

<div id="section">
<h2>内容</h2>
<p>
内容详情
</p>
<p>
内容阅览、展示的区域
</p>
</div>

<div id="footer">
尾部 www.ZHUEi.com</div>