人机交互界面设计全书课件完整版ppt全套教学教程最全电子教案电子讲义(最新).ppt

《人机交互界面设计全书课件完整版ppt全套教学教程最全电子教案电子讲义(最新).ppt》由会员分享，可在线阅读，更多相关《人机交互界面设计全书课件完整版ppt全套教学教程最全电子教案电子讲义(最新).ppt（210页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、人机交互界面设计第三章web基础知识目录01 了解万维网、IP和域名、HTTP、FTP02 Dreamweaver基本操作03 网页文件的基本操作04 认识HTML03-01 创建站点03-02 管理站点01 了解万维网、IP和域名、HTTP、FTP万维网WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“W3”，英文全称为“World Wide Web”），中文名字为“万维网”，环球网等，常简称为Web。超文本超文本（Hypertext）是由一个叫做网页浏览器（Web browser）的程序显示。网页浏览器从网页服务器取回称为“文档”或“网页”的信息并显示。网页、网页文件及网站网页是网

2、站的基本信息单位，是WWW的基本文档。它由文字、图片、动画、声音等多种媒体信息以及链接组成，是用HTML编写的。网页文件是用HTML（标准通用标记语言下的一个应用）编写的，可在WWW上传输，能被浏览器识别显示的文本文件。其扩展名是.htm和.html。网站由众多不同内容的网页构成，网页的内容可体现网站的全部功能。HTTPHTTP是Hypertext Transfer Protocol的缩写，即超文本传输协议。HTTP提供了访问超文本信息的功能，是WWW浏览器和WWW服务器之间的应用层通信协议。01 了解万维网、IP和域名、HTTP、FTP01 了解万维网、IP和域名、HTTP、FTPIP地址和

3、域名IP即网络之间互连的协议，英文缩写为“Internet Protocol”，中文缩写为“网协”。IP地址：网络地址、网络协议。域名：网站的名称。FTPFTP 是File Transfer Protocol（文件传输协议）的英文简称，而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。同时，它也是一个应用程序（Application）。02 Dreamweaver基本操作Dreamweaver是一款极为优秀的可视化网页设计制作工具和网站管理工具。它具有以下优点：制作制作效率高效率高网站管理便捷网站管理便捷控制能力强控制能力强02 Dreamweaver基本操作认识Dream

4、weaver界面属性面板编辑窗口对象面板03 网页文件的基本操作创建站点123在启动Dreamweaver时通过欢迎页面创建在Dreamweaver工作环境下，单击菜单栏中的“站点”-“新建站点”命令“文件”“管理站点”，在弹出窗口中点击“新建站点”命令03 网页文件的基本操作新建站点步骤二 站点标题步骤三 选择服务器03 网页文件的基本操作管理站点在“文件”面板中的“food”文件夹上单击鼠标右键，则弹出一个快捷菜单。我们可以通过这个来管理站点。根据需求建立相应的文件及文件夹。04 认识HTMLHTML基本结构网站名称网站基本内容ENDTHANKYOU人机交互界面设计第四章HTML5基础目录

5、01 html5基本结构标签02 文本制作03 网页图片的显示04 超链接02-01 认识标题、段落、短语元素02-02 特殊字符05 列表标签05-01 无序列表05-02 有序列表05-03 定义列表06 html5媒体元素06-01 abject对象 06-04 audio对象06-02 embed对象 06-05 source 复数媒体元素06-03 video对象01 html5基本结构标签Div标签该元素是用于分组HTML元素的块级元素。可以把它看作是一个容器，用来定义文档中的分区。这是一个双标签，在使用时，必须关闭它。这是一个模块内容 书中这部分代码有错，以ppt为准01 htm

