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

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

1、人机交互界面设计,第三章,web基础知识,目录,01 了解万维网、IP和域名、HTTP、FTP,02 Dreamweaver基本操作,03 网页文件的基本操作,04 认识HTML,03-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。 网站由众多不同内容的网页构成，网页的内容可体现网站的全部功能。,HTTP,HTTP是Hypertext Transfer Protocol的缩写，即超文本传输协议。HTTP提供了访问超文本信息的功能，是WWW浏览器和WWW服务器之间的应用层通信协议。,01 了解万维网、IP和域名、HTTP、FTP,01 了解万

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

4、mweaver基本操作,认识Dreamweaver界面,属性面板,编辑窗口,对象面板,03 网页文件的基本操作,创建站点,1,2,3,在启动Dreamweaver时通过欢迎页面创建,在Dreamweaver工作环境下，单击菜单栏中的“站点”-“新建站点”命令,“文件” “管理站点”，在弹出窗口中点击“新建站点”命令,03 网页文件的基本操作,新建站点,步骤二 站点标题,步骤三 选择服务器,03 网页文件的基本操作,管理站点,在“文件”面板中的“food”文件夹上单击鼠标右键，则弹出一个快捷菜单。我们可以通过这个来管理站点。 根据需求建立相应的文件及文件夹。,04 认识HTML,HTML基本结构

5、, 网站名称 网站基本内容 ,END THANK YOU,人机交互界面设计,第四章,HTML5基础,目录,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 元素的块级元素。可以

6、把它看作是一个容器，用来定义文档中的分区。这是一个双标签，在使用时，必须关闭它。 这是一个模块内容, ,书中这部分代码有错，以ppt为准,01 html5基本结构标签,header标签,标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面，表示网页一个模块内容的头部。 它可以包括标签，还可以包括表格内容、标识、搜索表单、导航等。Header中至少要有一个标题元素或hgroup元素或nav元素 用法： 头部内容 /标题元素，后面会详解 头部信息,01 html5基本结构标签,nav标签,nav标签可以作为页面导航的链接组。同样可以包含标签，或者其他列表，表

7、单等 用法： 这里显示的是导航部分。,section标签,该标签用来定义文档中的节。比如章节、某个模块或文档中的其它部分。一般用于成块的内容，会在文档流中开始一个新的节。 用法： 该模块的标题 该模块的内容,01 html5基本结构标签,article标签,是一个特殊的section标签，具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。 例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。 用法： 这是文章标题 文章内容详情 /这里的是段落标签，后面做详解 这里可以是文章内容 ,01 html5基本结构标签,aside标签,1、可以表示包含在article元

8、素中的附属信息，如名次解释，相关引用资料等。 用法： 文章标题 文章内容 本文出自 2、也可以表示整个页面或站点的附属信息部分。如侧边栏、博客里面的其他文章列表，友情链接、单元广告等。,01 html5基本结构标签,footer标签,1、该标签用于定义section、article或网页的页脚，包含了与内容或页面有关的信息，比如说文章信息（作者和日期）。作为页面的页脚时，一般包含了版权、相关文件和链接。它和标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该模块的页脚了。 用法： Copyright 2006-2015 重庆市巴南分局备案编号:11

9、0105000000,01 html5基本结构标签,hgroup标签,若在一模块中需要含有一系列的标题元素，则可以用hgroup将他们包裹起来。 用法： 标题1 标题2 ,01 html5基本结构标签,figure标签与figcaption标签,一段独立的流内容，一般表示文档的一个独立单元。这2个属性常常在一起使用，figcaption元素为figure元素组添加描述信息。可以用于对元素的组合，多用于图片与图片描述组合。 用法： 这里可以插入一张图片 这儿是图片的描述信息,02 文本制作,段落： 段落标签顾名思义就是一个段落，可以理解为一些句子或文本组织在一起的块级元素。 用法：这里是一个段落

