猫哥带你去战斗——Java Web开发——网页篇[6]—

本篇实现一个上标题栏，下版权声明，中间左侧菜单栏，中间右侧内容区域的最常用的、灰常简单的网页布局，依然是借助于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语言，它跟浏览器的沟通是那么自然，让网页一端简单了许多！

网页篇到此结束了，下面开始另一段旅程！

猫哥带你去战斗——Java Web开发——网页篇[6]——布局原创