6、l5基本结构标签header标签标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面，表示网页一个模块内容的头部。它可以包括标签，还可以包括表格内容、标识、搜索表单、导航等。Header中至少要有一个标题元素或hgroup元素或nav元素用法：头部内容/标题元素，后面会详解头部信息01 html5基本结构标签nav标签nav标签可以作为页面导航的链接组。同样可以包含标签，或者其他列表，表单等用法：这里显示的是导航部分。section标签该标签用来定义文档中的节。比如章节、某个模块或文档中的其它部分。一般用于成块的内容，会在文档流中开始一个新的节。用法：该

7、模块的标题该模块的内容01 html5基本结构标签article标签是一个特殊的section标签，具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。用法：这是文章标题文章内容详情/这里的是段落标签，后面做详解这里可以是文章内容01 html5基本结构标签aside标签1、可以表示包含在article元素中的附属信息，如名次解释，相关引用资料等。用法：文章标题文章内容本文出自2、也可以表示整个页面或站点的附属信息部分。如侧边栏、博客里面的其他文章列表，友情链接、单元广告等。01 html5基本结构标签foot

8、er标签1、该标签用于定义section、article或网页的页脚，包含了与内容或页面有关的信息，比如说文章信息（作者和日期）。作为页面的页脚时，一般包含了版权、相关文件和链接。它和标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该模块的页脚了。用法：Copyright2006-2015重庆市巴南分局备案编号:11010500000001 html5基本结构标签hgroup标签若在一模块中需要含有一系列的标题元素，则可以用hgroup将他们包裹起来。用法：标题1标题201 html5基本结构标签figure标签与figcaption标签一段独立

9、的流内容，一般表示文档的一个独立单元。这2个属性常常在一起使用，figcaption元素为figure元素组添加描述信息。可以用于对元素的组合，多用于图片与图片描述组合。用法：这里可以插入一张图片这儿是图片的描述信息02 文本制作段落：段落标签顾名思义就是一个段落，可以理解为一些句子或文本组织在一起的块级元素。用法：这里是一个段落。-认识标题、段落、短语元素标题：标题元素从h1到h6共六级。标题元素中包含的文本被浏览器渲染为“块”元素，即会自动产生换行。所显示的字号是最大的，所显示的字号最小span：行内元素，本身没有任何含义和任何样式，但可以定义组合文档中的部分文字。用法：下面这是一段文字换

10、行：在html中的换行显示需要专门的标签。该标签单独使用，不成对出现，是一种独立标记。用法：这里将要换行。这里是第二行。02 文本制作制作制作效率高效率高网站管理便捷网站管理便捷控制能力强控制能力强-认识标题、段落、短语元素短语元素：短语元素都是行内元素。指的是要定义一个段落或者一句话里面的一部分文字。比如，要强调某个文字，倾斜某个文字，高亮某个文字等等。如要为：文字加粗这部分文字加粗强调文字强调这里的文字斜体文字这里的文字会有斜体效果。02 文本制作-认识标题、段落、短语元素短语元素（需要时可以查表）标签标签 用途用途缩写：用于显示文本的缩写，配置title属性加粗：文本没有额外的重要性，但

11、样式采用加粗字体引文或参考：用于显示文本是引文或参考，通常倾斜显示代码：用于显示文本为程序代码，通常使用等宽字体术语定义：用于显示文本为词汇或术语定义，通常倾斜显示强调：用于强调文本，通常倾斜显示倾斜：文本没有额外的重要性，但样式采用倾斜字体输入文本：用于显示要用户输入的文本，通常用等宽字体显示记号文本：文本高亮显示（仅用于HTML5）示例文本：用于显示程序的示例输出，通常显示为等宽字体小文本：用小字号显示的免责声明。强调文本：显示文本强调或突出与周边的普通文本，通常加粗显示下标：用于显示文本的下标上标：用于显示文本的上标变量文本：用于显示变量或程序输出，通常倾斜显示02 文本制作-认识标题、

