点此查看所有教程、项目、源码导航本文目录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 头部标题栏样式头部标题栏包含标题divclassheaderh1熊猫诗歌网/h1/div为标题设置背景色、文字水平居中、标题栏高度控制在80px且通过line-height高度等于标题栏高度使文字垂直居中。/* 头部 */.header{/* 标题栏高度 */height:80px;/* 垂直居中 */line-height:80px;background:white;/* 水平居中 */text-align:center;}此时效果如下3.3 导航栏样式在JavaWeb学习之路(51)–CSS应用实例之导航栏中我们详细介绍了如何实现一个导航栏此处我们直接复用第51章中编写的导航栏。之前文章讲的很详细了此处不再具体讲解如何实现导航栏。注意我们修改了一个地方就是去掉了nav的margin这样让导航栏宽度占满屏幕。ulclassnavliahref#唐诗/a/liliahref#宋词/a/liliahref#元曲/a/liliahref#现代诗/a/li/ulCSS/* 导航 */.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 内容区域内容区域分为左右两部分所以代码如下divclassrowdivclassleft-area/divdivclassright-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;}在左侧区域添加诗歌divclassleft-areadivclasspoem-boxh2凉州词/h2p黄河远上白云间一片孤城万仞山羌笛何须怨杨柳春风不度玉门关/p/divdivclasspoem-boxh2将进酒/h2p君不见黄河之水天上来奔流到海不复回。 君不见高堂明镜悲白发朝如青丝暮成雪。 人生得意须尽欢莫使金樽空对月。 天生我材必有用千金散尽还复来。 烹羊宰牛且为乐会须一饮三百杯。 岑夫子丹丘生将进酒杯莫停。 与君歌一曲请君为我倾耳听。 钟鼓馔玉不足贵但愿长醉不愿醒。 古来圣贤皆寂寞惟有饮者留其名。 陈王昔时宴平乐斗酒十千恣欢谑。 主人何为言少钱径须沽取对君酌。 五花马、千金裘呼儿将出换美酒与尔同销万古愁。/p/divdivclasspoem-boxh2春江花月夜/h2p春江潮水连海平海上明月共潮生。 滟滟随波千万里何处春江无月明 江流宛转绕芳甸月照花林皆似霰 空里流霜不觉飞汀上白沙看不见。 江天一色无纤尘皎皎空中孤月轮。 江畔何人初见月江月何年初照人 人生代代无穷已江月年年望相似。/p/div/div为诗歌添加简单的样式/* 诗歌 */.poem-box{background-color:#E9EBEC;padding:10px;margin:24px 0px;}为右侧区域添加作者divclassright-areadivclassauthor-boxh3诗人/h3p李白/pp杜甫/pp白居易/p/div/div为作者区域添加简单的样式/* 作者 */.author-box{background-color:#E9EBEC;padding:8px;margin:24px 0px;}/* 条目 */.author-box p{padding:16px 0px;}此时效果如下3.5 底部版权区域在底部添加版权区域divclassfooter版权所有熊猫大哥大/div为底部区域添加简单样式需要注意的是由于内容区域使用了float浮动到底部的时候需要通过clear: both;清除浮动从而继续往下占据正常的空间。/* 底部 */.footer{clear:both;background:#5576BD;height:48px;line-height:48px;text-align:center;}最终效果如下4. 小结整体还是从上到下依次编写。中间内容区域通过浮动分为两栏整体还是比较简单的。