《商务网页设计与制作》长沙民政第五章DIV+css网页布局《商务网页设计与制作》长沙民政学习目标•掌握DIV+CSS方法布局网页•熟练运用CSS美化网页《商务网页设计与制作》长沙民政项目概述•小小李所在的项目团队承接了长沙市碧雅园花卉苗木基地网站建设业务，通过前期需求分析，网页美工小王已绘制了网站首页的效果图。经理让小李在两天时间内根据效果图，为该苗木基地网站制作静态的前台页面。为方便与网站后台系统集成，要求小李使用DIV+CSS技术制作网站的前台页面。最终网站首页效果图《商务网页设计与制作》长沙民政将本项目的实施分解为以下几个子任务：任务1：首页DIV框架制作任务2：内容制作任务3：CSS特效导航栏制作《商务网页设计与制作》长沙民政CSS：层叠样式表(CascadingStyleSheet),定义了如何显示HTML元素，用来控制网页的样式和布局。《商务网页设计与制作》长沙民政导入DIV+CSS已成为网站标准（或称“WEB标准”）中常用术语之一，其中DIV是一个标签，称为块元素（或层元素）。DIV元素是用来为html文档内大块（block-level）的内容提供结构和背景的元素，类似于表格技术中的
标签。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的。块的大小和位置由其属性来控制，或者是通过使用样式表（即CSS）格式化这个块来进行控制。《商务网页设计与制作》长沙民政例如在某个页面中输入如下代码：在设计模式下，产生的效果如下图所示。Div示意图《商务网页设计与制作》长沙民政在中插入以下代码，用来定义一个名为zw的样式：ThisisatestThisisatest
产生的效果如下图所示。CSS控制div外观示意图《商务网页设计与制作》长沙民政由此可见，应用了CSS的Div外观和字体大小都与默认的样式不同。因此，人们常用不同的CSS来区分DIV。（在这里#ZW为一个ID样式，其细节说明参考后续内容）《商务网页设计与制作》长沙民政任务1：首页DIV框架制作1、网页DIV层次规划通过分析，网页可以分成几个大的区域，将页面用DIV分块。DIV是HTML的标签，表示部分的意思。页面分块如下图所示：《商务网页设计与制作》长沙民政实际的页面布局及嵌套关系如下图所示。任务1：首页DIV框架制作《商务网页设计与制作》长沙民政│body{}/*HTML元素，具体不做...