10、。,-认识标题、段落、短语元素,标题： 标题元素从h1到h6共六级。 标题元素中包含的文本被浏览器渲染为“块”元素，即会自动产生换行。 所显示的字号是最大的， 所显示的字号最小,span： 行内元素，本身没有任何含义和任何样式，但可以定义组合文档中的部分文字。 用法： 下面这是一段文字,换行： 在html中的换行显示需要专门的标签。该标签单独使用，不成对出现，是一种独立标记。 用法： 这里将要换行。这里是第二行。,02 文本制作,制作 效率高,网站管理便捷,控制能力强,-认识标题、段落、短语元素,短语元素： 短语元素都是行内元素。指的是要定义一个段落或者一句话里面的一部分文字。比如，要强调某个

11、文字，倾斜某个文字，高亮某个文字等等。 如要为： 文字加粗这部分文字加粗 强调文字强调这里的文字 斜体文字这里的文字会有斜体效果。,02 文本制作,-认识标题、段落、短语元素,短语元素（需要时可以查表）,02 文本制作,-认识标题、段落、短语元素,案例：,根据效果图，在Dreamweaver中写出源代码。,02 文本制作,-认识标题、段落、短语元素,小贴士：什么是块状元素，什么是内联元素？,块级元素：这类元素的特征是添加该标签后，会独立的成一行显示。 行内元素：也叫内联元素。这类元素的特征是增加其标签后，不会换行。块元素可以见下图。,02 文本制作,控制能力强,-特殊字符,若我们需要在html

12、页面中显示某些符号如：， ,03 css的声明及选择器,Css的声明,ss的声明指的是需要设置的css属性（例如颜色）及其值。 Css的声明指的是需要设置的css属性（例如颜色）及其值。它有一定的语法规则。不管是外部链接还是嵌入样式，导入式样式，声明css的方法都是一样的。语法结构如下： 选择符 属性1:属性值; 属性2:属性值; ,03 css的声明及选择器,Css选择器,标签选择器 id 选择器 类选择器 分组选择器 包含选择器 通配符选择器,03 css的声明及选择器,标签选择器,我们直接给标签设置样式的类型就是标签选择器,例如： a color:#ff0000; font-size:1

13、6px; ,03 css的声明及选择器,类选择器,类选择器也叫class选择器，语法为: .类名属性1:属性值;,例如：,Css部分： .class color:#ff0000; font-size:16px; ,Html部分： 点此链接2 ,03 css的声明及选择器,id选择器,但与class不同的是，id名不能重复. #类名属性1:属性值;,例如：,Css部分： #menu color:#ff0000; font-size:16px; ,Html部分： 导航 ,03 css的声明及选择器,分组选择器,当多个选择器声明的样式完全相同时，可以将他们统一进行声明，各选择器之间使用英文”,”分开

14、 语法为：标签1,标签2,标签3属性1:属性值;属性2:属性值;,例如：,Css部分： #menu,.red,footer color:#ff0000; font-size:16px; ,Html部分： 标题 导航 这里是段落1 这里是段落2 这里是版权信息 ,03 css的声明及选择器,包含选择器,需要为一个容器里面的元素设置样式时，需要使用包含选择器语法为：父选择器 子选择器属性1:属性值;属性2:属性值; 父选择器和子选择器之间用空格隔开,例如：,Css部分： p a color:#ff0000; font-size:14px; ,Html部分： 链接1 点击这里 跳转到首页 ,03 c

15、ss的声明及选择器,通配符选择器,它由星号*来表示选择器的名称，可以定义所有的网页元素显示格式。通配符一般用于统一浏览器设置,例如：,意思是，将该页面的所有标签样式中的外边距、内边距重置为0，来统一浏览器样式,* margin:0; padding:0; ,03 css的声明及选择器,案例,请完成如上图的html及css样式,03 css的声明及选择器,优先级,当有多个选择器作用于同一个元素时，最终会使用哪一个选择器所设置的样式？,优先级由高到低为：行内样式 id 选择器 类选择器 标签选择器。 若一个页面内有不同类型的css文件，css文件的优先级别为：行内样式表 内嵌样式表 链接样式表 导