12、段落、短语元素案例：根据效果图，在Dreamweaver中写出源代码。02 文本制作-认识标题、段落、短语元素小贴士：什么是块状元素，什么是内联元素？块级元素：这类元素的特征是添加该标签后，会独立的成一行显示。行内元素：也叫内联元素。这类元素的特征是增加其标签后，不会换行。块元素可以见下图。02 文本制作控制能力强控制能力强-特殊字符若我们需要在html页面中显示某些符号如：，&，”等等，在html代码中直接输入上述类似符号时，会与html中的关键字有冲突，因此不能直接在代码中输入，而是需要转化为相对应的html代码。符号符号HTML代码代码"'&>¥

13、©®空格 02 文本制作制作制作效率高效率高-特殊字符案例：根据效果图，在Dreamweaver中写出源代码。03 网页图片的显示插入图片为插入图片标签。仅仅使用标签并不会在网页中插入图像。图片必须要有图片来源以及替代文本属性，即src以及alt属性。用法：src属性代表的是图片路径，该路径可以是绝对路径也可以是相对路径。alt属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。03 网页图片的显示案例操作题目要求在1.html内插入01.jpg和02.jpg两张图片。文件结构图如下图4.7所示。请写出相应html代码：03

14、网页图片的显示小贴士：什么时候插入图片，什么时候用背景图片？当图片作为页面主体内容，如新闻图片时，使用插入图片。作为页面整体背景或者点缀美化功能的时候可以作为背景图片引入。相对路径与绝对路径（1）绝对路径绝对路径表示一个完整的路径。可以来源于本机中的物理地址，例如src=D:/mysite/image/pic.jpg；也可以来源于internet的网络路径，例如src=http:/ 超链接文字超链接超链接指的是一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序等。HTML超链接主要由标签对和属

15、性href构成。要实现链接的跳转，必须要使用属性href用法：链接的文字或图片通过点击链接的文字，具体的语法为：链接文字图片超链接通过点击图片进行跳转，具体的语法为：04 超链接锚点超链接1、确定链接跳转的位置，设置锚点：目标位置（锚点的名字可以是任意的英文名）2、创建链接源，链接文字或者图片注意：锚点名称需要必须要与链接的href内的锚点名称匹配（相同）。邮件超链接需要建立邮件超链接时，点击内容会启动电子邮件程序。具体用法为：发邮件04 超链接案例以下是关于超链接的一个知识巩固案例。根据如图所示的网页效果图及文档路径，在Dreamweaver中写出源代码。（文档路径在书上有缺失，下图为准）1

16、.创建一个名为test.html页面2.分别设置5个字段：link，百度图标图片，锚点链接，发邮件，这里是一段话3.为link字段增加链接到与test.html同级文件下的1.html4.为百度图片图片增加链接到百度官网5.为锚点链接字段增加锚点链接到“这里是一段话”6.为发邮件字段增加邮件超链接到05 列表标签列表标签是HTML中常用的一种标签。具体分为1.无序2.有序列表3.定义列表。列表标签的主要用途为：网页导航、网页列表页、网页图文排列部分等05 列表标签-无序列表无序列表（无序列表（Unorderedlists）是一个项目的列表，在列表中每个项目前面加上列表符号。这种列表也可称为项目

17、列表。此项目列表使用粗体圆点（典型的小黑圆圈，属于默认设置）、方块、圆圈进行标记。第一项第二项第三项 值值 示例示例disc（默认）圆点square小方块circle圆环创建一个无序列表要用方块来标记他的项目符合，可以使用列表的type属性值“square”，即05 列表标签-无序列表案例案例在Dreamweaver中写出标题与无序列表的源代码05 列表标签-有序列表有序列表（有序列表（Unorderedlists）有序就是有顺序。有序列表可以使用数字（默认）、大写字母、小写字母、大写罗马数字、和小写罗马数字进行编号。第一项第二项第三项创建一个大写字母 值值 示例示例1数字（默认）A大写字母a

