cssdiv布局专题课程内容说明

《cssdiv布局专题课程内容说明》由会员分享，可在线阅读，更多相关《cssdiv布局专题课程内容说明（13页珍藏版）》请在金锄头文库上搜索。

1、CSS/DIVCSS/DIV 布局专题讲解布局专题讲解设置图片效果 - CSS/DIV 专题讲解 - 第 1 课 设置网页背景 - CSS/DIV 布局专题讲解 - 第 2 课 设置表格与表单的样式 - CSS/DIV 布局专题讲解 - 第 3 课 设置页面和浏览器的元素 - CSS/DIV 布局专题 - 第 4 课 用 CSS 制作漂亮的菜单- CSS/DIV 布局专题讲解 - 第 5 课 CSS 滤镜的应用 - CSS/DIV 布局专题讲解 - 第 6 课 理解 CSS 定位与 div 布局 - CSS/DIV 布局专题讲解 - 第 7 课 CSS 排版 - CSS/DIV 布局专题讲解

2、- 第 8 课 网页变幻 - CSS/DIV 布局专题讲解 - 第 9 课设置图片效果设置图片效果 - CSS/DIV 专题讲解专题讲解 - 第第 1 课课在五彩缤纷的网络世界中，各种各样的图片组成了丰富多彩的页面，能够让人 更直观的感受网页所要传达给用户的信息。本课介绍 CSS 设置图片风格样式的 方法，包括图片的边框、对齐方式、图文混排等，并通过实例综合文字、图片 的各种运用。1.1.图片样式图片样式 作为单独的图片本身，它的很多属性可以直接在 HTML 中进行调整，但是通过 CSS 统一管理，不但可以更加精确的调整图片的各种属性，还可以实现很多 特 殊的效果。我们在这里主要讲解 CSS

3、设置图片基本属性的方法，为进一步深入 探讨打下基础。希望大家能够掌握以下两个方面的内容：图片边框 图片缩放 2.2.图片的对齐图片的对齐 当图片与文字同时出现在页面上的时候，图片的对齐方式就显得尤其的重要。 如何能够合理的将图片对齐到理想的位置，成为页面是否整体协调、统一的重 要 因素。我们在这里从图片水平对齐和竖直对齐两方面出发，分别介绍 CSS 设 置图片对齐方式的方法。希望大家能够掌握以下两个方面的内容：横向对齐方式 纵向对齐方式 3.3.图文混排图文混排 Word 中文字与图片有很多排版的方式，在网页中同样可以通过 CSS 设置实现各 种图文混排的效果。我们在这里在上一课文字排版和上几

4、节图片对齐等的基础 上，介绍 CSS 图文混排的具体方法。希望大家能够掌握以下两个方面的内容：文字环绕 设置图片与文字间距 4.4.图文混排实例：八仙过海图文混排实例：八仙过海 我们在这里通过具体实例，进一步巩固图文混排的方法，并运用到实际的网站 制作中。该例以介绍中国传统的八仙为题材，充分利用 CSS 图文混排的方法， 实现页面的效果。本例最终效果如图所示。设置网页背景设置网页背景 - CSS/DIV 布局专题讲解布局专题讲解 - 第第 2 课课任何一个网上的页面，它背景的颜色、基调往往是给用户的第一印象，因此在 页面中控制背景通常是网站设计时一个很重要的步骤。本课在合理运用文字、 图片等的

5、基础上，重点介绍 CSS 控制背景颜色、图片等的方法。1.1.背景颜色背景颜色 256256256 种 RGB 色彩组成了整个绚丽多姿的网络，任何一个页面都有它 的背景色来突出其基调，微软的蓝色、Google 的白色、世纪坛 的墨绿、圣诞 网站的火红等等都给人们留下很深刻的印象。我们在这里主要通过实例，介绍 CSS 设置页面背景颜色的方法。希望大家能够掌握以下两个方面的内 容：页面背景色 用背景色给页面分块 2.2.背景图片背景图片 不单单是各种颜色，网页背景同样也可以使用 图片。通过 CSS 可以对背景图片进行很精确的 控制，包括位置、重复方式等等。我们在这里围绕背景图片的使用，对 CSS

