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

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基本操作认识Dreamweaver界面属性面板编辑窗口

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

5、标签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 html5基本结构标签he

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

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

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

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

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

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

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

13、weaver中写出源代码。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=/img/pic.jpg。（2）相对路径相对路径是以当前文档所在的路径和子目录为起始目录，进行相对于文档的查找。制作网页时通常采用相对路径，这样可以避免站点中的文件整体移动后，产生找不到图片或其他文件等的现象。04 超链接文字超链接超链接指的是一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可

15、以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序等。HTML 超链接主要由标签对和属性href 构成。要实现链接的跳转，必须要使用属性href用法：链接的文字或图片通过点击链接的文字，具体的语法为：链接文字图片超链接通过点击图片进行跳转，具体的语法为：04 超链接锚点超链接1、确定链接跳转的位置，设置锚点：目标位置（锚点的名字可以是任意的英文名）2、创建链接源，链接文字或者图片注意：锚点名称需要必须要与链接的href内的锚点名称匹配（相同）。邮件超链接需要建立邮件超链接时，点击内容会启动电子邮件程序。具体用法为：发邮件04 超链接案例以下是关于超链接的一个知识巩固案例。根据如图所示

16、的网页效果图及文档路径，在Dreamweaver中写出源代码。（文档路径在书上有缺失，下图为准）创建一个名为test.html页面分别设置5个字段：link，百度图标图片，锚点链接，发邮件，这里是一段话为link字段增加链接到与test.html同级文件下的1.html为百度图片图片增加链接到百度官网为锚点链接字段增加锚点链接到“这里是一段话”为发邮件字段增加邮件超链接到05 列表标签列表标签是HTML中常用的一种标签。具体分为无序有序列表定义列表。列表标签的主要用途为：网页导航、网页列表页、网页图文排列部分等05 列表标签-无序列表无序列表（Unordered lists）是一个项目的列表，

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

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

19、频，如video视频播放audio声音播放source媒体元素等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，metadatacontrols设置或返回视频是否应该显示控件（比

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

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

24、v ENDTHANK YOU人机交互界面设计第五章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(Cascading Style Sheets)，即层叠样式表。他用来设

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

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

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

28、但与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部分：p acolor:#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、为：background-color:blue;可以为颜色对应的16进制值。语法为：background-color:#0000ff;可以为颜色对应的rgb值。语法为：background-color:rgb(0,0,255)Css3提供了半透明的显示。语法显示为：background-color:rgba(0,0,0,0.6)。05 css3基本属性-背景属性背景图片图片路径的设置与之前插入图片一样，分为相对路径和绝对路径。语法为background-image:url(图片路径)背景位置在网页中需要将背景图片放在我们希望的位置，所以可以通过background-position属性来改变默

32、认的位置。background-position：top centerbackground-position:10px 10pxbackground-position:50% 50%background-position:left 20px top 10px05 css3基本属性-背景属性背景渐变绘制Css3中，支持背景的渐变。线性渐变linear-gradient径向渐变radial-gradient重复的线性渐变repeating-linear-gradient重复的径向渐变repeating-radial-gradient每一种渐变里面一定会有渐变方向，角度，起始颜色，终止颜色等用法如下

33、：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-attachment：scrool/fixed;背景定位的盒子背景的左上角可以定位在边框、内边距和内容上用法为：background-origin:p

34、adding-box/border-box/content-box背景剪裁属性背景由边框开始剪裁的意思是，边框以内部分可见，背景由内边距开始剪裁的意思是，内边距以内部分可见；背景由内容开始剪裁的意思是，内容以内部分可见。用法为：background-clip:padding-box/border-box/content-box。05 css3基本属性-背景属性背景大小背景大小是css3的新属性，background-size属性可以用来定义背景图片的尺寸。用法为：background-size:100px 200px/ 40%/cover/content。简写背景属性部分属性可以简写到back