18、小写字母I大写罗马数字i小写罗马数字05 列表标签-有序列表案例案例在Dreamweaver中写出标题与有序列表的源代码05 列表标签-定义列表定义列表（定义列表（Unorderedlists）用于常见问题及答案；或者一个列表包含多个术语及不同的解释，就可以使用定义列表进行布局。如：名词解释的内容05 列表标签-定义列表案例案例在Dreamweaver中写出标题与定义列表的源代码06 html5媒体元素在网页上插入音频、视频可以使其显得更生动。如object对象标签、embed嵌入对象。Html5增加了一些多媒体和交互元素，帮助我们更好的显示音频或视频，如video视频播放audio声音播放s

19、ource媒体元素等06 html5媒体元素Object对象该元素用来将各式各样的资料配置到网页中，例如影像、图片、动画、甚至word文件等。Html5删除了html4中object元素的很多属性，支持html5的属性如下表属性属性 属性说明属性说明data必要属性，指定对象数据源的URL，在html4标准中，若属性值为相对URL，将以codebase属性的属性值为基准URLtypedata属性所指定的数据的mime形态uesmap将对象设定为客户端的影像地图，URL格式为”#mapname”，其中mapname对应于map元素的id属性值width指定对象的宽度，属性至可为正整数的像素值或这

20、百分比值height指定对象的高度，属性至可为正整数的像素值或这百分比值06 html5媒体元素embed对象该元素用来嵌入对象，如多媒体对象flash。该元素为一个空元素，是一个单标签。语法规则如下：。属性属性 属性说明属性说明Src必要属性，指定嵌入对象的来源路径type嵌入对象的mime类型width指定对象的宽度，属性至可为正整数的像素值或这百分比值height指定对象的高度，属性至可为正整数的像素值或这百分比值06 html5媒体元素video对象该元素是用来播放视频的元素。但因各个浏览器在video元素的可播放影片格式方面支持不一致，若要让我们的网页文件能够兼容各种主流浏览器，并通

21、过video元素来播放影片，则至少需准备*ogg、*ogv、*mp4、*m4v这些类型的影片语法规则如下：。src设置影片播放来源路径。属性值仅能为单一来源的设置影片播放来源路径。属性值仅能为单一来源的URL，不可复数指定，不可复数指定poster指定影片开始播放前显示的预览图片来源URLautoplay设置或返回是否在就绪（加载完成）后随即播放视频。若不加此属性，当影片文件成功加载时在是并不会自动开始播放loop设置或返回视频是否应在结束时再次播放。未加属性时，结束后会停止播放，反之，则重复播放。preload设定影片是否要预先加载。取值可为none，auto，metadatacontrol

22、s设置或返回视频是否应该显示控件（比如播放/暂停等）。06 html5媒体元素audio对象同理，该元素是用来播放声音的元素。语法规则如下：。属性属性 属性说明属性说明src设置声音播放来源路径。属性值仅能为单一来源的URL，不可复数指定autoplay设置或返回是否在就绪（加载完成）后随即播放声音文件。若不加此属性，当声音文件成功加载时在是并不会自动开始播放loop设置声音文件是否应在结束时再次播放。未加属性时，结束后会停止播放，反之，则重复播放。preload设定声音文件是否要预先加载。取值可为none，auto，metadatacontrols设置是否应该显示控件（比如播放/暂停等）。0

23、6 html5媒体元素source对象Source是video与audio元素的子元素。可以利用source元素来定义多个影片、声音文件来源。注意：在audio和video元素中，可以同时使用多个source元素，由于使用了source属性，不可再为video和audio设定src属性，否则video与audio元素标签的source元素等同无效。语法规则如下：属性属性 属性说明属性说明src设置影片、声音播放来源路径。属性值仅能为单一来源的URL，不可复数指定Type指定播放来源用的mime类型Media指定播放来源是哪一种媒体或设备。取值可以是all/aural/braille/handh

