本篇实现一个上标题栏，下版权声明，中间左侧菜单栏，中间右侧内容区域的最常用的、灰常简单的网页布局，依然是借助于CSS实现布局。
整体思路上：
1，先设计html部分，有四个区域的div，分别命名为titile、copyright、menu、content。代码如下：
<html> <head> <style type="text/css"> </style> </head> <body> <div id="title">猫哥的个人主页 </div> <div id="menu">菜单区 </div> <div id="content">主要内容 </div> <div id="copyright">版权所有：猫哥 </div> </body> </html>
哎，稍微的自恋下，这段代码是多么的干净优雅…，一点杂质都么的有，英文单词的选择是那么的流畅舒适（哈哈，猫哥全是蹩脚的Chinese English，见笑见笑）。
2，好的，菜单区域，得有几个菜单选项，而且最好是换行的（区分的比较明显），换行用div就行，所以修改如下：
<html> <head> <style type="text/css"> </style> </head> <body> <div id="title"> 猫哥的个人主页 </div> <div id="menu"> 菜单区 <div>猫哥个人介绍</div> <div>猫哥的文章</div> <div>猫哥的评论</div> <div>猫哥的回复</div> </div> <div id="content"> 主要内容 </div> <div id="copyright"> 版权所有：猫哥 </div> </body> </html>
3，好，然后为了给每个div定义位置和样式，编辑style区域，使用#和id选定标签，修改后如下：
<html> <head> <style type="text/css"> #title{} #menu{} #content{} #copyright{} </style> </head> <body> <div id="title"> 猫哥的个人主页 </div> <div id="menu"> 菜单区 <div>猫哥个人介绍</div> <div>猫哥的文章</div> <div>猫哥的评论</div> <div>猫哥的回复</div> </div> <div id="content"> 主要内容 </div> <div id="copyright"> 版权所有：猫哥 </div> </body> </html>
4，为了明显的区分区域，猫哥给四块区域设置上不同的背景颜色哦，背景颜色在CSS语言里使用background-color:#XXXXXX来描述，其中XXXXXX表示颜色的值（很多漂亮的颜色可以用取色器取值哦，所以猫哥就取了几个：#7CFC00、#7CCD7C、#008B8B、#9370DB）。好的，改为以下代码：
<html> <head> <style type="text/css"> #title{background-color:#7CFC00;} #menu{background-color:#7CCD7C;} #content{background-color:#008B8B;} #copyright{background-color: #9370DB;} </style> </head> <body> <div id="title"> 猫哥的个人主页 </div> <div id="menu"> 菜单区 <div>猫哥个人介绍</div> <div>猫哥的文章</div> <div>猫哥的评论</div> <div>猫哥的回复</div> </div> <div id="content"> 主要内容 </div> <div id="copyright"> 版权所有：猫哥 </div> </body> </html>
这样，一下子整个网页变得绚烂多彩了，哈哈
5，最后，要实现最重要的一步，那就是布局，掌握这几个CSS语法就行。height:100px;width:100px;float:left;text-align:center;。它表示高度100像素、宽度100像素，靠左漂浮（float），文字靠中间排列(align)。所以咱结合这几个CSS语法这样设计：
<html> <head> <style type="text/css"> #title{background-color:#7CFC00;text-align:center;} #menu{background-color:#7CCD7C;height:300px;width:200px;float:left;} #content{background-color:#008B8B;height:300px;width:300px;float:right;"} #copyright{background-color: #9370DB;text-align:center;} </style> </head> <body> <div id="title"> 猫哥的个人主页 </div> <div id="menu"> 菜单区 <div>猫哥个人介绍</div> <div>猫哥的文章</div> <div>猫哥的评论</div> <div>猫哥的回复</div> </div> <div id="content"> 主要内容 </div> <div id="copyright"> 版权所有：猫哥 </div> </body> </html>
感觉这下可行了吧，哈哈，运行下代码发现效果如图：
首先，输出了title部分，然后换行，没问题。
然后，菜单栏menu居左，内容栏content居右，也没问题。
然后左右一共占用200+300=500px像素，浏览器此时宽度>500px，中间是空闲的，所以继续输出的copyright部分就放在中间。
6，那要想实现版权部分在最下面咋办，其实很简单，不是一共500吗，我限定死一行就500宽不就完了，代码如下：
<html> <head> <style type="text/css"> #title{background-color:#7CFC00;text-align:center;} #menu{background-color:#7CCD7C;height:300px;width:200px;float:left;} #content{background-color:#008B8B;height:300px;width:300px;float:right;"} #copyright{background-color: #9370DB;text-align:center;} #body{width:500px;} </style> </head> <body> <div id="body"> <div id="title"> 猫哥的个人主页 </div> <div id="menu"> 菜单区 <div>猫哥个人介绍</div> <div>猫哥的文章</div> <div>猫哥的评论</div> <div>猫哥的回复</div> </div> <div id="content"> 主要内容 </div> <div id="copyright"> 版权所有：猫哥 </div> </div> </body> </html>
哈哈，简直就是完美，通过把所有区域放在总区域body中，然后限定body宽度500px，这样菜单区和内容区占满了一行，最后的版权区域只能再往下输出啦。但是好像如果整个body部分放在中间就好了，不要紧，再改下#body部分为#body{width:500px;align:center;margin:0px auto;}，就实现了，至于为啥margin了一下就居中了，提示下，margin表示外边距，0px表示上下都为0，auto表示左右自动调整。自动这个就厉害了，灰常厉害，在很多应用里，居中是需要计算来实现的，多谢CSS语言，它跟浏览器的沟通是那么自然，让网页一端简单了许多！
网页篇到此结束了，下面开始另一段旅程！