35、ground属性里面，用法为：background：#00ff00 url(images/01.jpg ) repeat-x top 30px left 30px scroll;05 css3基本属性案例请完善html及css。将素材提供的bg.jpg放到页面中间，并且可以根据页面大小自动缩放，不重复，背景图片以外填充#dff2f4天蓝色。文字大小为20像素。-背景属性05 css3基本属性文字字体网页中，文本的颜色，间距行距，字体大小，字体效果多种多样，我们必须为之排版，才能使网页看起来重点分明，简明整洁-文本属性设置文字字体属性为 font-family，基本语法：font-family:

36、字体 1,字体 2,字体 3;文字大小通过font-size来控制文字大小，基本语法：font-size:尺寸/百分比/关键字。文字倾斜文字样式为斜体时，使用font-style属性。基本语法：font-style:normal/italic/oblique;05 css3基本属性文字粗体-文本属性文字需要为粗体显示时，使用font-weight属性。基本语法：font-weight:normal/bold/bolder/lighter/number; pfont-weight:bold;文字颜色设置颜色用color来定义。用法color:颜色名称；color:#000000；color:rg

37、b(0,0,255)。英文字异体属性为font-variant，作用是将所有小写字母转换为小型大写字母，基本语法：font-variant:normal/small-caps; 05 css3基本属性简写属性-文本属性与背景属性一样，font也有简写属性，用法：font:italic bold 30px 微软雅黑，文字修饰修饰文字是指为文字添加下划线、删除线和上划线。基本语法：text-decoration: underline|oveline|line-through|blink|none; 英文字母大小写转换该属性为text-transform，基本语法：text-transform:no

38、ne/capitalize/uppercase/lowercase05 css3基本属性中文字符间距-文本属性通过letter-spacing属性可以用来调整中文字符或英文字符之间的间距，用法：letter-spacing:normal/长度，英文单词间距属性为 word-spacing，用来调整英文单词之间的间距基本语法：word-spacing:normal/长度; 文本水平对齐方式text-align可以改变文本行之间的对齐方式基本语法：text-align:left/right/center/justify05 css3基本属性段落首行缩进-文本属性通常在段落的首行会有退格缩进，css

39、的表达方式为text-indent，用法：text-indent:长度/百分比，行高为了试段落文本看起来舒服，我们通常会调节行间距，该属性为line-height基本语法：line-height:normal|数字|长度|百分比文本阴影属性Css3中，使用text-shadow可以为文本增加阴影基本语法：text-shadow:5px 5px 5px #ff000005 css3基本属性Css3自动换行-文本属性Css3还增加了一个文本属性为word-warp，表示可以允许文本在某个区域内强制换行。可以强制将长单词拆分，并换行到下一行用法：pword-wrap:break-word;05 cs

40、s3基本属性案例-文本属性我们将完成以上视图，请完善html及css。题目要求，将标题设置字体大小36，文字间距24px，页面水平居中。设置正文字体14px，文字字体为微软雅黑，英文字体首字母为大写，行高为1.5em，首行缩进2em。圣诞节3个字设置下划线并加粗显示。05 css3基本属性设置列表符号-列表属性属性为 list-style-type，用来设置列表项的符号类型，基本语法：list-style-type:属性值; 属性值属性值说明disc黑色圆点，默认值circle空心圆圈square黑色正方形decimal 或 1数字，如：1，2，3，4，lower-roman 或 i小写罗马文

41、字，如：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基本属性设置列表项图片-列表属性可以用图片美化列表项，其属性为 list-style-image，语法为：list-style-image:url(图片地址);设置列表位置列表项符号位于文本的左侧，默认放置在文本以外，可以通过调整位置将其放置到文本以内。属性为 list-style-position，语法为：list-style-

