《DIV+CSS布局基础经典-经典精品精华典藏超值实用珍藏版系列培训课件专题素材材料.ppt》由会员分享，可在线阅读，更多相关《DIV+CSS布局基础经典-经典精品精华典藏超值实用珍藏版系列培训课件专题素材材料.ppt（53页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、?DIV+CSS?DIV+CSS布局根底经典布局根底经典布局根底经典布局根底经典?课程大纲课程大纲123传统布局传统布局与与CSSCSS布局布局XHTMLXHTML与与CSSCSS根底根底4CSSCSS网页布局与定位网页布局与定位实例：实例：三栏居中式布局三栏居中式布局1.1.1 传统传统Table布局布局v传统Table布局方式只是利用了HTML的table元素所具有的零边框特性v因此，Table布局的核心是：v 设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格有时候会出现屡次嵌套，显然，这样不利于设计和修改。1.1.2
2、传统传统Table布局示意图布局示意图1.1.3 Table布局的缺点布局的缺点设计复杂，改版时工作量巨大表现代码与内容混合，可读性差 不利于数据调用分析网页文件量大，浏览器解析速度慢如蜗牛2.2.0 Web标准的构成选标准的构成选表现表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等.主要技术就是CSS,目前版本2.0行为行为：是指对整个文档内部的一个模型进行定义及交互行为的编写 主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言)结构结构：用来对网页中的信息进行整理与分类，常用的技术有：HTML、XHTML、XML1.2.1 Web标准布
3、局标准布局v基于Web标准的网站设计的核心目的：v 如何使网页的表现与内容别离！v这样做的好处：v高效率的开发与简单维护v信息跨平台的可用性v降低效劳器本钱；加快网页解析速度v更良好的用户体验v那么，CSS2.0从真正意义实现了设计代码与内容别离1.2.2 DIV+CSS布局示意图布局示意图 真正的表现与内容完全别离，代码可读性强，样式可重复应用1.2.3 CSS布局代码例如布局代码例如测试页头部主体尾部Xhtml文档*font-family:Arial,Helvetica,sans-serif,宋体;font-size:12px;margin:0px;text-align:center;#c
4、ontainer width:810px;margin:auto;background:#CCCCCC;#header height:100px;width:800px;padding:5px;background-color:#6699FF;#content height:400px;width:800px;padding:5px;background-color#FF9900;#footer width:800px;height:50px;padding:5px;background-color:#6699FF;Style1.css最终布局效果2.1.1 向向Web标准过度标准过度/XHT
5、ML 根底根底S为什么要使用XHTML?S XHTML是在HTML4.0根底上，用XML规那么扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。S HTML:更多的被用于网页设计和表现S XHTML:它的初衷就不是为了表现，而是对网页内 S 容进行结构设计，严格的说它是面向文档S 结构的语言，更符合未来的开展要求！2.1.2 选择适宜的选择适宜的DTD 一个标准的XHTML文档，必须以Doctype标签作为开始，doctype用于定义文档类型。对于XHTML而言，可以选择三种不同的XHTML文档类型，请看下面代码：无标题文档 TransitionalTransitional类
6、型：过度类型。浏览器对类型：过度类型。浏览器对XHTMLXHTML的解析将为宽松建议使用的解析将为宽松建议使用StrictStrict类型：严格类型。文档中不允许使用任何表现样式的标识和属性类型：严格类型。文档中不允许使用任何表现样式的标识和属性FramesetFrameset类型：框架页类型。网页使用框架结构时，声明此类型类型：框架页类型。网页使用框架结构时，声明此类型 2.1.3 DreamweaverCS3中中DTDDTD文档类型选择画面2.1.4 XHTML 语法标准语法标准1属性名称必须小写2属性值必须使用双引号3不允许使用标签简写4使用id替代name5必须使用结束标签6注意：选择
7、适宜的标签区别与table布局的习惯.7 布局用：；8 文本用：，9 图片用：10 列表用：11 数据用：12 其他的：form，input，select各各司司其其职职2.2.1 CSS语法根底语法根底S何为何为CSSCSSCascading Style SheetCascading Style Sheet？S CSS CSS中文译为层叠样式表。是用于控制网页样式并允许中文译为层叠样式表。是用于控制网页样式并允许S 将样式信息与网页内容别离的一种标记性语言。将样式信息与网页内容别离的一种标记性语言。S 即即:告诉浏览器，这段样式将应用到哪个对象告诉浏览器，这段样式将应用到哪个对象.CSSCS
8、S语法结构语法结构:选择符 属性1:值1；属性2:值2 举例：body font-size:12px;text-align:center;参数说明：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开CSSCSS选择器选择器选择器选择器2.2.2 CSS选择器符选择器符标签选择器：标签选择器：标签选择器：标签选择器：指以网页中已有的标签名作为名称的选择指以网页中已有的标签名作为名称的选择指以网页中已有的标签名作为名称的选择指以网页中已有的标签名作为名称的选择器，几乎所有的器，几乎所有的器，几乎所有的器，几乎所有的htmlhtml标签均可用作该类选标签均可用作该类选标签均可
9、用作该类选标签均可用作该类选择器如：择器如：择器如：择器如：body p h1 body p h1 等等等等等等等等.类别选择器：类别选择器：类别选择器：类别选择器：属用户自定义名称的选择器，可以在属用户自定义名称的选择器，可以在属用户自定义名称的选择器，可以在属用户自定义名称的选择器，可以在XHTMLXHTML标签中用标签中用标签中用标签中用class=“class=“为相应标签指派样式。可为相应标签指派样式。可为相应标签指派样式。可为相应标签指派样式。可理解为一类。理解为一类。理解为一类。理解为一类。特点：在文档中允许被重复使用特点：在文档中允许被重复使用特点：在文档中允许被重复使用特点：
10、在文档中允许被重复使用Id Id 选择器：选择器：选择器：选择器：属用户自定义名称选择器，基于属用户自定义名称选择器，基于属用户自定义名称选择器，基于属用户自定义名称选择器，基于DOMDOM文档对象文档对象文档对象文档对象模型原理出现的选择器，可以在模型原理出现的选择器，可以在模型原理出现的选择器，可以在模型原理出现的选择器，可以在XHTMLXHTML标签中标签中标签中标签中用用用用id=“id=“为相应标签指派样式，可理解为一个标为相应标签指派样式，可理解为一个标为相应标签指派样式，可理解为一个标为相应标签指派样式，可理解为一个标识识识识特点：在网页中，每个特点：在网页中，每个特点：在网页中
11、，每个特点：在网页中，每个idid名称只能使用一次名称只能使用一次名称只能使用一次名称只能使用一次2.2.3 选择器的声明选择器的声明body,td,th,#header,.onecolor:blue;font-size:12px;vv集体声明集体声明集体声明集体声明:并列关系P h1color:blue;font-size:14px;vv嵌套声明嵌套声明嵌套声明嵌套声明:附属关系附属关系附属关系附属关系P H1,#header ulcolor:blue;font-size:12px;vv混合声明混合声明混合声明混合声明:并列及附属关系并列及附属关系并列及附属关系并列及附属关系2.2.4 如何
12、应用如何应用CSS到网页中到网页中行内样式表内部内嵌样式表外部链接样式表导入式样式表CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中，选择方式可根据我们对设计的不同表现手段来制定，一般按CSS代码位置分为：2.2.5 实例代码实例代码:CSS按位置的分类按位置的分类测试页 头部 主体 尾部 在之间参加 import url(css/style2.css);称为：导入式样式表2.2.5 样式优先权问题样式优先权问题2.6 CSS开发环境与调试环境开发环境与调试环境3.1 被遗忘的主角被遗忘的主角 DIV3.2 CSS盒子模型盒子模型3.3 文档流及浮动概念文档流及浮动概念3.4 浮
13、动定位与绝对定位浮动定位与绝对定位4.0 一个简单的一个简单的CSS布局实例布局实例网页制作流程：效果图切图布局DIV+CSS、table 嵌入动态程序或模板标签测试发布学习要点及学习要点及1.11.21.3传统布局于传统布局于CSSCSS布局的区别布局的区别1.21.3 CSS CSSCascading Style SheetCascading Style Sheet，中文译为层，中文译为层叠样式表。是用于控制网页样式并允许将样式信息叠样式表。是用于控制网页样式并允许将样式信息与网页内容别离的一种标记性语言。与网页内容别离的一种标记性语言。【本章学习目的】【本章学习目的】本章通过多个本章通过
14、多个CSSCSS样式的应用实例，重点介绍样式的应用实例，重点介绍了了CSSCSS样式表功能、定义样式表功能、定义CSSCSS规那么的方法，应用内规那么的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解的学习，读者应了解CSSCSS样式表的用途，掌握创立样式表的用途，掌握创立和应用和应用CSSCSS样式表的方法，学会用样式表的方法，学会用CSSCSS样式表进行网样式表进行网页的美化和网页布局。页的美化和网页布局。5.1 利用CSS 样式表的网页实例 CSSCSS样式表是由一系列样式选择器和样式表是由一系列样式选择器和CSSCS
15、S属性组成，它属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。式化功能。使用使用CSSCSS样式表的另一个优点是可以利用同一个样式样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作。用对每个
16、页面逐个进行修改，简化了格式化网页的工作。5.1 利用CSS 样式表的网页实例 【例【例5.55.5】利用】利用CSSCSS样式还可以代替表格进行网页布局，样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式，如下图。这是目前较为流行页面排版方式，如下图。该实例主要采用了该实例主要采用了divdiv标签标签csscss样式，涉及到的知识样式，涉及到的知识点有以下几点：点有以下几点：分析构架：画出构架图；分析构架：画出构架图；模块拆分：分别定义模块拆分：分别定义DivDiv的的CSSCSS样式；样式；在网页中插入在网页中插入DivDiv标签，在标签，在DivDiv中填充网页内容；中填充网
17、页内容；总体调整：色彩及内容调整，适当修改总体调整：色彩及内容调整，适当修改CSSCSS样式。样式。5.2 5.2 使用CSS样式表v5.2.1 CSS5.2.1 CSS样式表概述样式表概述 1、样式表的使用样式表的使用 CSSCSS样式表的使用常用的方法有以下两种：样式表的使用常用的方法有以下两种：页面内嵌法。将样式表代码直接写在页面内嵌法。将样式表代码直接写在HTMLHTML标签的标签的headhead区。区。外部链接法。将样式表写在一个独立的后缀名为外部链接法。将样式表写在一个独立的后缀名为CSSCSS文件中，在需要应用文件中，在需要应用CSSCSS样式的网页中链接该文件，样式的网页中链
18、接该文件，在页面在页面和和之间用以下代码调用。之间用以下代码调用。link href=css/master.css rel=stylesheet type=text/css/5.2 5.2 使用CSS样式表2 2、CSSCSS样式表语法样式表语法选择符选择符 属性属性1 1：值：值1 1；属性；属性2 2：值：值2 2 参数说明：参数说明：属性和属性值之间用冒号属性和属性值之间用冒号(:)(:)隔开，定义多个属性时，隔开，定义多个属性时，属性之间用分号属性之间用分号(;)(;)隔开。隔开。v1.1.创立创立CSSCSS样式样式v选择选择“窗口菜单窗口菜单“CSS“CSS样式命令，翻开样式命令，
19、翻开“CSS“CSS样式面板，单击样式面板，单击右下角的右下角的“新建新建CSSCSS规那么按钮，或选择规那么按钮，或选择“文本菜单文本菜单“CSS“CSS样式样式“新建命令，弹出新建命令，弹出“新建新建CSSCSS规那么对话框规那么对话框.5.2.2 在Dreamweaver中定义CSS5.2.2 在Dreamweaver中定义CSS选择器类型有以下三种：选择器类型有以下三种：1 1 类类 自定义自定义 CSS CSS 规那么，它的特点是灵活多变，可规那么，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在以重复将样式应用于网页元素。在应用时，它会在HTMLHTML标标签内参
20、加一个类签内参加一个类classclass的定久来规定标签中的格式。的定久来规定标签中的格式。比方将类的样式比方将类的样式mystylemystyle定义于某个标题，那么代码为：定义于某个标题，那么代码为：h1 class=标题标题1 1应用自定义的样式应用自定义的样式2 2 标签标签 重新定义指定标签的外观，例如：创立或更改重新定义指定标签的外观，例如：创立或更改 h1 h1 标签的标签的 CSS CSS 样式时，所有用样式时，所有用 h1 h1 标签设置了格式的文标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。本都会立即更新，实现了批量快速更改格式的特点。5.2.2 在Dr
21、eamweaver中定义CSS3 3 高级高级 在在CSS CSS 选择器中，它的功能最为强大，可以定义超链选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置例如：接的特效，定义特定元素组合的格式设置例如：body,table,tdbody,table,td，用逗号隔开，定义嵌套的样式，用逗号隔开，定义嵌套的样式td td imgimg空格隔开，定义包含特定空格隔开，定义包含特定 id id 属性的标签的格式属性的标签的格式设置。设置。定义的位置有以下三种情况：定义的位置有以下三种情况：选择选择“仅为该文档，此时仅为该文档，此时CSSCSS样式的代码会嵌套在样式的代码
22、会嵌套在网页网页和和标签中。标签中。选择选择“新建样式表文件，那么弹出新建样式表文件，那么弹出“保存样式表保存样式表文件为对话框，如图文件为对话框，如图5.55.5所示，选择样式文件的存所示，选择样式文件的存储路径和文件名，单击储路径和文件名，单击“保存按钮，将保存按钮，将CSSCSS样式代样式代码单独存放在一个码单独存放在一个CSSCSS文件。文件。选择选择“已有的某已有的某CSSCSS文件，将新建的文件，将新建的CSSCSS规那么写规那么写入已有的入已有的csscss文件中。文件中。比方：选择定义在比方：选择定义在“仅对该文档，单击仅对该文档，单击“确定确定按钮后，弹出按钮后，弹出“H1“
23、H1的的CSSCSS规那么定义对话框，如下规那么定义对话框，如下图，在对话框中进行各项的格式设置，然后单击图，在对话框中进行各项的格式设置，然后单击“确定按钮。确定按钮。2.2.编辑和删除编辑和删除CSSCSS样式样式 创立创立CSSCSS样式后，如果要修改样式后，如果要修改CSSCSS样式，在样式，在“CSS“CSS样式面板中，单击样式面板中，单击“CSS“CSS样式面板右下角样式面板右下角的的“编辑按钮，进入编辑按钮，进入“CSS“CSS规那么定义的对话规那么定义的对话框，可进行修改。框，可进行修改。某个某个CSSCSS样式不再需要时，在样式不再需要时，在“CSS“CSS样式面板样式面板中
24、，首先选中某个样式，单击中，首先选中某个样式，单击CSSCSS样式面板右下角样式面板右下角的的“删除按钮。删除按钮。5.3 CSS 样式的应用 【例【例5.65.6】应用】应用CSSCSS样式设计出图文混排效果，样式设计出图文混排效果，如下图。如下图。此实例所涉及到的知识点是此实例所涉及到的知识点是CSSCSS样式的创立和样式的创立和应用，主要包括以下几个方面：应用，主要包括以下几个方面：背景样式、文本及列表样式、方框与边框样式、背景样式、文本及列表样式、方框与边框样式、动态链接样式；动态链接样式；建立单独的建立单独的CSSCSS文件，应用于多个网页。文件，应用于多个网页。5.3.1 样式表的
25、应用实例1：背景样式 的应用 在【例在【例5.65.6】中，上方桔黄色的横条其实是重定义了】中，上方桔黄色的横条其实是重定义了bodybody标签的网页背景图像，背景图像横向重复，网页元素标签的网页背景图像，背景图像横向重复，网页元素与页边距也进行了设置，其操作步骤如下：与页边距也进行了设置，其操作步骤如下：步骤步骤 单击单击“窗口菜单窗口菜单“CSS“CSS样式命令，翻开样式命令，翻开“CSS“CSS样式面板，单击右下角的样式面板，单击右下角的“新建新建CSSCSS规那么按钮，规那么按钮，弹出弹出“CSS“CSS规那么定义的对话框，选择规那么定义的对话框，选择“选择器类型选择器类型为为“标签
26、，在标签，在“标签下拉列表中选择标签下拉列表中选择bodybody，定义在：，定义在：选择选择“仅为该文档，单击仅为该文档，单击“确定按钮，弹出确定按钮，弹出“body“body的的CSSCSS规那么定义的对话框，规那么定义的对话框，单击单击“背景选项卡，设置背景图像为：背景选项卡，设置背景图像为：images/bg.gifimages/bg.gif，单击，单击“重复下拉列表，选择重复下拉列表，选择“横向重复命令。横向重复命令。步骤步骤2 2 设置页边距单击设置页边距单击“方框选项卡，在边界中分方框选项卡，在边界中分别设置上、下均为别设置上、下均为5050像素，左右均为像素，左右均为10010
27、0像素。像素。5.3.2 5.3.2 样式表的实例应用样式表的实例应用2 2：文本及列：文本及列表的应用表的应用 在【例在【例5.65.6】中，文本和列表都应用了】中，文本和列表都应用了CSSCSS样式，分别样式，分别设置字体、段落、列表的相关属性。第一行文本是标题设置字体、段落、列表的相关属性。第一行文本是标题1 1标签为标签为H1H1，第二行文本是标题，第二行文本是标题2 2标签为标签为H2H2，正文，正文局部用了列表标签为局部用了列表标签为ULUL。1 1、字体的样式设置、字体的样式设置 在在“CSS“CSS规那么定义对话框的规那么定义对话框的“类型选项卡中设类型选项卡中设置。置。2 2
28、、文本段落的样式设置、文本段落的样式设置 在在“CSS“CSS规那么定义对话框的规那么定义对话框的“区块选项卡，设区块选项卡，设置。置。3 3、列表的样式设置、列表的样式设置 类型：设置工程符号或编号的外观。类型：设置工程符号或编号的外观。工程符号图像：指定图像替代工程符号的样式，美工程符号图像：指定图像替代工程符号的样式，美化工程符号。化工程符号。重定义工程列表标签为重定义工程列表标签为UL)UL)。5.3.3 样式表的实例应3：方框和边框 样式的应用 在【例在【例5.65.6】中，插入一幅图像，通过】中，插入一幅图像，通过CSSCSS样式的应用，样式的应用，实现了图文混排的效果。该实例中主
29、要设置了方框的浮动实现了图文混排的效果。该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像。这里首先定设置了边框，添加了一个虚线边框修饰图像。这里首先定义了一个类的义了一个类的CSSCSS规那么，然后将此类应用于某个图像上。规那么，然后将此类应用于某个图像上。图像边距的设置图像边距的设置 图像的边框的设置图像的边框的设置5.3.4 样式表的实例应用4：动态链接样式 简单的简单的CSSCSS链接样式可以在页面属性中的链接样式可以在页面属性中的“链接选项卡中设置，链接选项卡中设置，5
30、.15.1节中已经讲过。节中已经讲过。在【例在【例5.65.6】中，建立较为复杂的】中，建立较为复杂的CSSCSS链接样链接样式，当鼠标经过链接文字时，文字颜色会变色、式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划字体样式变粗、出现背景颜色、文字修饰有下划线等。这里还讲解两个重要的知识点：如何建立线等。这里还讲解两个重要的知识点：如何建立CSSCSS链接样式和如何调用外部链接样式和如何调用外部CSSCSS样式表。样式表。1.1.建立链接建立链接CSSCSS样式样式 单击单击“CSS“CSS样式面板中的样式面板中的“新建新建CSSCSS规那么按钮，规那么按钮
31、，选择器类型：高级，单击选择器类型：高级，单击“选择器下拉列表，分别选选择器下拉列表，分别选择择a:llinka:llink链接后效果、链接后效果、a:visiteda:visited访问后效果、访问后效果、a:hovera:hover鼠标经过效果，分别定义其样式。鼠标经过效果，分别定义其样式。2.2.调用调用CSSCSS样式文件样式文件 其它网页要应用刚刚建立的其它网页要应用刚刚建立的CSSCSS样式文件，如样式文件，如何调用呢？单击何调用呢？单击“CSS“CSS样式面板中的样式面板中的“附加样式附加样式表按钮，弹出表按钮，弹出“链接外部样式表的对话框，链接外部样式表的对话框，在在“文件文件
32、/URL/URL文本框中输入外部文本框中输入外部CSSCSS文件路径和文件路径和文件名，添加为选择文件名，添加为选择“链接选项，将新建的样链接选项，将新建的样式文件链接到此文件，如下图。式文件链接到此文件，如下图。5.3.5 样式的实例5：滤镜效果的应用 CSS CSS滤镜并不是浏览器的插件，也不符合滤镜并不是浏览器的插件，也不符合CSSCSS标准，而标准，而是微软公司为增强浏览器功能而特意开发的并整合在是微软公司为增强浏览器功能而特意开发的并整合在IEIE浏浏览器中的一类功能集合。由于浏览器览器中的一类功能集合。由于浏览器IEIE有着广泛的使用范有着广泛的使用范围，因此围，因此CSSCSS滤
33、镜也被广阔设计者所喜爱。滤镜也被广阔设计者所喜爱。CSS CSS滤镜可以为样式控制的对象指定特殊效果。滤镜可以为样式控制的对象指定特殊效果。注意：注意：CSSCSS滤镜只能作用于有区域限制的对象，如表格、滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接作用于文字，所以把所需要单元格、图片等，而不能直接作用于文字，所以把所需要增加特效的文本领先放在单元格或层中，然后对单元格或增加特效的文本领先放在单元格或层中，然后对单元格或层应用层应用CSSCSS样式。样式。vAlphaAlpha透明效果透明效果vBlurBlur模糊效果模糊效果vChromaChroma将指定的颜色设将指定的
34、颜色设置成透明置成透明vDropshadowDropshadow投影效果投影效果vFlipHFlipH进行水平翻转进行水平翻转vFlipVFlipV进行垂直翻转进行垂直翻转vGlowGlow发光效果发光效果vGrayscaleGrayscale产生灰阶产生灰阶vInvertInvert反转底片效果反转底片效果vLightLight灯光投影灯光投影vMaskMask遮罩遮罩vShadowShadow阴影效果阴影效果vWaveWave水平与垂直波动效水平与垂直波动效果果vXrayXray设置设置X X光效果光效果5.3.6 CSS5.3.6 CSS样式进阶样式进阶利用利用CSSCSSDIVDIV进
35、行网页布局的实例进行网页布局的实例 利用利用CSSCSS样式还可以代替表格进行网页布局，本小节讲解样式还可以代替表格进行网页布局，本小节讲解【例【例5.55.5】如何利用】如何利用DIVDIV标签和标签和CSSCSS样式的定义进行网页的排版。样式的定义进行网页的排版。制作过程如下：制作过程如下：1 1、分析架构，如下图。、分析架构，如下图。2 2、模块拆分、模块拆分 一个总的一个总的DIVDIV标签，它包含了标签，它包含了4 4个个DIVDIV标签。标签。ContainerContainer最大最大的容器，将所有内容包含在内。的容器，将所有内容包含在内。WidthWidth：778px778p
36、x。HeaderHeader网站头网站头部图标，包含了一幅广告横幅，部图标，包含了一幅广告横幅，WidthWidth：778px778px，Height110pxHeight110px。LeftnavLeftnav左侧导航条，左侧导航条，WidthWidth：200200，浮动为左对齐。，浮动为左对齐。ContentContent网网站的主要内容。站的主要内容。Width:480px Width:480px。FooterFooter网站底栏，包含版权网站底栏，包含版权信息等。信息等。3.3.定义页面属性和定义特定定义页面属性和定义特定 Id Id 属性的属性的DIVDIV标签的标签的CSSCSS样式。样式。4.4.插入网页元素和调整页面结构插入网页元素和调整页面结构 最后，保存网页，浏览网页效果。最后，保存网页，浏览网页效果。本 章 小 结 本章主要介绍了本章主要介绍了CSSCSS样式的创立与应用，通过样式的创立与应用，通过CSSCSS样式样式的使用，使得网页样式更加丰富多彩。的使用，使得网页样式更加丰富多彩。1 1CSSCSS的概念：的概念：CSS CSS样式、样式的分类、样式、样式的分类、CSSCSS的语法的语法结构等结构等 2 2CSSCSS样式的创立样式的创立 3 3CSSCSS样式的应用样式的应用