《使用CSS样式美化和布局网页项目管理知识分析》由会员分享，可在线阅读，更多相关《使用CSS样式美化和布局网页项目管理知识分析（42页珍藏版）》请在金锄头文库上搜索。
1、使用使用CSSCSS样式美化和布局网页样式美化和布局网页项目项目7 7知识要点知识要点 了解了解CSS基本概念基本概念 1掌握掌握CSS样式的创建和使用方法样式的创建和使用方法 2掌握掌握CSS样式属性设置方法样式属性设置方法37.1 7.1 网页展示：在网页展示：在“商旅管理商旅管理”页面中应用页面中应用CSSCSS样式样式 在“商旅管理”页面中应用CSS样式 u在在“乐途网乐途网”站点的站点的“ch7”“ch7”文件夹中创建文件夹中创建“商旅管理商旅管理”页面页面ctmindex.htmlctmindex.html，运用表，运用表格布局页面，插入网页格布局页面，插入网页中相关的内容，再创建
2、中相关的内容，再创建CSSCSS样式，对网页内容进样式，对网页内容进行美化，效果如图所示。行美化，效果如图所示。 7.2 7.2 网页制作网页制作 7.2.1 7.2.1 使用表格布局制作使用表格布局制作“商旅管理页面商旅管理页面” 步骤步骤1 1 启动启动Dreamweaver CS4Dreamweaver CS4，新建，新建HTMLHTML文档，将文文档，将文档命名为档命名为ctmindex.htmlctmindex.html，保存在，保存在“乐途网乐途网”站点根目录站点根目录下的下的“ch7”“ch7”文件夹中。文件夹中。步骤步骤2 2 按照制作按照制作“乐途网乐途网”首页的方式，在首页
3、的方式，在ctmindex.htmlctmindex.html中插入表格，对中插入表格，对“商旅管理商旅管理”页面进行布页面进行布局。局。步骤步骤3 3 在表格中对应位置插入相应图片或文本，并在表格中对应位置插入相应图片或文本，并设置表格或单元格的背景颜色，完成设置表格或单元格的背景颜色，完成“商旅管理商旅管理”页面的页面的制作制作 7.2 7.2 网页制作网页制作 7.2.2 7.2.2 创建文本创建文本CSSCSS样式样式 步骤步骤1 1 打开打开“商旅管理商旅管理”子页（子页（ctmindex.htmlctmindex.html），），按下按下Shift+F11Shift+F11组合键，
4、打开【组合键，打开【CSSCSS样式】面板，单击样式】面板，单击“新新建建CSSCSS规则规则”按钮，打开【新建按钮，打开【新建CSSCSS规则】对话框。规则】对话框。步骤步骤2 2 在【选择器类型】选项组中选择在【选择器类型】选项组中选择“类（可以类（可以应用于任何应用于任何HTMLHTML元素）元素）”。在【选择器名称】下拉列表框。在【选择器名称】下拉列表框中输入类样式的名称：中输入类样式的名称：.black12.black12。在【规则定义】选项组。在【规则定义】选项组中选择中选择“新建样式表文件新建样式表文件”，若选择，若选择“仅限该文档仅限该文档”，则，则该样式只能应用在当前网页中。
5、该样式只能应用在当前网页中。 7.2 7.2 网页制作网页制作 步骤步骤3 3 单击单击“确定确定”按钮，弹出【将样式表文件另按钮，弹出【将样式表文件另存为】对话框。将存为】对话框。将CSSCSS规则定义在规则定义在mycss.cssmycss.css文件中，保存文件中，保存在站点目录下在站点目录下“ch7”“ch7”文件夹中。文件夹中。步骤步骤4 4 单击单击“保存保存”按钮，弹出【按钮，弹出【.black12.black12的的CSSCSS规规则定义】对话框，设置则定义】对话框，设置.black12.black12类样式的属性。在【分类类样式的属性。在【分类】中选择【类型】，设置字体大小为
6、】中选择【类型】，设置字体大小为“12px”“12px”，行高为，行高为“20px”“20px”，颜色为，颜色为“#000”“#000”，修饰设置为无。单击，修饰设置为无。单击“确定确定”按钮，完成按钮，完成.black12.black12的的CSSCSS规则的定义。规则的定义。 7.2 7.2 网页制作网页制作 7.2.3 7.2.3 创建表格创建表格CSSCSS样式样式 步骤步骤1 1 在【在【CSSCSS样式】面板中，单击样式】面板中，单击“新建新建CSSCSS规则规则”按钮，在【新建按钮，在【新建CSSCSS规则】对话框中定义名称为规则】对话框中定义名称为.talbe1.talbe1的
7、类样式，将样式规则定义在已经保存的的类样式，将样式规则定义在已经保存的mycss.cssmycss.css样式样式表文件中。表文件中。 步骤步骤2 2 单击单击“确定确定”按钮，打开【按钮，打开【.table1.table1的的CSSCSS规规则定义】对话框。选择【分类】中的【背景】，设置表格则定义】对话框。选择【分类】中的【背景】，设置表格背景颜色为背景颜色为“#9C0” “#9C0” 。 步骤步骤3 3 选择【分类】中的【边框】，设置边框的样选择【分类】中的【边框】，设置边框的样式、宽度和颜色。单击式、宽度和颜色。单击“确定确定”按钮，完成按钮，完成.table1.table1样式样式规则
8、的定义。规则的定义。 7.2 7.2 网页制作网页制作 7.2.4 7.2.4 创建超级链接创建超级链接CSSCSS样式样式 步骤步骤1 1 在【在【CSSCSS样式】面板中，单击样式】面板中，单击“新建新建CSSCSS规则规则”按钮，打开【新建按钮，打开【新建CSSCSS规则】对话框。在【选择器类型规则】对话框。在【选择器类型】下拉列表框中选择】下拉列表框中选择“复合内容（基于选择的内容）复合内容（基于选择的内容）”，设置网页中各种超级链接的风格设置网页中各种超级链接的风格 。 步骤步骤2 2 在【选择器名称】中选择【在【选择器名称】中选择【a:linka:link】，将规】，将规则定义在则
9、定义在mycss.cssmycss.css文件中，单击【确定】按钮，打开【文件中，单击【确定】按钮，打开【a:linka:link的的CSSCSS规则定义】对话框。选择【分类】中的【类规则定义】对话框。选择【分类】中的【类型】，设置字体大小为型】，设置字体大小为“12px”“12px”，颜色为，颜色为“#06F”“#06F”，修饰，修饰为无（表示无下划线。单击为无（表示无下划线。单击“确定确定”按钮，完成按钮，完成a:linka:link样样式规则的定义。式规则的定义。 7.2 7.2 网页制作网页制作 步骤步骤3 3 同定义同定义a:linka:link的的CSSCSS规则方法一样，在步骤规
10、则方法一样，在步骤1 1对话框中选择【对话框中选择【a:visiteda:visited】，在【】，在【a:visiteda:visited的的CSSCSS规则规则定义】对话框中设置定义】对话框中设置a:visiteda:visited超链接样式超链接样式 。 步骤步骤4 4 以相同的方法，在以相同的方法，在mycss.cssmycss.css文件中定义文件中定义a:hovera:hover超链接样式。超链接样式。7.2 7.2 网页制作网页制作 7.2.5 7.2.5 应用类应用类CSSCSS样式样式 下面来应用创建好的下面来应用创建好的CSSCSS样式美化页面。因为在创建样式美化页面。因为
11、在创建“.black12”“.black12”、“.table”“.table”以及超级链接样式时，以及超级链接样式时，“商旅商旅管理管理”栏目网页（栏目网页（ctmindex.htmlctmindex.html）为当前打开页面，因）为当前打开页面，因此，可以直接应用此，可以直接应用mycss.cssmycss.css样式表文件中的样式表文件中的CSSCSS样式。样式。步骤步骤1 1 在在“商旅管理商旅管理”网页（网页（ctmindex.htmlctmindex.html）的设）的设计视图中，用鼠标选中商旅管理介绍的文本。计视图中，用鼠标选中商旅管理介绍的文本。步骤步骤2 2 在【属性】面板的
12、【类】下拉列表中选择类在【属性】面板的【类】下拉列表中选择类样式样式“black12”“black12”，如图所示，这样所选中的文本就设置，如图所示，这样所选中的文本就设置成成“black12”“black12”所定义的样式。所定义的样式。【属性】面板中选择样式【属性】面板中选择样式 7.2 7.2 网页制作网页制作 步骤步骤3 3 选中要应用选中要应用“table1”CSS“table1”CSS样式的表格，如图样式的表格，如图所示。所示。 步骤步骤4 4 在【属性】的面板的【类】下拉列表中选择在【属性】的面板的【类】下拉列表中选择“table1”“table1”样式，如图所示，将所选中的表格
13、设置为样式，如图所示，将所选中的表格设置为“table1”“table1”样式。样式。 选中要应用选中要应用“table1”样式的表格样式的表格 在【属性】面板中设置类样式在【属性】面板中设置类样式 7.2 7.2 网页制作网页制作 7.2.6 7.2.6 主页应用主页应用CSSCSS样式表文件样式表文件 步骤步骤1 1 在右侧【文件】浮动面板中，鼠标双击打开在右侧【文件】浮动面板中，鼠标双击打开“乐途网乐途网”首页首页index.htmlindex.html。步骤步骤2 2 单击【单击【CSSCSS样式】面板中的【附加样式表】命样式】面板中的【附加样式表】命令，或者直接单击面板下的令，或者直
14、接单击面板下的“附加样式表附加样式表”按钮，打开【按钮，打开【链接外部样式表】对话框。链接外部样式表】对话框。步骤步骤3 3 在在“文件文件/URL”/URL”文本框中输入文本框中输入mycss.cssmycss.css的路的路径及文件名，也可单击径及文件名，也可单击“浏览浏览”按钮从对话框中选择该文按钮从对话框中选择该文件。件。7.2 7.2 网页制作网页制作 步骤步骤4 4 在在“添加为添加为”设置区域，选择添加该样式的设置区域，选择添加该样式的方式，有方式，有“链接链接”和和“导入导入”两种方式。两种方式。 如果选中如果选中“链接链接”单选按钮，然后单击单选按钮，然后单击“确定确定”按钮
15、，按钮，则会在页面的头部插入以下代码。则会在页面的头部插入以下代码。link href=mycss.css rel=stylesheet type=text/css /即通过即通过标签将样式表文件标签将样式表文件mycss.cssmycss.css与网页文与网页文档链接。档链接。7.2 7.2 网页制作网页制作 如果选中如果选中“导入导入”单选按钮，然后单击单选按钮，然后单击“确定确定”按钮，按钮，则会在网页头部的则会在网页头部的和和标签之间插入下列标签之间插入下列代码。代码。import url(mycss.css);import url(mycss.css);也就是说，通过也就是说，通过i
16、mportimport标签实际上将标签实际上将mycss.cssmycss.css中的中的内容嵌入到网页文档的代码中。内容嵌入到网页文档的代码中。 步骤步骤5 5 附加样式表后，在当前网页文档中就可以应附加样式表后，在当前网页文档中就可以应用用mycss.cssmycss.css样式表文件中所定义的样式表文件中所定义的CSSCSS样式了。样式了。 7.3 7.3 知识链接知识链接vCSS简介简介 v认识【认识【CSS样式】面板样式】面板 v管理管理CSS样式样式 v设置设置CSS样式属性样式属性 7.3.1 CSS7.3.1 CSS简介简介 1. CSS1. CSS及其作用及其作用 CSSCS
17、S是是Cascading Style SheetsCascading Style Sheets的英文缩写，即层的英文缩写，即层叠样式表。叠样式表。CSSCSS是一种用来进行网页风格设计的样式表技是一种用来进行网页风格设计的样式表技术。使用术。使用CSSCSS可以对网页中文本的大小、字体、颜色、边可以对网页中文本的大小、字体、颜色、边框、链接状态等内容进行统一设置，保证站点页面的整框、链接状态等内容进行统一设置，保证站点页面的整体风格一致。体风格一致。 7.3.1 CSS7.3.1 CSS简介简介 2. CSS2. CSS的特点的特点 （1）创建一个）创建一个CSS样式，可以用于多个网页文档。样
18、式，可以用于多个网页文档。（2）若修改了某个）若修改了某个CSS样式，则文档中所有应用该样式的文档格式都会样式，则文档中所有应用该样式的文档格式都会自动进行更新。自动进行更新。（3）CSS样式可以为网页中的元素设置各种过滤器，从而产生特殊效果，样式可以为网页中的元素设置各种过滤器，从而产生特殊效果，如阴影、辉光、模糊和透明等。如阴影、辉光、模糊和透明等。（4）可以精确地控制网页中元素的位置。）可以精确地控制网页中元素的位置。（5）由于是直接的）由于是直接的HTML格式的代码，因而网页打开速度比较快。格式的代码，因而网页打开速度比较快。（6）使用）使用CSS可以将设计部分剥离出来放在一个独立样式
19、文件中，让多可以将设计部分剥离出来放在一个独立样式文件中，让多个网页文件共同使用，省去在每一个网页文件中都要重复设置样式的麻烦。个网页文件共同使用，省去在每一个网页文件中都要重复设置样式的麻烦。（7）CSS有很好的兼容性，只要是可以识别有很好的兼容性，只要是可以识别CSS样式的浏览器都可以应样式的浏览器都可以应用它。用它。（8）CSS容易编写，在容易编写，在Dreamweaver中提供相应的辅助工具。中提供相应的辅助工具。7.3.1 CSS7.3.1 CSS简介简介 3. CSS3. CSS的语法规则的语法规则 CSS CSS格式设置规则由两部分组成：选择器和声明块。格式设置规则由两部分组成：
20、选择器和声明块。 在下面的示例中，在下面的示例中，h1h1是选择器，介于大括号是选择器，介于大括号“”“”之间的所有内容都是声明块：之间的所有内容都是声明块：h1 font-size: 16 pixels; h1 font-size: 16 pixels; font-family: Helvetica; font-family: Helvetica; font-weight:bold; font-weight:bold; 在在Dreamweaver CS4Dreamweaver CS4中可以定义以下样式类型：中可以定义以下样式类型：（1 1）类样式）类样式 （2 2）HTMLHTML标签样式标
21、签样式 （3 3）高级样式）高级样式 7.3.1 CSS7.3.1 CSS简介简介 4. CSS4. CSS的保存方式的保存方式 CSSCSS样式表可以保存在网页内部或者网页外部：样式表可以保存在网页内部或者网页外部： （1 1）保存在网页内部：将）保存在网页内部：将CSSCSS样式保存在当前网页样式保存在当前网页与与之间的之间的stylestyle标签中，样式只对当前网页有效，仅当标签中，样式只对当前网页有效，仅当前网页中的对象才能应用相应的样式。前网页中的对象才能应用相应的样式。（2 2）保存在网页外部：将）保存在网页外部：将CSSCSS样式保存在一个独立的样式表样式保存在一个独立的样式表
22、文件中（文件中（.CSS.CSS），在网页中只要链接该样式表文件，就可以），在网页中只要链接该样式表文件，就可以使用其中的样式，多个网页可以使用同一样式表文件。使用其中的样式，多个网页可以使用同一样式表文件。7.3.2 7.3.2 认识【认识【CSSCSS样式】面板样式】面板 在在DreamweaverDreamweaver中，可以使用【中，可以使用【CSSCSS样式】面板来创建层样式】面板来创建层叠式样式表。用户可以使用叠式样式表。用户可以使用“窗口窗口/CSS/CSS样式样式”命令，或者使命令，或者使用用Shift+F11Shift+F11组合键打开【组合键打开【CSSCSS样式】面板，如
23、图所示。样式】面板，如图所示。 【CSS样式】面板样式】面板 7.3.3 7.3.3 管理管理CSSCSS样式样式 1 1编辑编辑CSSCSS样式样式 （1 1）在【）在【CSSCSS规则定义】对话框中修改规则定义】对话框中修改 【CSS规则定义】对话框规则定义】对话框7.3.3 7.3.3 管理管理CSSCSS样式样式 （2 2）在【）在【CSSCSS样式】面板中修改样式】面板中修改 选择要修改的样式 修改属性设置 7.3.3 7.3.3 管理管理CSSCSS样式样式 （3 3）在）在CSSCSS文件代码中修改文件代码中修改 7.3.3 7.3.3 管理管理CSSCSS样式样式 2 2删除删
24、除CSSCSS样式样式 在【在【CSSCSS样式】面板中选中要删除的样式】面板中选中要删除的CSSCSS样式，再样式，再单击单击“删除删除CSSCSS规则规则”按钮，或者按按钮，或者按DelDel键，即可删除该键，即可删除该CSSCSS样式。样式。 7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 1 1类型样式设置类型样式设置【类型】对话框如图所示，可以用来设置文本的样式。【类型】对话框如图所示，可以用来设置文本的样式。7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 1 1类型样式设置类型样式设置v各项功能如下：各项功能如下： v字体字体（Font-family）：
25、用来选择文本的字体。）：用来选择文本的字体。v大小（大小（Font-size）：用来设置文本的大小。）：用来设置文本的大小。v样式（样式（Font-style）：用于设置文本的倾斜格式，有）：用于设置文本的倾斜格式，有“正常正常”、“斜体斜体”和和“偏斜体偏斜体”三种选项。三种选项。v行高（行高（Line-height）：设置文本所在行的高度。）：设置文本所在行的高度。v修饰（修饰（Text-decoration）：向文本中添加下划线、上划线或者删除）：向文本中添加下划线、上划线或者删除线，或者使文本闪烁。线，或者使文本闪烁。v粗细（粗细（Font-weight）：用于设置文本加粗的程度。）：
26、用于设置文本加粗的程度。v变体（变体（Font-variant）：设置文本的小型大写字母变量。）：设置文本的小型大写字母变量。v大小写（大小写（Text-transform）：用于设置文本的大小写。）：用于设置文本的大小写。v颜色（颜色（Color）：单击）：单击“下三角下三角”按钮，可以打开调色板设置文本的颜按钮，可以打开调色板设置文本的颜色，也可以在该按钮后边的文本框中直接输入颜色的色，也可以在该按钮后边的文本框中直接输入颜色的HTML代码。代码。 7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 2 2背景样式设置背景样式设置 【背景】对话框如图所示，可以用来设置网页元素的背
27、景属【背景】对话框如图所示，可以用来设置网页元素的背景属性。性。7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 2 2背景样式设置背景样式设置各项功能如下：各项功能如下： 背景颜色（背景颜色（Background-colorBackground-color）：设置元素的背景颜色。）：设置元素的背景颜色。背景图像（背景图像（Background-imageBackground-image）：设置元素的背景图片。）：设置元素的背景图片。重复（重复（Backgound-repeatBackgound-repeat）：设置背景图像的重复方式。）：设置背景图像的重复方式。“不重复不重复”只
28、在元素开始处显示一次图像；只在元素开始处显示一次图像；“重复重复”在元素后在元素后面水平和垂直平铺图像；面水平和垂直平铺图像；“横向重复横向重复”和和“纵向重复纵向重复”分别分别显示图像的水平带区和垂直带区，图像被剪辑为适合元素的显示图像的水平带区和垂直带区，图像被剪辑为适合元素的边界。边界。附件（附件（Background-attachmentBackground-attachment）：设置背景图像是固定在）：设置背景图像是固定在其原始位置还是随内容一起滚动。其原始位置还是随内容一起滚动。水平位置和垂直位置：设置背景图像相对于元素的初始位置，水平位置和垂直位置：设置背景图像相对于元素的初始
29、位置，可以用于将背景图像与页面中心水平和垂直对齐。可以用于将背景图像与页面中心水平和垂直对齐。7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 3 3区块样式设置区块样式设置 【区块】对话框如图所示，可以用来设置文本的间距和对齐【区块】对话框如图所示，可以用来设置文本的间距和对齐格式。格式。 7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 3 3区块样式设置区块样式设置各项功能如下：各项功能如下： 单词间距（单词间距（Word-spacingWord-spacing）：设置字词的间距。）：设置字词的间距。字母间距（字母间距（Letter-spacingLetter-s
30、pacing）：增加或减少字母或字符的间）：增加或减少字母或字符的间距。距。垂直对齐（垂直对齐（Vertical-alignVertical-align）：设置元素的垂直对齐方式。）：设置元素的垂直对齐方式。文本对齐（文本对齐（Text-alignText-align）：设置文本在元素内的对齐方式。）：设置文本在元素内的对齐方式。文字缩进（文字缩进（Text-indentText-indent）：设置第一行文本缩进的程度。）：设置第一行文本缩进的程度。空格（空格（White-spaceWhite-space）：设置处理元素中空格的方式。）：设置处理元素中空格的方式。“正正常常”表示收缩空白；表
31、示收缩空白；“保留保留”表示保留所有空白；表示保留所有空白；“不换不换行行”表示仅遇到表示仅遇到brbr标签时文本才换行。标签时文本才换行。显示（显示（DisplayDisplay）：用来设置是否以及如何显示元素。）：用来设置是否以及如何显示元素。7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 4 4方框样式设置方框样式设置 【方框】对话框如图所示，用来设置元素（如图像和层）【方框】对话框如图所示，用来设置元素（如图像和层）的高度、宽度、浮动、内容与边框之间的距离以及元素内的高度、宽度、浮动、内容与边框之间的距离以及元素内边框与外边框之间的距离等属性。边框与外边框之间的距离等属性
32、。 7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 4 4方框样式设置方框样式设置各项功能如下：各项功能如下： 宽（宽（WidthWidth）和高（）和高（HeightHeight）：设置元素的宽度和高度。）：设置元素的宽度和高度。浮动（浮动（FloatFloat）：设置其他元素（如文本、）：设置其他元素（如文本、AP DivAP Div、表格等）、表格等）围绕元素的哪个边浮动。其他元素按通常的方式围绕在浮动围绕元素的哪个边浮动。其他元素按通常的方式围绕在浮动元素的周围。元素的周围。清除（清除（ClearClear）：定义不允许）：定义不允许APAP元素的边。如果清除边上出元素的
33、边。如果清除边上出现现APAP元素，则带清除设置的元素将移到该元素，则带清除设置的元素将移到该APAP元素的下方。元素的下方。填充（填充（PaddingPadding）：设置元素内容与元素边框之间的间距）：设置元素内容与元素边框之间的间距（如果没有边框，则为边距）。取消选择（如果没有边框，则为边距）。取消选择“全部相同全部相同”选项选项可以设置元素各个边的填充值。可以设置元素各个边的填充值。边距（边距（MarginMargin）：设置一个元素的边框与另一个元素之间的）：设置一个元素的边框与另一个元素之间的间距（如果没有边框，则为填充）。取消选择间距（如果没有边框，则为填充）。取消选择“全部相同
34、全部相同”可设置元素各个边的边距。可设置元素各个边的边距。7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 5 5边框样式设置边框样式设置 【边框】对话框如图所示，用于设置元素边框的一些属性，【边框】对话框如图所示，用于设置元素边框的一些属性，主要有四个边的样式、宽度以及颜色等。主要有四个边的样式、宽度以及颜色等。7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 6 6列表样式设置列表样式设置 【列表】对话框如图所示，用于设置类表的一些属性，包括【列表】对话框如图所示，用于设置类表的一些属性，包括类型、项目符号图像以及位置等属性。类型、项目符号图像以及位置等属性。 7.
35、3.4 7.3.4 设置设置CSSCSS样式属性样式属性 7 7定位样式设置定位样式设置 【定位】对话框如图所示，一般用来对层的位置、大小等属【定位】对话框如图所示，一般用来对层的位置、大小等属性进行设置。性进行设置。 7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 7 7定位样式设置定位样式设置各项功能如下：各项功能如下： 类型（类型（PositionPosition）：确定浏览器应如何定位选定的元素。）：确定浏览器应如何定位选定的元素。 显示（显示（VisibilityVisibility）：设置内容的初始显示条件。）：设置内容的初始显示条件。Z Z轴（轴（Z-IndexZ-
36、Index）：设置内容的堆叠顺序。）：设置内容的堆叠顺序。Z Z轴值较高的元素轴值较高的元素显示在显示在Z Z轴值较低的元素的上方。轴值较低的元素的上方。溢出（溢出（OverflowOverflow）：设置当容器（如）：设置当容器（如DIVDIV）中内容超出容器）中内容超出容器的显示范围时的处理方式。的显示范围时的处理方式。定位（定位（PlacementPlacement）：设置内容块的位置和大小。）：设置内容块的位置和大小。剪辑（剪辑（ClipClip）：设置内容的可见部分。）：设置内容的可见部分。7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 8 8扩展样式设置扩展样式设置
37、【扩展】对话框如图所示，用于设置一些扩展属性，如打印【扩展】对话框如图所示，用于设置一些扩展属性，如打印时的分页属性、当鼠标移动到元素上时鼠标的形状以及滤镜时的分页属性、当鼠标移动到元素上时鼠标的形状以及滤镜等。等。 7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 8 8扩展样式设置扩展样式设置各项功能如下：各项功能如下： （1 1）分页：在打印期间在样式所控制的对象之前或者之）分页：在打印期间在样式所控制的对象之前或者之后强行分页。可在下拉菜单中选择要设置的选项。后强行分页。可在下拉菜单中选择要设置的选项。（2 2）光标（）光标（CursorCursor）：设置当鼠标移动到元素
38、上时鼠标）：设置当鼠标移动到元素上时鼠标的形状。的形状。（3 3）过滤器（）过滤器（FilterFilter）：对样式所控制的对象应用特殊）：对样式所控制的对象应用特殊效果。过滤器中所包括的各类效果及其参数说明如下：效果。过滤器中所包括的各类效果及其参数说明如下：7.3.4 7.3.4 设置设置CSSCSS样式属性样式属性 Alpha：透明效果BlendTrans：渐隐渐现效果Blur：动感模糊效果Chroma：色度Dropshadow：下拉阴影效果 FlipH：水平翻转 FlipV：垂直翻转 Glow：光晕效果Gray：黑白效果Invert：反转效果Light：灯光效果Mask：蒙版效果Re
39、vealTrans：图像转换显示效果Shadow：阴影效果Wave：波浪效果Xray：X光透视效果7.4 7.4 总结提升总结提升 vCSS样式是一种高级的格式化网页元素的技术，它可以以样式是一种高级的格式化网页元素的技术，它可以以样式表文件的形式保存在磁盘上，需要时可以样式表文件的形式保存在磁盘上，需要时可以“附加附加”到某到某一个网页文档，而且以后一旦修改了某个一个网页文档，而且以后一旦修改了某个CSS样式，文档样式，文档中所有应用该样式的对象都会自动得到更新。中所有应用该样式的对象都会自动得到更新。v本章通过制作本章通过制作“乐途网乐途网”的的“商旅管理商旅管理”栏目页面，讲解了栏目页面
40、，讲解了CSS样式的创建、应用、管理以及属性设置等内容。读者样式的创建、应用、管理以及属性设置等内容。读者在掌握在掌握CSS的创建与使用方法后，可以举一反三，制作出的创建与使用方法后，可以举一反三，制作出各种各样的各种各样的CSS样式，这样在网页制作中可以方便地美化样式，这样在网页制作中可以方便地美化页面、统一页面样式，减少页面、统一页面样式，减少HTML代码量。本章内容将为代码量。本章内容将为今后学习今后学习Div的网页布局奠定基础。的网页布局奠定基础。 谢谢 谢谢！9、静夜四无邻，荒居旧业贫。2024/9/182024/9/18Wednesday, September 18, 202410
41、、雨中黄叶树，灯下白头人。2024/9/182024/9/182024/9/189/18/2024 12:10:24 AM11、以我独沈久，愧君相见频。2024/9/182024/9/182024/9/18Sep-2418-Sep-2412、故人江海别，几度隔山川。2024/9/182024/9/182024/9/18Wednesday, September 18, 202413、乍见翻疑梦，相悲各问年。2024/9/182024/9/182024/9/182024/9/189/18/202414、他乡生白发，旧国见青山。18 九月 20242024/9/182024/9/182024/9/1
42、815、比不了得就不比，得不到的就不要。九月 242024/9/182024/9/182024/9/189/18/202416、行动出成果，工作出财富。2024/9/182024/9/1818 September 202417、做前，能够环视四周；做时，你只能或者最好沿着以脚为起点的射线向前。2024/9/182024/9/182024/9/182024/9/189、没有失败，只有暂时停止成功！。2024/9/182024/9/18Wednesday, September 18, 202410、很多事情努力了未必有结果，但是不努力却什么改变也没有。2024/9/182024/9/182024/
43、9/189/18/2024 12:10:24 AM11、成功就是日复一日那一点点小小努力的积累。2024/9/182024/9/182024/9/18Sep-2418-Sep-2412、世间成事，不求其绝对圆满，留一份不足，可得无限完美。2024/9/182024/9/182024/9/18Wednesday, September 18, 202413、不知香积寺，数里入云峰。2024/9/182024/9/182024/9/182024/9/189/18/202414、意志坚强的人能把世界放在手中像泥块一样任意揉捏。18 九月 20242024/9/182024/9/182024/9/181
44、5、楚塞三湘接，荆门九派通。九月 242024/9/182024/9/182024/9/189/18/202416、少年十五二十时，步行夺得胡马骑。2024/9/182024/9/1818 September 202417、空山新雨后，天气晚来秋。2024/9/182024/9/182024/9/182024/9/189、杨柳散和风，青山澹吾虑。2024/9/182024/9/18Wednesday, September 18, 202410、阅读一切好书如同和过去最杰出的人谈话。2024/9/182024/9/182024/9/189/18/2024 12:10:24 AM11、越是没有本领
45、的就越加自命不凡。2024/9/182024/9/182024/9/18Sep-2418-Sep-2412、越是无能的人，越喜欢挑剔别人的错儿。2024/9/182024/9/182024/9/18Wednesday, September 18, 202413、知人者智，自知者明。胜人者有力，自胜者强。2024/9/182024/9/182024/9/182024/9/189/18/202414、意志坚强的人能把世界放在手中像泥块一样任意揉捏。18 九月 20242024/9/182024/9/182024/9/1815、最具挑战性的挑战莫过于提升自我。九月 242024/9/182024/9
46、/182024/9/189/18/202416、业余生活要有意义，不要越轨。2024/9/182024/9/1818 September 202417、一个人即使已登上顶峰，也仍要自强不息。2024/9/182024/9/182024/9/182024/9/18MOMODA POWERPOINTLorem ipsum dolor sit, eleifend nulla ac, fringilla purus. Nulla iaculis tempor felis amet, consectetur adipiscing elit. Fusce id urna blanditut cursus. 感感谢谢您您的的下下载载观观看看专家告诉
