点此查看 所有教程、项目、源码导航
本文目录
- 1. 前言
- 2. 本章任务
- 3. 开发过程
- 3.1 设定全局样式
- 3.2 头部标题栏样式
- 3.3 导航栏样式
- 3.4 内容区域
- 3.5 底部版权区域
- 4. 小结
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. 小结
整体还是从上到下，依次编写。中间内容区域通过浮动分为两栏，整体还是比较简单的。
