cs学习PPT.ppt

* 12.7 综 合 实 例 12.7.1 使用CSS实现鼠标指针形状改变 具体操作步骤如下。 (1) 打开网页文档，如图12.49所示。 (2) 选择“窗口”|“CSS样式”命令，打开“CSS样式”面板，在面板中单击鼠标右键，在弹出的快捷菜单中选择“新建”命令，弹出“新建CSS规则”对话框，将“选择器类型”选择“类(可应用于任何HTML元素)”选项，“选择器名称”文本框中输入shub，“规则定义”中选择“(仅限该文档)”，如图12.50所示。 * 12.7 综 合 实 例 (3) 单击“确定”按钮，弹出“. shub的CSS规则定义”对话框，选择“分类”中的“扩展”选项，在Cursor下拉列表中选择se-resize，如图12.51所示，其生成的CSS代码如下所示。 style type=text/css .shub {cursor: help;} /style (4) 单击“确定”按钮，在文档中选中images/LOGO.gif图像，在属性面板中选择“类”右边的下拉列表中的shub样式，如图12.52所示。 * 12.7 综 合 实 例 (5) 保存文档，在浏览器中预览效果如图12.53所示。 * 12.7.2 使用CSS实现背景变换的导航菜单 具体操作步骤如下。 (1) 启动Dreamweaver，打开网页文档，切换到代码视图中，在head与/head之间相应的位置输入以下代码。 参见教材P237 (2) 将光标放置在相应的位置，选择“插入”|“标签”命令，插入标签，在标签“属性”面板中的Div ID下拉列表中选择menu。 (3) 切换到代码视图，在Div标签标记中输入代码ul/ul。 (4) 在设计视图中的Div标签中输入文字“首页”，在“属性”面板中的链接文本框中进行链接。 (5) 切换到拆分视图，在a href=的前面输入代码li，在/a的前面输入代码/li。 (6) 按照以上步骤，创建其他的导航条。保存文档，按F12键在浏览器中预览效果，如图12.54所示。 实验4 css+div布局定位基础 13.2.1 Div概述 13.2.2 Div与Span的区别 13.4.2 position定位 13.2.1 Div概述 Div是用来为HTML文档内大块的内容提供结构和背景的元素。Div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由Div标签的属性，或通过使用CSS来控制的。 下面列出一个简单的实例讲述Div的使用。 实例代码： 参见教材P247 在上面的实例中，通过CSS对Div的控制，制作了一个宽400像素和高80像素的绿色块，并设置了文字的颜色、字号和文字的对齐方式，在IE中浏览效果如图13.1所示。 13.2.2 Div与Span的区别 Div是一个块级元素，可以包含段落、标题、表格，甚至如章节、摘要和备注等。而Span是行内元素，Span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用Span。 下面通过一个实例说明Div与Span的区别，代码如下。 参见教材P248 在浏览器中浏览效果如图13.2所示。 13.4.2 position定位 1．绝对定位：absolute 2．固定定位：fixed bodydiv id=containercontainer div id=bannerbanner/div div id=contentcontent/div div id=linkslinks/div div id=footerfooter/div /div /body body { text-align: center; margin: 10px;} #container { padding: 10px; width: 800px; border: 1px solid #000000;} #banner { background-color: #a2d9ff; padding: 10px; margin-bottom: 5px;} #container #content { height: 300px; width: 570px; border: 1px solid #000000; float: left; } #container #links { height: 300px; width: 200px; border: 1px solid #000000; float: right; } #container #footer {clear:both; padding: 10px; border: 1px solid #000000; } 14.2.2 两列固定宽度