6、的编写方法作进一步介绍。希望大家能够掌握以 下几个方面的内容：页面的背景图 背景图的重复 背景图片的位置 固定背景图片 添加多个背景图片 背景样式综合设置 3.3. 背景综合一：我的个人主页背景综合一：我的个人主页 个人主页是网络上记录自己、展现自己的一种很好的形式，很多用户在网上都 拥有自己的页面。个人主页可以作为宣传自己的方式，也可以用来写网络日记， 汇总学习心得，记录每天生活的点点滴滴。我们在这里通过制作几米风格的个人主页，进一步学习 CSS 控制网页背景在实 际中的运用方法，本例的最终效果如图所示。4.4. 背景综合二：古词背景综合二：古词念奴娇念奴娇 赤壁怀古赤壁怀古 通过添加各种标

7、记，可以让页面拥有多个背景，如果运用得当还可以得到各种 效果。我们在这里以古词为例，进一步巩固页面背景的使用方法。本例最终效 果如图所示。设置表格与表单的样式设置表格与表单的样式 - CSS/DIV 布局专题讲解布局专题讲解 - 第第 3 课课表格与表单是网页上最常见的元素，表格除了显示数据外，还常常被用来排版。 而表单则作为与用户交互的窗口，时刻都扮演着信息获取和反馈的角色。本课 围绕表格和表单介绍 CSS 设置其样式的方法，以及利用 CSS 实现各种特效的技 巧。1.1. 控制表格控制表格 表格作为传统的 HTML 元素，一直受到网页设计者们的青睐。使用表格来表示数 据、制作调查表等在网络

8、中屡见不鲜。同时因为表格框架的简单、明了，使 用 没有边框的表格来排版，也受到很多设计者的喜爱。我们在这里主要介绍 CSS 控制表格的方法，包括表格的颜色、标题、边框、背景等。希望大家能够掌握 以下 几个方面的内容：表格中的标记 表格的颜色 表格的边框 2.2. 表格实例一：隔行变色表格实例一：隔行变色 当表格的行列都很多、数据量很大的时候，单元格如果采用相同的背景色，用 户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色，使得奇数行 和偶数行的背景颜色不一样，达到数据一目了然的目的。本例最终效果如图所示。3.3. 表格实例二：鼠标经过时变色的表格表格实例二：鼠标经过时变色的表格 对于长

9、时间审核大量数据、浏览表格的用户来说，即使是隔行变色的表格，阅 读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色，就使得 页面充满了生机，最大程度的减少用户疲倦。4.4. 表格实例三：日历表格实例三：日历 日历是日常生活中必不可少的东西，而作为备 忘录的日历在桌面、网络上都越来越流行。通 过 CSS 设定表格的属性，可以很轻松的实现各 种日历的效果。我们在这里通过简单的实例， 进一步熟练 CSS 控制表格的各种方法。本例最 终效果如图所示。5.5. CSSCSS 与表单与表单 表单是网页与用户交互所不可缺少的元素，传统的 HTML 中对表单元素的样式控 制很少，仅仅局限于功能上的实

10、现。我们在这里围绕 CSS 控制表单进行详细介 绍，包括表单中各个元素的控制，与表格配合制作各种效果等等。希望大家能 够掌握以下几个方面的内容：表单中的元素 像文字一样的按钮 七彩的下拉菜单 6.6. 综合实例一：直接输入的综合实例一：直接输入的 ExcelExcel 表格表格 作为公司、单位的各种年度报表，往往数据量都很大，如果也都像普通表单一 样逐项填写，势必造成网页的冗长。而 Excel 表格在本地机器操作时一直广受 好评，通过 CSS 控制，结合表格和表单，便能轻松实现类似的效果，如图所示。7.7. 综合实例二：模仿新浪网民调查问卷综合实例二：模仿新浪网民调查问卷 门户网站上的新闻、事

11、实往往都伴随着各种各样的调查问卷，包括事实的评论、 舆论的反馈、事态的预测等等。这些调查问卷都离不开表格与表单的配合使用。 本例通过简单的模拟新浪的调查问卷，进一步熟练 CSS 控制表格、表单的方法。这个图是新浪网上关于姚明的热点调查，本例通过简单的表格、表单的配合， 模拟该调查问卷的效果。设置页面和浏览器的元素设置页面和浏览器的元素 - CSS/DIV 布局专题布局专题 - 第第 4 课课网页中除了上面课程提到的文字、图片、表格、表单等还有许多其它元素，例 如超链接、鼠标、滚动条等等。这些元素无疑使得整个网络更加的丰富多采。 本课主要介绍网页中这些元素的 CSS 效果，配合前面课程的内容，使