42、position:outside/inside; 。简写属性list-style也有简写属性，语法为：list-style:none url(图片地址) inside05 css3基本属性案例-列表属性完成如图所示案例，完成html及css部分。在这个案例中为了美化效果，加入了前面背景、文字部分的css样式05 css3基本属性Css其他常用显示属性-列表属性Display属性display 属性可以定义元素的显示类型，属性值block是以块状元素的方式显示，inline是以内联元素的方式显示，none是不显示。Display：none/block/inline/inlin-blockover

43、flow属性overflow 属性规定当内容溢出元素框时发生的事情overflow：visible/hidden/scroll/autoopacity属性当我们需要对某些元素表现为半透明效果时，需要使用到opacity属性。语法如下：opacity:0.5。取值范围为0-1，1表示不透明，0表示完全透明。05 css3基本属性小贴士-列表属性如何在低版本的浏览器中显示半透明？由于老版本的各个浏览器对opacity的支持不一致，我们可以通过浏览器前缀使兼容性更好。如Ie8以下filter:alpha (opacity=50)，firefox需要加浏览器前缀如-moz-opactiy:0.5。为了

44、满足所有浏览器，需要写5条-webkit-opacity:0.5;/*老safari和老Chrome浏览器*/-moz-opacity:0.5;/*低于Firefox0.9版本的*/-khtml-opacity:0.5;/*老式khtml内核的Safari浏览器*/opacity:0.5;/*IE9以上和所有新版本浏览器*/filter:alpha(opacity=50);/*IE4-8*/06 css3中的伪类和伪对象常用的css伪类所谓“伪“，就是指不是真正的标签，而是依附于结构标签的一种状态。我们分为伪类和结构性伪类，以及伪对象在网页中，我们点击超链接，会改变颜色或者变换样式，这通常是c

45、ss中称为伪类的技术实现的。属性值属性值说明:link默认链接时的样式:visited访问过后的样式:focus元素获得焦点时的样式:hover鼠标经过时候的样式:active激活元素是的样式06 css3中的伪类和伪对象结构性伪类所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，语法如下，选择器:伪元素属性:值伪元素选择器也可以与类配合使用，语法如下，选择器 类名:伪元素属性:值属性值属性值说明:first-of-type应用于指定类型的第一个元素:first-child应用于元素的第一个子元素:last-of-type应用于指定类型的最

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

47、最前面添加新内容，与content结合，见后面案例:after在元素内容的最后面添加新内容，用法同上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-；Internet Explore

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

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

50、g); /*根据上诉原点位置顺时针旋转45度*/07 css3中的动画-2d变形倾斜skew倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。语法格式如下：transform: skew(xdeg,ydeg);矩阵函数matrix不常用，有需要查看参考资料07 css3中的动画-2d变形案例页面最终效果见上，完成html和css07 css3中的动画-2d变形小贴士为什么在上述案例中transform属性前

51、面都加上了浏览器前缀？根据不同的内核，一些私有属性的css前缀不一样。Gecko内核即火狐浏览器，css前缀为-moz-WebKit内核即chrome浏览器，safari浏览器，搜狗浏览器，qq浏览器等等，css前缀为-webkit- Presto内核即Opera(欧朋)浏览器等，css前缀为-o-Trident内核即IE，360极速浏览器等，css前缀为-ms-IE内核即ie浏览器，css前缀为“-ms”07 css3中的动画-3d变形3d位移CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数。使用三维向量的坐标定义元素在每个方向移动多少。其基本语法

52、如下：translate3d(x,y,z)。三维变换使用基于二维变换的相同属性，如果已经掌握了2D变形，就会觉得3D变形的功能和2D变换的功能相当类似。差别在于X轴和Y 轴之外，还有一个Z轴07 css3中的动画-3d变形3d缩放CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数。当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。其基本语法如下：scale3d(x,y,z)。scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果，如同时添加rotateX(45

53、deg)07 css3中的动画-3d变形3d旋转CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果，如同时添加rotateX(45deg)除了rotateX()、rotateY()和rotateZ()函数可以让一个元素在三维空间中旋转之外，还有一个属性rotate3d()函数。在3D空间，旋转有三个程度的自由来描述一个转动轴。轴的旋转是由一个x,y,z向量并经过元素原点。其基本语法如下：rotate3d(x,y,z,a)0