24、eld/projection/print/tty/tvENDTHANKYOU人机交互界面设计第五章CSS3详解目录01 css3概述02 css的配置方法03 css的声明及选择器04 css中的注释05 css3基本属性06 css3中的伪类和伪对象07 css3中的动画05-01 背景属性 05-03 列表属性05-02 文本属性 05-04 其他常用显示属性06-01 常用的css伪类06-02 结构性伪类06-03 伪对象07-01 2d变形 07-03 3d变形07-02 css3过渡 07-04 animation动画01 css3概述Css样式表优点CSS(CascadingSt

25、yleSheets)，即层叠样式表。他用来设置网页中各种标签的样式，如设置文字大小，颜色，行高，背景等等。“层叠”是指当在HTML文件中引用多个样式文件时，浏览器将依据层叠顺序及就近原则进行处理，以避免发生冲突。1.更多的排版和页面布局控制。可以控制字号、行距、字间距、边距、缩进等。2.样式和结构分离。文本格式和颜色可以独立于网页结构内容部分进行配置和存储。3.方便修改。若需要更换某个模块的字体颜色，只需要修改css样式里面的文字颜色属性即可，有利于网页维护。4.文档变得更小，提高加载速度。Css从文档分离出来后，html的体积会变得更小。CSS3是CSS技术的升级版本CSS3语言开发是朝着模

26、块化发展的。在css3语言中，增加了更多的新模块。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局、动效等02 css的配置方法嵌入样式：内联样式：不提倡，因为他不能更好的实现结构样式分离，特殊情况下可以使用，只适合该特定元素的特定属性外部样式将外部的独立的样式表文件引入到HTML文件中。用法：导入样式：在HTML文件初始化时，会被全部导入到HTML文件内，作为文件的一部分importurl(外部样式表文件地址);03 css的声明及选择器Css的声明ss的声明指的是需要设置的css属性（例如颜色）及其值。Css的声明指的是需要设置的css属性（例如颜色）

27、及其值。它有一定的语法规则。不管是外部链接还是嵌入样式，导入式样式，声明css的方法都是一样的。语法结构如下：选择符属性1:属性值;属性2:属性值;03 css的声明及选择器Css选择器1.标签选择器2.id选择器3.类选择器4.分组选择器5.包含选择器6.通配符选择器03 css的声明及选择器标签选择器我们直接给标签设置样式的类型就是标签选择器例如：acolor:#ff0000;font-size:16px;03 css的声明及选择器类选择器类选择器也叫class选择器，语法为:.类名属性1:属性值;例如：Css部分：.classcolor:#ff0000;font-size:16px;Ht

28、ml部分：点此链接203 css的声明及选择器id选择器但与class不同的是，id名不能重复.#类名属性1:属性值;例如：Css部分：#menucolor:#ff0000;font-size:16px;Html部分：导航03 css的声明及选择器分组选择器当多个选择器声明的样式完全相同时，可以将他们统一进行声明，各选择器之间使用英文”,”分开语法为：标签1,标签2,标签3属性1:属性值;属性2:属性值;例如：Css部分：#menu,.red,footercolor:#ff0000;font-size:16px;Html部分：标题导航这里是段落1这里是段落2这里是版权信息03 css的声明及选

29、择器包含选择器需要为一个容器里面的元素设置样式时，需要使用包含选择器语法为：父选择器子选择器属性1:属性值;属性2:属性值;父选择器和子选择器之间用空格隔开例如：Css部分：pacolor:#ff0000;font-size:14px;Html部分：链接1点击这里跳转到首页03 css的声明及选择器通配符选择器它由星号*来表示选择器的名称，可以定义所有的网页元素显示格式。通配符一般用于统一浏览器设置例如：意思是，将该页面的所有标签样式中的外边距、内边距重置为0，来统一浏览器样式*margin:0;padding:0;03 css的声明及选择器案例请完成如上图的html及css样式03 css的

