1. 前言
本篇是JavaWeb学习之路，CSS部分的最后一章。
从第24章初识CSS，到第53章CSS应用实例之布局，CSS部分正好写了30篇。
如果大家一直在跟随我的脚步，想必获益匪浅吧，恭喜你们，在学习之路上又迈出了坚实的一步。
我也会继续努力，把后面的JavaScript/jQuery/Java/MySQL等内容讲好，从而培养真正掌握JavaWeb开发技能的技能人才。
2. 本章任务
本章介绍如何实现一个包含标题栏、导航栏、内容区域、底部版权区域，且内容区域左右分列的标准网站，如下图：
3. 开发过程
3.1 设定全局样式
通过CSS的通用选择器(*)设置所有元素内外边距为0px，然后设置body区域背景色为白色。
/* 全局 */
* {
margin: 0px;
padding: 0px;
}
body {
background: white;
}
3.2 头部标题栏样式
头部标题栏包含标题：
<div class="header">
<h1>熊猫诗歌网</h1>
</div>
为标题设置背景色、文字水平居中、标题栏高度控制在80px，且通过line-height高度等于标题栏高度使文字垂直居中。
/* 头部 */
.header {
/* 标题栏高度 */
height: 80px;
/* 垂直居中 */
line-height: 80px;
background: white;
/* 水平居中 */
text-align: center;
}
此时效果如下：
3.3 导航栏样式
在JavaWeb学习之路(51)–CSS应用实例之导航栏中，我们详细介绍了如何实现一个导航栏，此处我们直接复用第51章中编写的导航栏。之前文章讲的很详细了，此处不再具体讲解如何实现导航栏。
注意我们修改了一个地方，就是去掉了nav的margin，这样让导航栏宽度占满屏幕。
<ul class="nav">
<li><a href="#">唐诗</a></li>
<li><a href="#">宋词</a></li>
<li><a href="#">元曲</a></li>
<li><a href="#">现代诗</a></li>
</ul>
CSS：
/* 导航 */
.nav {
height: 44px;
background-color: #1479D7;
padding: 0;
list-style-type: none;
}
.nav li {
height: 44px;
float: left;
}
.nav li a {
font-family: SimSun, Arial, "Arial Narrow", HELVETICA;
font-size: 1.1em;
color: white;
text-decoration: none;
line-height: 44px;
margin: 0 18px;
}
.nav li a:hover {
color: #14539A;
background-color: #CBE1ED;
}
此时效果如下：
3.4 内容区域
内容区域分为左右两部分，所以代码如下：
<div class="row">
<div class="left-area">
</div>
<div class="right-area">
</div>
</div>
我们通过float，使左右两部分从左至右横向排列，然后设置左右测比例分别为70%、25%，注意加起来要比100%少一些，不然margin或padding占据的空间会使整个宽度超过100%。
/* 左侧 */
.left-area {
min-height: 750px;
float: left;
width: 70%;
margin-left: 16px;
}
/* 右侧 */
.right-area {
float: left;
width: 25%;
margin-left: 24px;
}
在左侧区域添加诗歌：
<div class="left-area">
<div class="poem-box">
<h2>凉州词</h2>
<p>
黄河远上白云间，一片孤城万仞山，羌笛何须怨杨柳，春风不度玉门关
</p>
</div>
<div class="poem-box">
<h2>将进酒</h2>
<p>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不愿醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
</p>
</div>
<div class="poem-box">
<h2>春江花月夜</h2>
<p>
春江潮水连海平，海上明月共潮生。
滟滟随波千万里，何处春江无月明！
江流宛转绕芳甸，月照花林皆似霰；
空里流霜不觉飞，汀上白沙看不见。
江天一色无纤尘，皎皎空中孤月轮。
江畔何人初见月？江月何年初照人？
人生代代无穷已，江月年年望相似。
</p>
</div>
</div>
为诗歌添加简单的样式：
/* 诗歌 */
.poem-box {
background-color: #E9EBEC;
padding: 10px;
margin: 24px 0px;
}
为右侧区域添加作者：
<div class="right-area">
<div class="author-box">
<h3>诗人</h3>
<p>李白</p>
<p>杜甫</p>
<p>白居易</p>
</div>
</div>
为作者区域添加简单的样式：
/* 作者 */
.author-box {
background-color: #E9EBEC;
padding: 8px;
margin: 24px 0px;
}
/* 条目 */
.author-box p {
padding: 16px 0px;
}
此时效果如下：
3.5 底部版权区域
在底部添加版权区域：
<div class="footer">
版权所有：熊猫大哥大
</div>
为底部区域添加简单样式，需要注意的是由于内容区域使用了float浮动，到底部的时候需要通过clear: both;清除浮动，从而继续往下占据正常的空间。
/* 底部 */
.footer {
clear: both;
background: #5576BD;
height: 48px;
line-height: 48px;
text-align: center;
}
最终效果如下：
4. 小结
整体还是从上到下，依次编写。中间内容区域通过浮动分为两栏，整体还是比较简单的。