12、得网页能 更好的吸引用户。1.1. 丰富的超链接特效丰富的超链接特效 超链接是网页上最普通不过的元素，通过超链接能够实现页面的跳转、功能的 激活等等，因此超链接也是与用户打交道最多的元素之一。我们在这里主要介 绍超链接的各种效果，包括超链接的各种状态、伪属性、按钮特效等等。希望 大家能够掌握以下几个方面的内容：动态超链接 按钮式超链接 浮雕式超链接 2.2. 鼠标特效鼠标特效 通常在浏览网页时，用户看到的鼠标指针不外乎箭头、手形、以及 I 字形，而 通常在 Windows 环境下实际看到的鼠标种类要比这个多得多。CSS 弥补了 HTML 语言在这方面的不足，通过 cursor 属性可以设置各式

13、各样的鼠标样式。希望大 家能够掌握以下几个方面的内容：CSS 控制鼠标箭头 鼠标变幻的超链接 3.3. 页面滚动条页面滚动条 当页面的内容比较多，浏览器中的窗口或者子窗口在一屏内显示不完时，就会 出现滚动条，供读者翻页。对于 IE 浏览器，可以单独设置滚动条的样式风格， 从而使其更加配合网站的整体设计。我们在这里重点讲解滚动条的组成，以及 相关的 CSS 属性。用用 CSS 制作漂亮的菜单制作漂亮的菜单- CSS/DIV 布局专题讲解布局专题讲解 - 第第 5 课课作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的样式风格往往 也决定了整个网站的样式风格，因此很多设计者都会投入很多时间和

14、精力来制 作各式各样的导航条，从而体现网站的整体构架。本课围绕菜单的制作，介绍 相关的项目列表、菜单变幻、导航栏等的内容。1.1. 项目列表项目列表 传统的 HTML 语言提供了项目列表的基本功能，包括顺序式列表的 ol 标记，无 顺序列表 ul 标记等等。当引入 CSS 后，项目列表被赋予了很多新的属性，甚 至超越了最初设计时它的功能。我们在这里主要围绕项目列表的基本 CSS 属性 进行相关介绍，包 括项目列表的编号、缩进、位置等等。希望大家能够掌握以 下几个方面的内容：列表的符号 图片符号 2.2. 无需表格的菜单无需表格的菜单 当项目列表的项目符号可以通过 list-style-type

15、 设置为 none 时，制作各式各 样的菜单、导航条成了项目列表的最大用处之一，通过各种 CSS 属性变幻可以 达到很多意想不到的导航效果。首先看一个实例，其效果如图所示。3.3. 菜单的横竖转换菜单的横竖转换 导航条不光是竖直排列，很多时候要求页面的菜单能够水平方向显示。通过 CSS 属性的控制，可以使项目列表的导航条轻松的实现横竖转换，该例效果如 图所示。4.4. 菜单实例一：百度导航条菜单实例一：百度导航条 打开搜索引擎百度的网站，可以看到 logo 下方的水平导航条。利用本课前面几 节所介绍的内容和方法，便可以轻松实现该导航条。我们在这里便通过简单的 制作，模拟该效果。5.5. 菜单实

16、例二：流行的菜单实例二：流行的 TabTab 菜单菜单 Tab 风格的菜单导航一直受到广大网站的青睐，网上随处可见各式各样的 Tab 菜单，图中显示的就是一个 Tab 菜单。我们在这里通过对导航菜单 CSS 属性的 进一步控制，实现 Tab 菜单的效果。CSS 滤镜的应用滤镜的应用 - CSS/DIV 布局专题讲解布局专题讲解 - 第第 6 课课CSS 滤镜并不是浏览器的插件，也不符合 CSS 标准，而是微软公司为增强浏览 器功能而特意开发的并整合在 IE 浏览器中的一类功能的集合。由于浏览器 IE 有着很广的使用范围，因此 CSS 滤镜也被广大设计者所喜爱。本课主要介绍 CSS 各个滤镜的使用方法，包括定义滤镜、加载滤镜、实例解析等等。CSS 滤镜的标识符是“filter”，总体上跟其它 CSS 语句一样，都十分简单， 进行滤镜操作必须先定义 filter，filtername 是滤 镜属性名，包括 alpha、blur、chroma 等