30、声明及选择器优先级当有多个当有多个选择器作用于同一个元素器作用于同一个元素时，最，最终会使用哪会使用哪一个一个选择器所器所设置的置的样式？式？优先级由高到低为：行内样式id选择器类选择器标签选择器。若一个页面内有不同类型的css文件，css文件的优先级别为：行内样式表内嵌样式表链接样式表导入样式表。04 css中的注释注释为了帮助理解和后期维护，在css中应该有一定的注释即解释，这些注释是不会对css代码产生影响的。如：/*-注释内容-*/html注释和注释和css注释可以混用吗？注释可以混用吗？不行。05 css3基本属性-背景属性Css2的背景可以设置为纯色，图片，重复；css3的背景有很

31、大程度的突破，如透明度，渐变色，背景剪裁，背景图片大小，多背景背景颜色背景颜色1.可以为颜色名称的英文。对应的语法为：background-color:blue;2.可以为颜色对应的16进制值。语法为：background-color:#0000ff;3.可以为颜色对应的rgb值。语法为：background-color:rgb(0,0,255)4.Css3提供了半透明的显示。语法显示为：background-color:rgba(0,0,0,0.6)。05 css3基本属性-背景属性背景图片背景图片图片路径的设置与之前插入图片一样，分为相对路径和绝对路径。语法为background-imag

32、e:url(图片路径)背景位置背景位置在网页中需要将背景图片放在我们希望的位置，所以可以通过background-position属性来改变默认的位置。background-position：topcenterbackground-position:10px10pxbackground-position:50%50%background-position:left20pxtop10px05 css3基本属性-背景属性背景渐变绘制背景渐变绘制Css3中，支持背景的渐变。线性渐变linear-gradient径向渐变radial-gradient重复的线性渐变repeating-linear-gr