54、7 css3中的动画-3d变形透视perspective属性3D变形中，有一个很重要的属性就是透视属性，有了透视，立体感就有了，更能说明3D。用法如下transform:perspective(500px)注意：倾斜是二维变形，不能在三维空间变形。元素可能会在X轴和Y轴倾斜，然后转化为三维，但它们不能在Z轴倾斜07 css3中的动画-css3过渡变换的属性名称transition-propertyCSS 过渡（transition）是通过定义元素从 起点的状态 和 结束点的状态 ，在一定的时间区间内实现元素平滑地过渡或变化的一种补间动画机制。通过transition你可以决定哪个属性发生动画效

55、果 (可以通过明确地列出这些属性)，何时开始动画 (通过设置delay), 动画持续多久 (通过设置duration), 以及如何动画 (通过定义timing函数，比如线性地或开始快结尾慢)。下面我们详细的进行讲解可以单独指定元素的哪些属性，如height，width等或者all全部属性，指定为none时，动画立即停止；语法规则为:选择器transition-property:none/all/任意元素属性07 css3中的动画-css3过渡过渡持续时间transition-duration用来指定元素过渡过程的持续时间，时间值，1s(秒)，4000ms(毫秒)，其中1000ms=1s。其默认

56、值是0s，也可以理解为无过渡（transition）效果。语法规则为:选择器transition-duration:2s/1000ms;过渡速率变化transition-timing-function指定CSS属性的变换速率，简单的来说就是先快后慢、先慢后快、匀速还是逐渐变慢。语法规则为:选择器transition-timing-function:ease/ease-in-out/linear/ease-in/ease-out;07 css3中的动画-css3过渡过渡延迟时间transition-delay该属性指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“动画效果”。语法

57、规则为:选择器(transtition-delay:1s/500ms;)transition的简写属性过渡属性可以简写，即将多个属性值写到一个语句里语法规则为:Transition:width 2s ease 500ms,boreder 2s linear,background-color 1s ease-in 0.5s07 css3中的动画-animation动画Keyframes帧动画animation确实非常强大，是css3的一大特色。可以运用他完成网页里面一些简单的动画。Keyframes的语法：keyframes 动画名字 0% 属性1:属性值1; 属性2:属性值2; 20% 属性1

58、:属性值1; 属性2:属性值2; . 100% 属性1:属性值1; 属性2:属性值2; 07 css3中的动画-animation动画动画名称animation-name可以用来定义一个动画的名称。其语法为animation-name:动画名;注意：这里的动画名一定要与keyframes创建的动画名一致，如果不一致，动画将不能产生动画时长animation-duration该属性指元素的动画持续时间，该元素与transition-duration使用方法一样，取值范围不再作详解，如：选择符:animation-duration:500ms;07 css3中的动画-animation动画动画变换

59、速率animation-timing-function该属性指元素动画运动时的变换速率，使用方法也与transtion-timing-function相似动画开始时间animation-delay该属性用来指定元素动画开始时间。与transition-delay使用方法一样，如：选择器animation-delay:1s;，表示1s之后执行该动画，其默认值也是0。循环播放次数animation-iteration-count该属性用来指定元素播放动画的循环次数。语法为：选择器animation-iteration-count:number;，number的取值可以是1，2，.等数字，默认值为”

60、1”,如果需要无限循环，择取值为“infinite”。07 css3中的动画-animation动画动画播放方向animation-direction该属性用来指定元素动画播放的方向，有2个取值，分别为normal、alternate简写属性animation语法为：animation:animation-name,animation-duration/animation-timing-function/;具体的用法如：animation:pic 2s ease-in 1s infinite alternate; ENDTHANK YOU人机交互界面设计第六章网页布局基础目录01 盒子模型02