16、入样式表。,04 css中的注释,注释,为了帮助理解和后期维护，在css中应该有一定的注释即解释，这些注释是不会对css代码产生影响的。 如： /*-注释内容-*/,html注释和css注释可以混用吗？ 不行。,05 css3基本属性,-背景属性,Css2的背景可以设置为纯色，图片，重复； css3的背景有很大程度的突破，如透明度，渐变色，背景剪裁，背景图片大小，多背景,背景颜色,可以为颜色名称的英文。对应的语法为：background-color:blue; 可以为颜色对应的16进制值。语法为：background-color:#0000ff; 可以为颜色对应的rgb值。语法为：backgr

17、ound-color:rgb(0,0,255) Css3提供了半透明的显示。语法显示为：background-color:rgba(0,0,0,0.6)。,05 css3基本属性,-背景属性,背景图片,图片路径的设置与之前插入图片一样，分为相对路径和绝对路径。 语法为background-image:url(图片路径),背景位置,在网页中需要将背景图片放在我们希望的位置，所以可以通过background-position属性来改变默认的位置。 background-position：top center background-position:10px 10px background-posi

18、tion:50% 50% background-position:left 20px top 10px,05 css3基本属性,-背景属性,背景渐变绘制,Css3中，支持背景的渐变。 线性渐变linear-gradient 径向渐变radial-gradient 重复的线性渐变repeating-linear-gradient 重复的径向渐变repeating-radial-gradient 每一种渐变里面一定会有渐变方向，角度，起始颜色，终止颜色等 用法如下：background:linear-gradient(-90deg,#fff,#333);background: radial-gra

19、dient(center,circle,#f00,#ff0,#080); background: radial-gradient (50%,circle,#f00,#ff0,#080);,05 css3基本属性,-背景属性,背景滚动属性,背景可以被固定在某一处，也可以跟随网页内容的滚动更滚动。 用法为：background-attachment：scrool/fixed;,背景定位的盒子,背景的左上角可以定位在边框、内边距和内容上 用法为：background-origin:padding-box/border-box/content-box,背景剪裁属性,背景由边框开始剪裁的意思是，边框以内

20、部分可见，背景由内边距开始剪裁的意思是，内边距以内部分可见；背景由内容开始剪裁的意思是，内容以内部分可见。 用法为：background-clip:padding-box/border-box/content-box。,05 css3基本属性,-背景属性,背景大小,背景大小是css3的新属性，background-size属性可以用来定义背景图片的尺寸。 用法为：background-size:100px 200px/ 40%/cover/content。,简写背景属性,部分属性可以简写到background属性里面， 用法为：background：#00ff00 url(images/01.

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

22、，基本语法：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:rgb(0,0,255)。,英文字异体,属性为font-v

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

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

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

26、-word;,05 css3基本属性,案例,-文本属性,我们将完成以上视图，请完善html及css。题目要求，将标题设置字体大小36，文字间距24px，页面水平居中。设置正文字体14px，文字字体为微软雅黑，英文字体首字母为大写，行高为1.5em，首行缩进2em。圣诞节3个字设置下划线并加粗显示。,05 css3基本属性,设置列表符号,-列表属性,属性为 list-style-type，用来设置列表项的符号类型，基本语法：list-style-type:属性值;,05 css3基本属性,设置列表项图片,-列表属性,可以用图片美化列表项，其属性为 list-style-image，语法为：lis

27、t-style-image:url(图片地址);,设置列表位置,列表项符号位于文本的左侧，默认放置在文本以外，可以通过调整位置将其放置到文本以内。属性为 list-style-position， 语法为：list-style-position:outside/inside; 。,简写属性,list-style也有简写属性， 语法为：list-style:none url(图片地址) inside,05 css3基本属性,案例,-列表属性,完成如图所示案例，完成html及css部分。在这个案例中为了美化效果，加入了前面背景、文字部分的css样式,05 css3基本属性,Css其他常用显示属性,-

28、列表属性,Display属性 display 属性可以定义元素的显示类型，属性值block是以块状元素的方式显示，inline是以内联元素的方式显示，none是不显示。 Display：none/block/inline/inlin-block,overflow属性 overflow 属性规定当内容溢出元素框时发生的事情 overflow：visible/hidden/scroll/auto,opacity属性 当我们需要对某些元素表现为半透明效果时，需要使用到opacity属性。 语法如下：opacity:0.5。取值范围为0-1，1表示不透明，0表示完全透明。,05 css3基本属性,小贴

29、士,-列表属性,如何在低版本的浏览器中显示半透明？ 由于老版本的各个浏览器对opacity的支持不一致，我们可以通过浏览器前缀使兼容性更好。如Ie8以下filter:alpha (opacity=50)，firefox需要加浏览器前缀如-moz-opactiy:0.5。为了满足所有浏览器，需要写5条 -webkit-opacity:0.5;/*老safari和老Chrome浏览器*/ -moz-opacity:0.5;/*低于Firefox0.9版本的*/ -khtml-opacity:0.5;/*老式khtml内核的Safari浏览器*/ opacity:0.5;/*IE9以上和所有新版本浏

30、览器*/ filter:alpha(opacity=50);/*IE4-8*/,06 css3中的伪类和伪对象,常用的css伪类,所谓“伪“，就是指不是真正的标签，而是依附于结构标签的一种状态。我们分为伪类和结构性伪类，以及伪对象,在网页中，我们点击超链接，会改变颜色或者变换样式，这通常是css中称为伪类的技术实现的。,06 css3中的伪类和伪对象,结构性伪类,所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，语法如下，选择器:伪元素属性:值 伪元素选择器也可以与类配合使用，语法如下，选择器 类名:伪元素属性:值,06 css3中的伪类和

31、伪对象,伪对象,伪元素是对元素中的特定内容进行操作。设计伪元素的目的就是去选取诸如元素内容第一个字或字母、文本第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。,p:first-child:first-letter /*第一个段落里的第一个字母*/ font-size:30px; font-weight:bold;,07 css3中的动画,Css3已经变得非常强大，以前网页里必须靠flash或者js才能实现的动画效果，现在可以靠纯css代码就可以完成。结合js，html5的canvas，

32、还可以做出更炫的动画。Css3中的动画效果分为2d变形，3d变形，帧动画 使用该属性时，Chrome 和 Safari 需要前缀 -webkit-；Internet Explorer 9 需要前缀 -ms-。,2d变形,在2维空间中，元素可以被移位，倾斜，缩放，旋转，2d变形工作在X轴和Y轴，也就是我们常说的水平轴和垂直轴。,07 css3中的动画,-2d变形,位移translate,Translate是指的一个方法，可以简单的理解为：使用translate()函数，你可以把元素从原来的位置移动向x轴y轴移动，而不影响在X、Y轴上任何组件。translate()函数可以取一个值tx，也可以同时

33、取两个值tx和ty， 语法为transform:translate(x,y),缩放scale,缩放scale()函数可以让元素根据中心原点进行缩放。默认值为1。 语法为transform:scale(x,y)， 其中，x代表水平方向的缩放，y代表垂直方向的缩放。,07 css3中的动画,-2d变形,旋转rotate,旋转rotate()函数通过设定的角度使元素根据原点进行旋转。括号里面的值表示旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。rotate()函数只接受一个值， 其语法如下transform:rotate(deg)。 若需要改

34、变原点位置，可以通过transform-origin属性重置元素的旋转原点。 例： Img transform-origin: top left; /*改变原点中心至左上角*/ transform: rotate(45deg); /*根据上诉原点位置顺时针旋转45度*/ ,07 css3中的动画,-2d变形,倾斜skew,倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 语法格式如下：transform:

35、 skew(xdeg,ydeg);,矩阵函数matrix,不常用，有需要查看参考资料,07 css3中的动画,-2d变形,案例,页面最终效果见上，完成html和css,07 css3中的动画,-2d变形,小贴士,为什么在上述案例中transform属性前面都加上了浏览器前缀？,根据不同的内核，一些私有属性的css前缀不一样。Gecko内核即火狐浏览器，css前缀为-moz- WebKit内核即chrome浏览器，safari浏览器，搜狗浏览器，qq浏览器等等，css前缀为-webkit- Presto内核即Opera(欧朋)浏览器等，css前缀为-o- Trident内核即IE，360极速浏览

36、器等，css前缀为-ms- IE内核即ie浏览器，css前缀为“-ms”,07 css3中的动画,-3d变形,3d位移,CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数。 使用三维向量的坐标定义元素在每个方向移动多少。 其基本语法如下：translate3d(x,y,z)。,三维变换使用基于二维变换的相同属性，如果已经掌握了2D变形，就会觉得3D变形的功能和2D变换的功能相当类似。差别在于X轴和Y 轴之外，还有一个Z轴,07 css3中的动画,-3d变形,3d缩放,CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数。 当sc

37、ale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。 其基本语法如下：scale3d(x,y,z)。 scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果，如同时添加rotateX(45deg),07 css3中的动画,-3d变形,3d旋转,CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果，如同时添加rotateX(4

38、5deg) 除了rotateX()、rotateY()和rotateZ()函数可以让一个元素在三维空间中旋转之外，还有一个属性rotate3d()函数。在3D空间，旋转有三个程度的自由来描述一个转动轴。轴的旋转是由一个x,y,z向量并经过元素原点。其基本语法如下：rotate3d(x,y,z,a),07 css3中的动画,-3d变形,透视perspective属性,3D变形中，有一个很重要的属性就是透视属性，有了透视，立体感就有了，更能说明3D。用法如下transform:perspective(500px),注意：倾斜是二维变形，不能在三维空间变形。元素可能会在X轴和Y轴倾斜，然后转化为三维

39、，但它们不能在Z轴倾斜,07 css3中的动画,-css3过渡,变换的属性名称transition-property,CSS 过渡（transition）是通过定义元素从 起点的状态 和 结束点的状态 ，在一定的时间区间内实现元素平滑地过渡或变化的一种补间动画机制。 通过transition你可以决定哪个属性发生动画效果 (可以通过明确地列出这些属性)，何时开始动画 (通过设置delay), 动画持续多久 (通过设置duration), 以及如何动画 (通过定义timing函数，比如线性地或开始快结尾慢)。下面我们详细的进行讲解,可以单独指定元素的哪些属性，如height，width等或者al

40、l全部属性， 指定为none时，动画立即停止； 语法规则为:选择器transition-property:none/all/任意元素属性,07 css3中的动画,-css3过渡,过渡持续时间transition-duration,用来指定元素过渡过程的持续时间，时间值，1s(秒)，4000ms(毫秒)，其中1000ms=1s。 其默认值是0s，也可以理解为无过渡（transition）效果。 语法规则为:选择器transition-duration:2s/1000ms;,过渡速率变化transition-timing-function,指定CSS属性的变换速率，简单的来说就是先快后慢、先慢后快

41、、匀速还是逐渐变慢。 语法规则为:选择器transition-timing-function:ease/ease-in-out/linear/ease-in/ease-out;,07 css3中的动画,-css3过渡,过渡延迟时间transition-delay,该属性指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“动画效果”。 语法规则为:选择器(transtition-delay:1s/500ms;),transition的简写属性,过渡属性可以简写，即将多个属性值写到一个语句里 语法规则为:Transition:width 2s ease 500ms,boreder 2

42、s linear,background-color 1s ease-in 0.5s,07 css3中的动画,-animation动画,Keyframes帧动画,animation确实非常强大，是css3的一大特色。可以运用他完成网页里面一些简单的动画。,Keyframes的语法： keyframes 动画名字 0% 属性1:属性值1; 属性2:属性值2; 20% 属性1:属性值1; 属性2:属性值2; . 100% 属性1:属性值1; 属性2:属性值2; ,07 css3中的动画,-animation动画,动画名称,animation-name可以用来定义一个动画的名称。其语法为animati

43、on-name:动画名; 注意：这里的动画名一定要与keyframes创建的动画名一致，如果不一致，动画将不能产生,动画时长animation-duration,该属性指元素的动画持续时间，该元素与transition-duration使用方法一样，取值范围不再作详解，如：选择符:animation-duration:500ms;,07 css3中的动画,-animation动画,动画变换速率animation-timing-function,该属性指元素动画运动时的变换速率，使用方法也与transtion-timing-function相似,动画开始时间animation-delay,该属性

44、用来指定元素动画开始时间。与transition-delay使用方法一样，如： 选择器animation-delay:1s;，表示1s之后执行该动画，其默认值也是0。,循环播放次数animation-iteration-count,该属性用来指定元素播放动画的循环次数。 语法为：选择器animation-iteration-count:number;，number的取值可以是1，2，.等数字，默认值为”1”,如果需要无限循环，择取值为“infinite”。,07 css3中的动画,-animation动画,动画播放方向animation-direction,该属性用来指定元素动画播放的方向，有

45、2个取值，分别为normal、alternate,简写属性animation,语法为：animation:animation-name,animation-duration/animation-timing-function/; 具体的用法如：animation:pic 2s ease-in 1s infinite alternate;,END THANK YOU,人机交互界面设计,第六章,网页布局基础,目录,01 盒子模型,02 网页布局方式,03 简单的网页布局练习,02-01 标准流 02-02 浮动与清除浮动 02-03 相对定位 02-04 绝对定位 02-05 z-index,01

46、-01 宽度和高度 01-03 内边距 01-02 边框border 01-04 外边距,01 盒子模型,网页文档中的每个元素都被视为一个盒子。可以理解为，网页布局就是将大大小小的盒子通过嵌套来进行合理的摆放。在布局的过程中，最需要关注的是盒子尺寸计算、是否会在不同浏览器移位等要素。一个标准的 W3C 盒子模型由 content（内容）、padding（填充，也称内边距）、margin（外边距）和border（边框）这 4 个属性组成,content 就是盒子里装的东西，盒子一定会有宽度和高度； 盒子外壳的厚度就是（border）边框； 盒子里面的内容距盒子的边框会有一定的距离，这就是内边距（

47、padding）； 而盒子之间的间距就是外边距（margin）。,宽度width,width属性只为实际内容（即content）的宽度。 Min-width Max-widh,01 盒子模型,-宽度和高度,高度height,Height属性指元素的内容在浏览器可视区域中的高度，可以指定数值（比如900px）或者相对于父元素的百分比（比如60%）。若不为元素指定高度，元素的高度一般为内容自身的高度 Min-height Max-height,边框宽度border-width,网页中元素的边框（border）也包含同样的一些属性。具体为border-width（边框的厚度），border-styl

48、e（边框的样式），border-color（边框的颜色）的常用css属性，,01 盒子模型,-边框border,边框的宽度分为4个方向，分别是top，right，bottom，left 语法如：border-width:数值 也可以单独为某一个方向设定宽度，如border-top-width:2px也可以单独为某一个方向设定宽度，如border-top-width:2px,边框颜色border-color,01 盒子模型,-边框border,边框颜色同宽度一样也是四个方向，语法为border-color:颜色值 边框宽度属性一样，取值可以是1个到4个值 border-color:red,边框样

49、式border-style,border-style是指边框的显示方式是实线，虚线还是点状线、双线等形态 仍然有4个方向的值，1-4个值的取值也与上面是一致的。用法如：border-style:dashed。 注意：不同浏览器对相同边框样式的渲染方式可能不同。,简写属性border,01 盒子模型,-边框border,border:1px solid #000；3个值的顺序可以调换； 或者单独为某一个方向指定属性，如border-top:1px dashed #00f,圆角边框border-radius,支持圆角边框（border-radius）也是CSS3的一大亮点 border-radius: none |圆角半径。最大的圆角