33、adient重复的径向渐变repeating-radial-gradient每一种渐变里面一定会有渐变方向，角度，起始颜色，终止颜色等用法如下：background:linear-gradient(-90deg,#fff,#333);background:radial-gradient(center,circle,#f00,#ff0,#080);background:radial-gradient(50%,circle,#f00,#ff0,#080);05 css3基本属性-背景属性背景滚动属性背景滚动属性背景可以被固定在某一处，也可以跟随网页内容的滚动更滚动。用法为：background-a

34、ttachment：scrool/fixed;背景定位的盒子背景定位的盒子背景的左上角可以定位在边框、内边距和内容上用法为：background-origin:padding-box/border-box/content-box背景剪裁属性背景剪裁属性背景由边框开始剪裁的意思是，边框以内部分可见，背景由内边距开始剪裁的意思是，内边距以内部分可见；背景由内容开始剪裁的意思是，内容以内部分可见。用法为：background-clip:padding-box/border-box/content-box。05 css3基本属性-背景属性背景大小背景大小背景大小是css3的新属性，background

35、-size属性可以用来定义背景图片的尺寸。用法为：background-size:100px200px/40%/cover/content。简写背景属性简写背景属性部分属性可以简写到background属性里面，用法为：background：#00ff00url(images/01.jpg)repeat-xtop30pxleft30pxscroll;05 css3基本属性案例案例请完善html及css。将素材提供的bg.jpg放到页面中间，并且可以根据页面大小自动缩放，不重复，背景图片以外填充#dff2f4天蓝色。文字大小为20像素。-背景属性05 css3基本属性文字字体文字字体网页中，文本

36、的颜色，间距行距，字体大小，字体效果多种多样，我们必须为之排版，才能使网页看起来重点分明，简明整洁-文本属性设置文字字体属性为font-family，基本语法：font-family:字体1,字体2,字体3;文字大小文字大小通过font-size来控制文字大小，基本语法：font-size:尺寸/百分比/关键字。文字倾斜文字倾斜文字样式为斜体时，使用font-style属性。基本语法：font-style:normal/italic/oblique;05 css3基本属性文字粗体文字粗体-文本属性文字需要为粗体显示时，使用font-weight属性。基本语法：font-weight:norma

37、l/bold/bolder/lighter/number;pfont-weight:bold;文字颜色文字颜色设置颜色用color来定义。用法color:颜色名称；color:#000000；color:rgb(0,0,255)。英文字异体英文字异体属性为font-variant，作用是将所有小写字母转换为小型大写字母，基本语法：font-variant:normal/small-caps;05 css3基本属性简写属性简写属性-文本属性与背景属性一样，font也有简写属性，用法：font:italicbold30px微软雅黑，文字修饰文字修饰修饰文字是指为文字添加下划线、删除线和上划线。基本

38、语法：text-decoration:underline|oveline|line-through|blink|none;英文字母大小写转换英文字母大小写转换该属性为text-transform，基本语法：text-transform:none/capitalize/uppercase/lowercase05 css3基本属性中文字符间距中文字符间距-文本属性通过letter-spacing属性可以用来调整中文字符或英文字符之间的间距，用法：letter-spacing:normal/长度，英文单词间距英文单词间距属性为word-spacing，用来调整英文单词之间的间距基本语法：word-s

39、pacing:normal/长度;文本水平对齐方式文本水平对齐方式text-align可以改变文本行之间的对齐方式基本语法：text-align:left/right/center/justify05 css3基本属性段落首行缩进段落首行缩进-文本属性通常在段落的首行会有退格缩进，css的表达方式为text-indent，用法：text-indent:长度/百分比，行高行高为了试段落文本看起来舒服，我们通常会调节行间距，该属性为line-height基本语法：line-height:normal|数字|长度|百分比文本阴影属性文本阴影属性Css3中，使用text-shadow可以为文本增加阴影

40、基本语法：text-shadow:5px5px5px#ff000005 css3基本属性Css3Css3自动换行自动换行-文本属性Css3还增加了一个文本属性为word-warp，表示可以允许文本在某个区域内强制换行。可以强制将长单词拆分，并换行到下一行用法：pword-wrap:break-word;05 css3基本属性案例案例-文本属性我们将完成以上视图，请完善html及css。题目要求，将标题设置字体大小36，文字间距24px，页面水平居中。设置正文字体14px，文字字体为微软雅黑，英文字体首字母为大写，行高为1.5em，首行缩进2em。圣诞节3个字设置下划线并加粗显示。05 css3

41、基本属性设置列表符号设置列表符号-列表属性属性为list-style-type，用来设置列表项的符号类型，基本语法：list-style-type:属性值;属性值属性值属性值说明属性值说明disc黑色圆点，默认值circle空心圆圈square黑色正方形decimal或1数字，如：1，2，3，4，lower-roman或i小写罗马文字，如：I，ii，iii，iv，upper-roman或I大写罗马文字，如：I，II，III，IV，V，lower-latin或a小写拉丁文，如：a，b，c，zupper-latin或A大写拉丁文，如：A，B，C，.Znone不显示任何符号05 css3基本属性设置

42、列表项图片设置列表项图片-列表属性可以用图片美化列表项，其属性为list-style-image，语法为：list-style-image:url(图片地址);设置列表位置设置列表位置列表项符号位于文本的左侧，默认放置在文本以外，可以通过调整位置将其放置到文本以内。属性为list-style-position，语法为：list-style-position:outside/inside;。简写属性简写属性list-style也有简写属性，语法为：list-style:noneurl(图片地址)inside05 css3基本属性案例案例-列表属性完成如图所示案例，完成html及css部分。在这个

43、案例中为了美化效果，加入了前面背景、文字部分的css样式05 css3基本属性Css其他常用显示属性其他常用显示属性-列表属性Display属性属性display属性可以定义元素的显示类型，属性值block是以块状元素的方式显示，inline是以内联元素的方式显示，none是不显示。Display：none/block/inline/inlin-blockoverflow属性属性overflow属性规定当内容溢出元素框时发生的事情overflow：visible/hidden/scroll/autoopacity属性属性当我们需要对某些元素表现为半透明效果时，需要使用到opacity属性。语法

44、如下：opacity:0.5。取值范围为0-1，1表示不透明，0表示完全透明。05 css3基本属性小贴士小贴士-列表属性如何在低版本的浏览器中显示半透明？如何在低版本的浏览器中显示半透明？由于老版本的各个浏览器对opacity的支持不一致，我们可以通过浏览器前缀使兼容性更好。如Ie8以下filter:alpha(opacity=50)，firefox需要加浏览器前缀如-moz-opactiy:0.5。为了满足所有浏览器，需要写5条1.-webkit-opacity:0.5;/*老safari和老Chrome浏览器*/2.-moz-opacity:0.5;/*低于Firefox0.9版本的*/

45、3.-khtml-opacity:0.5;/*老式khtml内核的Safari浏览器*/4.opacity:0.5;/*IE9以上和所有新版本浏览器*/5.filter:alpha(opacity=50);/*IE4-8*/06 css3中的伪类和伪对象常用的常用的css伪类伪类所谓“伪“，就是指不是真正的标签，而是依附于结构标签的一种状态。我们分为伪类和结构性伪类，以及伪对象在网页中，我们点击超链接，会改变颜色或者变换样式，这通常是css中称为伪类的技术实现的。属性值属性值属性值说明属性值说明:link默认链接时的样式:visited访问过后的样式:focus元素获得焦点时的样式:hover

46、鼠标经过时候的样式:active激活元素是的样式06 css3中的伪类和伪对象结构性伪类结构性伪类所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，语法如下，选择器:伪元素属性:值伪元素选择器也可以与类配合使用，语法如下，选择器类名:伪元素属性:值属性值属性值属性值说明属性值说明:first-of-type应用于指定类型的第一个元素:first-child应用于元素的第一个子元素:last-of-type应用于指定类型的最后一个元素:last-child应用于元素的最后一个:nth-of-type(n)应用于置顶类型的第n个元素，n可以是数

47、字，或者偶数（even）奇数（odd）06 css3中的伪类和伪对象伪对象伪对象伪元素是对元素中的特定内容进行操作。设计伪元素的目的就是去选取诸如元素内容第一个字或字母、文本第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。属性值属性值属性值说明属性值说明:first-letter将样式应用于元素文本的第一个字或字母:first-line将样式应用于元素文本的第一行:before在元素内容的最前面添加新内容，与content结合，见后面案例:after在元素内容的最后面添加新内容，用法同

48、上p:first-child:first-letter/*第一个段落里的第一个字母*/font-size:30px;font-weight:bold;07 css3中的动画Css3已经变得非常强大，以前网页里必须靠flash或者js才能实现的动画效果，现在可以靠纯css代码就可以完成。结合js，html5的canvas，还可以做出更炫的动画。Css3中的动画效果分为2d变形，3d变形，帧动画使用该属性时，Chrome和Safari需要前缀-webkit-；InternetExplorer9需要前缀-ms-。2d变形变形在2维空间中，元素可以被移位，倾斜，缩放，旋转，2d变形工作在X轴和Y轴，也

49、就是我们常说的水平轴和垂直轴。07 css3中的动画-2d变形位移位移translateTranslate是指的一个方法，可以简单的理解为：使用translate()函数，你可以把元素从原来的位置移动向x轴y轴移动，而不影响在X、Y轴上任何组件。translate()函数可以取一个值tx，也可以同时取两个值tx和ty，语法为transform:translate(x,y)缩放放scale缩放scale()函数可以让元素根据中心原点进行缩放。默认值为1。语法为transform:scale(x,y)，其中，x代表水平方向的缩放，y代表垂直方向的缩放。07 css3中的动画-2d变形旋旋转rota

50、te旋转rotate()函数通过设定的角度使元素根据原点进行旋转。括号里面的值表示旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。rotate()函数只接受一个值，其语法如下transform:rotate(deg)。若需要改变原点位置，可以通过transform-origin属性重置元素的旋转原点。例：Imgtransform-origin:topleft;/*改变原点中心至左上角*/transform:rotate(45deg);/*根据上诉原点位置顺时针旋转45度*/07 css3中的动画-2d变形倾斜斜skew倾斜skew()函数