鲁达 项目十 项目实践：CSS+DIV
实践目标
1、能熟练运用CSS+DIV进行网页布局；
2、熟练制作常见形式的网站导航；
3、熟悉网页中各种板块制作；
项目简介：
通过前面的学习我们基本上能够初步制作出一些简单的网页。一般的网页制作中都少不了网页的布局，导航的制作，以及一些网页板块的制作，因此在本项目中，我们接下来将进行专项练习，分别进行网页布局、通栏导航、新闻版块以及日历的制作，锻炼学生的网页制作能力。
任务一：三行两列式经典布局
任务描述：
在前面的章节中我们介绍了网页中常见的几种布局方式，接下来我们将再次动手制作一次CSS+DIV经典布局中的三行两列式布局。效果如下图所示：
任务要求：
1、头部宽570像素，高150像素，背景色为#CCC，上下边距为零，左右根据宽度自动适应，有5像素的边框，且边框为颜色#999的实线，内边距为10像素；
2、主体部分的宽600像素，高430像素，背景色为#00f，上下边距为零，左右边距根据宽度自动适应，内边距为10像素。
3、主体的左侧部分宽200像素，高400像素，背景色为#0f0，左浮动，有5像素的边框，且颜色为#999实线导航条的文字为白色，背景色为墨绿色。/4、主体的右侧宽340像素，高400像素，背景色为#0ff，右浮动，边框为5像素实线，边框颜色为#999，内边距为10像素；
5、底部宽570像素，高150像素，背景色为#f00，上下边距为零，左右根据宽度自适应，边框为5像素实线，边框颜色为#999，内边距为10像素；
6、代码简洁，层次清晰。
参考步骤及代码：
1、用DIV标记搭建整体框架；
2、分别定义头部为"header"，中间为"mainbox"，左侧为"leftbox"，右侧为"rightbox"，底部为"footer"；
3、设置header的CSS样式
4、设置mainbox的CSS样式
5、设置leftbox的CSS样式
6、设置rightbox的CSS样式
7、设置footer的CSS样式
8、保存并在浏览器中预览效果
HTML 源代码：
任务二：通栏导航制作
任务描述：
网站导航是构成网站不可或缺的部分，在网页制作中，最简洁大方也是最常见的导航形式就是通栏导航。下面我们将来了解和学习通栏导航的制作技巧。效果图如下：
任务要求：
1、导航条的背景为灰色#666，导航的文本背景为红色#c40001;
2、导航条的文字以及分割线、超级链接均为白色；
3、用列表标记制作，不允许用到表格标记，其中列表宽高为800像素以及30像素；
4、配色美观大方。
实践目标：
1、熟练运用列表标记以及浮动属性制作导航；
参考步骤及代码：
1、搭建HTML框架，定义一个div，并设置div的id为nav；
2、在<div></div>标记中定义一个八列的列表标记；
3、定义选择符"nav"的CSS样式，以及<ul></ul>标记，<li></li>标记，<a>标记的CSS样式；
HTML 源代码：
任务三：新闻版块制作
任务描述：
新闻以及热点、推荐等版块是网站上的常见版块，也是构成网站不可或缺的部分。本任务旨在带领同学制作一个简单的新闻版块，为后面制作复杂的网页打下基础。效果图如下：
图：新闻版块
任务要求：
1、用CSS+DIV以及列表标记制作新闻版块；
2、新闻版块的宽为200px，高为280像素，一个像素的实线宽，灰色，左边距为50像素；
3、"公司新闻"字样为二级标记，14号字，粗体，行高30像素，背景图片为素材中的bg.png，左边的填充距离为15像素；
4、列表中的文字为12像素，行高35像素，列表符号用素材中提供的五角星图案，左边距为33像素；
实践目标：
1、熟练运用CSS+DIV；
2、熟练制作各种网页版块，新闻列表等。
参考步骤及代码：
1、搭建HTML框架，定义<div></div>标记，二级标题，以及列表标记；
2、给<div></div>的id命名为news;
3、定义<ul></ul>、<li></li>、h2标记的边距以及填充距离均为零；
4、定义选择符news的样式，以及h2、<li></li>以及<span></span>标记的样式；
HTML 源代码：
任务四：日历的制作
任务描述：
运用CSS+DIV制作出一个小日历，效果如下图所示：
任务要求：
1、运用CSS+DIV布局；
2、日历的背景色为灰色#CCC，宽430像素，高250像素，上填充距离为20，左填充距离也为20像素，下右填充距均为零；
3、月份所在的块，宽410像素，高30像素，背景色为白色，文本居中显示，行高30像素；
4、日期数字所在的块宽50像素，高30像素，背景色为白色，文本居中显示，行高30像素，左浮动，上边距以及右边距均为10像素，下边距以及左边距均为零像素；
实践目标：
1、熟练运用CSS+DIV；
2、熟练制作各种网页版块，新闻列表等。
参考步骤：
1、搭建HTML框架，并给各个<div></div>标记命名id，日历对应的id为yl，月份对应的id为yf，日期对应的id为rq；
2、定义yl、yf、rq三个选择符的CSS样式
HTML 源代码：
项目总结：
本项目中通过对CSS+DIV的运用制作出了常见的经典网页布局，通栏导航、新闻版块以及日历。这四个小案例在日常的网页运用中非常广泛，尤其是前面三种。只有通过这四个案例的联系，才能对CSS+DIV的领悟更加深刻，为日后制作更复杂的网页奠定基础。
作业：
一、简答题
1.常见的网页布局还有哪些？
2.在制作导航的时候如何让竖向排列的列表标记横向排列？
3.制作新闻版块的时候如何去掉默认的列表项目符号？
二、问答题
1.制作导航时，如何实现鼠标经过时显示二级菜单的效果？