《基于Web标准的网页设计.ppt》由会员分享，可在线阅读，更多相关《基于Web标准的网页设计.ppt（112页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、WebWeb标准网页设计与标准网页设计与PHPPHP唐四薪 编著清华大学出版社4.4 CSS4.4 CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型v盒子模型是盒子模型是CSS的基石之一的基石之一，它指定元素如它指定元素如何显示以及何显示以及（在某种程度上）如何相互交在某种程度上）如何相互交互互v页面上的每个元素都被浏览器看成是一个页面上的每个元素都被浏览器看成是一个矩形的盒子矩形的盒子，这个盒子由元素的，这个盒子由元素的内容内容、填填充充、边框边框和和边界边界组成。组成。v网页就是由许多个盒子通过不同的排列方网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆式（上下
2、排列，并列排列，嵌套排列）堆积而成。积而成。CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型v每个每个HTML元素都可以看作是一个装了东元素都可以看作是一个装了东西的盒子西的盒子v盒子里面的内容到盒子的边框之间的距离盒子里面的内容到盒子的边框之间的距离即即填充填充(padding),盒子本身有盒子本身有边框边框(border),而盒子边框外和其它盒子之间，而盒子边框外和其它盒子之间，还有还有边界边界(magin),如图所示如图所示v默认情况下盒子的边框是无，背景色是透默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子明，所以我们在默认情况下看不到盒子contentpad
3、ding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的计算元素盒子大小的计算一个元素实际宽度一个元素实际宽度=左边界左边框左填充内容左边界左边框左填充内容宽度右填充右边框右边界宽度右填充右边框右边界IEquirk模式下盒子的宽度模式下盒子的宽度v当将文档声明当将文档声明DOCTYPE删除后，删除后，IE6对网页的解对网页的解释会进入释会进
4、入quirk（怪异）模式，此时盒子的宽度等（怪异）模式，此时盒子的宽度等于于左边框左填充宽度右填充右边框左边框左填充宽度右填充右边框v因此当使用了盒子属性后切忌删除因此当使用了盒子属性后切忌删除DOCTYPECSS盒子模型计算题盒子模型计算题v如果盒子里面嵌套有盒子，且两个盒子都如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等有边框，那么两个盒子边框之间的距离等于外面盒子的于外面盒子的填充填充(padding)值值里面盒子里面盒子的边界（的边界（margin）值）值嵌套盒子例题嵌套盒子例题#box1background-color:#ddd;margin:15px;pa
5、dding:5px;#box2color:black;background-color:#aaa;margin:20px;padding:10px0px10px;width:100px;bodyborder:1pxdotted#FF0000这是里面的这是里面的盒子盒子边框边框border属性属性v盒子模型的盒子模型的margin和和padding属性比较简单，只能设属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。置宽度值，最多分别对上、右、下、左设置宽度值。而边框而边框border则可以设置宽度、颜色和样式。则可以设置宽度、颜色和样式。v分别是分别是border-width（
6、宽度）、（宽度）、border-color（颜色）（颜色）和和border-style（样式）其中（样式）其中border-style属性可以将属性可以将边框设置为实线（边框设置为实线（solid）、虚线（）、虚线（dashed）、点划线）、点划线（dotted）、双线（）、双线（double）等效果）等效果各种边框的效果各种边框的效果vborder:4pxsolidred;/*同时设置同时设置4个边框个边框*/*-*/vborder-bottom:6pxdoubleblack;/*-*/vborder:3pxdotted#00f;vborder-right:none;/*-*/vborder
7、:5pxdashed#666;vborder-width:05px;边框的交汇效果边框的交汇效果v边框边框border有个有趣的特点，即两条交汇的边框有个有趣的特点，即两条交汇的边框之间是一个斜角，我们可以通过为边框设置不同之间是一个斜角，我们可以通过为边框设置不同的颜色，再利用这个斜角，制作出像三角形一样的颜色，再利用这个斜角，制作出像三角形一样的效果的效果内 容填充填充padding属性属性v填充填充padding属性，也称为盒子的内边距。就是属性，也称为盒子的内边距。就是盒子边框到内容之间的距离，和表格的填充属性盒子边框到内容之间的距离，和表格的填充属性（cellpadding）比较相似
8、。如果填充属性为）比较相似。如果填充属性为0，则盒子边框会紧挨着内容，这样通常不美观。则盒子边框会紧挨着内容，这样通常不美观。v当对盒子设置了背景颜色或背景图像后，那么背当对盒子设置了背景颜色或背景图像后，那么背景会覆盖景会覆盖padding和内容组成的范围，并且默认和内容组成的范围，并且默认情况下背景图像是以情况下背景图像是以padding的左上角为基准点的左上角为基准点在盒子中平铺的在盒子中平铺的盒子模型的特性盒子模型的特性v边界值边界值margin可为负，填充可为负，填充padding不可为不可为负负v边框边框border默认值为默认值为0，即不显示，即不显示v行内元素，如行内元素，如a
9、，定义上下边界不影响行高，定义上下边界不影响行高对盒子模型的思考对盒子模型的思考v边框是实的，我们可以看到实实在在的边边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看框，而填充和边界都是虚的，我们只能看到他们对元素的影响到他们对元素的影响v盒子模型中只能设置两类颜色，即盒子模型中只能设置两类颜色，即边框颜边框颜色色和和背景颜色背景颜色v盒子模型可设置三类距离，即边界距盒子模型可设置三类距离，即边界距margin，填充距，填充距padding和边框值和边框值border属性值的简写形式属性值的简写形式v问题：问题：padding:6px10px4px;左填充是多少？左填充
10、是多少？答案：如果给出答案：如果给出2个属性值，前者表示个属性值，前者表示上下边框上下边框的的属性，后者表示属性，后者表示左右边框左右边框的属性；的属性；如果给出如果给出3个属性值，前者表示个属性值，前者表示上边框上边框的属性，中的属性，中间的数值表示间的数值表示左右边框左右边框的属性，后者表示的属性，后者表示下边框下边框的属性；的属性；如果给出如果给出4个属性值，依次表示个属性值，依次表示上上、右右、下下、左左边边框的属性，即顺时针排序。框的属性，即顺时针排序。各种元素盒子属性的默认值各种元素盒子属性的默认值v大部分大部分html元素的盒子属性元素的盒子属性:margin,padding默认
11、值都为默认值都为0；vbody，p，ul，li，form等少数等少数html元素的元素的margin,padding浏览器默认值不为浏览器默认值不为0，有时，有时有必要先设置它们的这些属性为有必要先设置它们的这些属性为0。vinput元素的边框属性默认不为元素的边框属性默认不为0，可以设置，可以设置它为它为0达到美化表单中输入框和按钮的目的。达到美化表单中输入框和按钮的目的。4.4.2盒子模型的应用盒子模型的应用v1.美化表单美化表单v网页中的表单控件在默认情况下背景都是网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，灰色的，文本框边框是粗线条带立体感的，不够美观。下
12、列代码通过不够美观。下列代码通过CSS改变表单的边改变表单的边框样式、颜色和背景颜色让文本框，按钮框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。等变得漂亮些。用盒子美化表格用盒子美化表格v让表格的外边框为让表格的外边框为2象素象素v首先用间距制作首先用间距制作1像素边框的表格，然后用像素边框的表格，然后用css为为table元素加一个元素加一个1象素宽的象素宽的borderv制作制作1象素虚线边框象素虚线边框v首先将表格的边框和间距设为首先将表格的边框和间距设为0，然后设置，然后设置table的的CSS上边框和左边框为上边框和左边框为1象素虚线，象素虚线，再设置再设置td的的css下边框和
13、右边框为下边框和右边框为1象素虚线象素虚线4.4.3 4.4.3 盒子在标准流下的定位盒子在标准流下的定位 盒子的三种定位形式盒子的三种定位形式v在标准流下的定位在标准流下的定位v在浮动属性下的定位在浮动属性下的定位v在定位属性下的定位在定位属性下的定位v除非设置浮动属性或定位属性，否则所有盒子都是除非设置浮动属性或定位属性，否则所有盒子都是在在标准流标准流中定位。顾名思义，标准流中元素盒子的中定位。顾名思义，标准流中元素盒子的位置由元素在位置由元素在HTML中的位置决定。中的位置决定。标准流标准流v标准流下的定位：标准流下的定位：HTML元素在标准状况元素在标准状况下的定位方式，特点如下下的
14、定位方式，特点如下:行内元素在同一行内横向排列行内元素在同一行内横向排列块级元素占满整个一行，在页面中竖向排列块级元素占满整个一行，在页面中竖向排列v元素不会移动到其它地方去，对于嵌套的元素不会移动到其它地方去，对于嵌套的元素，盒子也是嵌套的关系元素，盒子也是嵌套的关系(嵌套说明父元嵌套说明父元素包含了子元素素包含了子元素)标准流下的盒子排列分析标准流下的盒子排列分析*border:2pxdashed#FF0066;padding:10px;margin:2px;网页的网页的banner（块级元素）（块级元素）行内元素行内元素1行内行内2行内行内3这是无名块这是无名块这是盒子中的盒子这是盒子中
15、的盒子行内元素的盒子行内元素的盒子v行内元素的盒子永远只能在浏览器中得到行内元素的盒子永远只能在浏览器中得到一行高度一行高度的空间（行高由的空间（行高由line-height属性决属性决定，如果没设置该属性，则是内容的默认定，如果没设置该属性，则是内容的默认高度），如果给它设置上下高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其超过行高，那么它的盒子上下部分将和其他元素的盒子发生重叠。他元素的盒子发生重叠。v因此，不推荐对行内元素直接设置盒子属因此，不推荐对行内元素直接设置盒子属性，一般先设置行内
16、元素以性，一般先设置行内元素以块级元素显示块级元素显示，再设置它的盒子属性。再设置它的盒子属性。改变行内元素的高度改变行内元素的高度v如图所示，当增加行内元素的边界和填充时，行如图所示，当增加行内元素的边界和填充时，行内元素内元素a占据浏览器的高度并没有增加，下面这占据浏览器的高度并没有增加，下面这个个div块仍然在原来的位置，导致行内元素盒子块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响的上下部分重叠，而左右部分不会受影响display属性属性v为了解决这个问题，可将行内元素转换成为了解决这个问题，可将行内元素转换成块级元素显示块级元素显示v通过通过display属
17、性可控制元素是以行内元素属性可控制元素是以行内元素显示还是以块级元素显示，或不显示显示还是以块级元素显示，或不显示display:block|inline|none|list-itemblockblock元素元素vblockblock元素的特点是：元素的特点是：总是在新行上开始；总是在新行上开始；高度，行高以及顶和底边距都可控制；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的宽度缺省是它的容器的100%100%，除非用，除非用widthwidth设定一个宽度设定一个宽度v,和和 都是块级元素的例子。都是块级元素的例子。inline元素元素inline元素的特点是：元素的特点是：和其他元
18、素都在一行上和其他元素都在一行上高，行高及顶和底边距不可改变；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变宽度就是它的文字或图片的宽度，不可改变,和和是是inline元素的例子元素的例子隐藏元素隐藏元素display:none;v当某个元素被设置成了隐藏元素之后，浏当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。会被显示，也不会占据文档中的位置。v比较比较visibility:hidden;v应用：制作下拉菜单、应用：制作下拉菜单、tab面板等有时就需面板等有时就需要用要用di
19、splay:none把菜单或面板隐藏起来把菜单或面板隐藏起来需要使用需要使用display属性切换的情况属性切换的情况1.让一个让一个inline元素从新行开始；元素从新行开始；2.让块元素和其他元素保持在一行上；让块元素和其他元素保持在一行上；3.控制控制inline元素的高度（对导航条特别有元素的高度（对导航条特别有用）；用）；4.无须设定宽度即可为一个块元素设定与文无须设定宽度即可为一个块元素设定与文字同宽的背景色字同宽的背景色标准流下定位的应用制作竖直导航菜单标准流下定位的应用制作竖直导航菜单#navafont-size:14px;color:#333333;text-decorati
20、on:none;background-color:#CCCCCC;display:block;width:140px;padding:6px10px4px;border:1pxsolid#000000;margin:2px;#nava:hovercolor:#FFFFFF;background-color:#666666;盒子的盒子的marginmargin叠加问题叠加问题盒子的盒子的margin在标准流中的计算在标准流中的计算v实验实验1行内元素之间的水平行内元素之间的水平margin span.leftmargin-right:30px;background-color:#a9d6ff;s
21、pan.rightmargin-left:40px;background-color:#eeb0b0;行内元素之间的水平行内元素之间的水平marginv行内元素之间的水平行内元素之间的水平margin不会叠加不会叠加span2span1margin-rightmargin-left实验实验2块级元素之间的竖直块级元素之间的竖直margin块元素块元素1块元素块元素2块元素块元素1块元素块元素2块元素块元素1块元素块元素2margin-bottom:50pxmargin-top:30pxmargin-bottom:50px块级元素之间的上下块级元素之间的上下margin空白边叠加空白边叠加v当一
22、个元素包含在另一个元素中时，若父元素的当一个元素包含在另一个元素中时，若父元素的边框和填充为边框和填充为0，此时父元素和子元素的，此时父元素和子元素的margin挨挨在一起，那么父元素的上下在一起，那么父元素的上下margin也会和子元素也会和子元素的上下的上下margin发生叠加。若父元素的边框或填充发生叠加。若父元素的边框或填充不为不为0，那么父元素和子元素的，那么父元素和子元素的margin会被分隔开，会被分隔开，因此不存在叠加的问题。因此不存在叠加的问题。v经验：如果有盒子嵌套，要调整外面盒子和里面经验：如果有盒子嵌套，要调整外面盒子和里面盒子之间的距离，一般用外面盒子的盒子之间的距离
23、，一般用外面盒子的padding来调来调整，不要用里面盒子的整，不要用里面盒子的margin，这样可以避免空，这样可以避免空白边叠加的现象出现白边叠加的现象出现嵌套盒子之间的嵌套盒子之间的marginv嵌套盒子在标准流中的定位原则嵌套盒子在标准流中的定位原则实验实验3嵌套盒子之间的嵌套盒子之间的margin嵌套盒子在嵌套盒子在IE和和Firefox中的不同显示中的不同显示v当一个块元素包含在另一个块元素中时，若对父当一个块元素包含在另一个块元素中时，若对父块设置高度，但父块的高度不足以容纳子块时，块设置高度，但父块的高度不足以容纳子块时，IE将使父块的高度自动伸展，达到能容纳子块的将使父块的高
24、度自动伸展，达到能容纳子块的最小高度为止；而最小高度为止；而Firefox对父块和子块均以定义对父块和子块均以定义的高度为准，父块高度不会伸展，任其子块露在的高度为准，父块高度不会伸展，任其子块露在外面，子块高度也不会压缩。外面，子块高度也不会压缩。vFirefox对元素的高度解释严格按照我们设定的高对元素的高度解释严格按照我们设定的高度执行，而度执行，而IE对元素高度的设定有点自作主张的对元素高度的设定有点自作主张的味道，它总是使标准流中子元素的盒子包含在父味道，它总是使标准流中子元素的盒子包含在父元素盒子当中。元素盒子当中。4.5 4.5 背景的控制背景的控制 CSS的背景属性的背景属性v
25、背景（背景（background）是网页中常用的一种表现方）是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，都能法，无论是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果为网页带来丰富的视觉效果vCSS对元素的背景设置，则提供了更多的途径，对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在如背景图片既可以平铺也可以不平铺，还可以在X轴平铺或在轴平铺或在Y轴平铺轴平铺vCSS的背景属性是的背景属性是backgroud或以或以backgroud开头开头CSS的背景属性的背景属性属性属性描述描述可用可用值值background设设置背景的所有控制置
26、背景的所有控制选项选项，是其他所，是其他所有背景属性的有背景属性的缩缩写写其他背景属性的其他背景属性的值值的集合的集合background-color设设置背景置背景颜颜色色rgb颜颜色色命名命名颜颜色色16进进制制颜颜色色background-image设设置背景置背景图图片片urlbackground-repeat设设置背景置背景图图片的平片的平铺铺方式方式repeat（完全平（完全平铺铺）repeat-x（横向平（横向平铺铺）repeat-y（纵纵向平向平铺铺）no-repeat（不平（不平铺铺）background-attachment设设置背景置背景图图片固定片固定还还是随内是随内容
27、容滚动滚动scroll（默（默认值认值）fixedbackground-position设设置背景置背景图图片片显显示的起始位示的起始位置置（topleftcentercenterbottomright）（x%y%x-posy-pos）各个背景属性的默认值各个背景属性的默认值vbackground-color:transparent透明模式透明模式vbackground-image:nonevbackground-repeat:repeat平铺平铺vbackground-attachment:scrollvbackground-position:0%0%v注注意意背背景景定定位位中中百百分分比
28、比数数值值的的意意义义和和像像素素的的意意义义不同不同v使使用用百百分分数数定定位位时时，是是将将背背景景图图片片的的百百分分比比指指定定的的位位置置和和元元素素的的百百分分比比位位置置对对齐齐。也也就就是是说说，百百分数定位是改变了背景图和元素的对齐基点。分数定位是改变了背景图和元素的对齐基点。background属性的缩写属性的缩写vbackground属性是所有背景属性的缩写形式，就属性是所有背景属性的缩写形式，就像像font属性一样，其缩写顺序为：属性一样，其缩写顺序为：vbackground:background-color|background-image|background-r
29、epeat|background-attachment|background-positionv如如bodybackground:#EFF4FFurl(images/body_bg.jpg)repeat-xfixed;DW中的背景设置面板中的背景设置面板background-color:#0099ccbackground-image:url(images/bottom.gif)background-repeat:no-repeatbackground-position:right bottombackground-attachment:fixedCSSCSS背景运用技巧背景运用技巧网页中插入图
30、像的两种方法网页中插入图像的两种方法v用用HTML标记：标记：v用用CSS背景属性插入图像背景属性插入图像background:url(hua.jpg)no-repeat;所有装饰性的图像建议都用所有装饰性的图像建议都用CSS背景方式插入背景方式插入背景属性背景属性v设置背景颜色：设置背景颜色：background-colorvbackground-image:设置背景图片或渐变设置背景图片或渐变vbackground-repeat:设置背景图片的平铺方式设置背景图片的平铺方式vbackground-attachment:设置背景图片是否随内容滚设置背景图片是否随内容滚动动vbackgroun
31、d-position：设置背景图片显示的起始位置：设置背景图片显示的起始位置v缩写：缩写：vbackground:background-color|background-image|background-repeat|background-attachment|background-position背景图片背景图片背景颜色背景颜色背景定位背景定位背景不平铺背景不平铺background-repeat属性属性vbackground-repeat:repeat（默认）、（默认）、repeat-x、repeat-y、no-repeatbackground-position属性属性vbackgroun
32、d:url(hua.gif)no-repeat50%33%;background-attachment属性属性vbackground-attachment：scroll（默认）、（默认）、fixedvfixed：背景在网页中的位置是固定的，不随容器的移：背景在网页中的位置是固定的，不随容器的移动而移动。（案例：动而移动。（案例：http:/ 图片阴影，自适用宽度圆角导航条 1.图像阴影图像阴影v阴影是一种很流行、很有吸引力的图阴影是一种很流行、很有吸引力的图像处理技巧，它给平淡的设计增加了像处理技巧，它给平淡的设计增加了深度，形成立体感。使用图像处理软深度，形成立体感。使用图像处理软件很容易给
33、图像增添阴影。但是，可件很容易给图像增添阴影。但是，可以使用以使用CSS产生简单阴影效果，而不需产生简单阴影效果，而不需要修改底层的图像。通过滑动门技术要修改底层的图像。通过滑动门技术制作的阴影能自适应图像的大小，即制作的阴影能自适应图像的大小，即不管图像是大是小都能为它添加阴影不管图像是大是小都能为它添加阴影效果。效果。滑动门制作图片阴影原理图滑动门制作图片阴影原理图透透明明图图像像图图像像图图像像图图像像2.自适应宽度圆角导航条自适应宽度圆角导航条v原理：背景图片比盒子长一些原理：背景图片比盒子长一些v背景图片：背景图片：v里面的盒子里面的盒子设置背景图片为从右边开始铺设置背景图片为从右边
34、开始铺v外面的盒子外面的盒子v设置背景图片为从左边开始铺设置背景图片为从左边开始铺v把里面的盒子放在外面盒子上方，则两边的圆角把里面的盒子放在外面盒子上方，则两边的圆角都能显示，同时，改变文字的多少，能使导航条都能显示，同时，改变文字的多少，能使导航条自动伸展，而圆角部分位于自动伸展，而圆角部分位于padding区域，不会影区域，不会影响圆角响圆角滑动门导航条代码滑动门导航条代码afont-size:14px;color:#F1E474;text-decoration:none;background-image:url(xxwlzx/yuanjiao2.gif);height:32px;pad
35、ding-left:24px;display:block;float:left;line-height:32px;b background-image:url(xxwlzx/yuanjiao2.gif);background-position:righttop;display:block;padding-right:24px;a:hovercolor:#FFFFFF;首首页页中心简介中心简介政策法规政策法规常用下载常用下载为您服务为您服务技术支持和服务技术支持和服务 CSSCSS圆角设计圆角设计本节课内容本节课内容vborder-radius圆角盒子属性，实际是圆角盒子属性，实际是box-ra
36、dius饼状图饼状图v过渡属性过渡属性transition图标变文字图标变文字v阴影属性阴影属性box-shadowborder-radius属性属性vborder-radius：用于设置元素盒子四个角的圆角效果：用于设置元素盒子四个角的圆角效果border-radius:5px 10px 20px 40px;/*上左上左 上右上右 下右下右 下左下左*/border-radius:5px 10px 20px;/*上右和下左都是上右和下左都是10px*/border-radius:5px 10px;border-radius:10px;/*四个角的半径都是四个角的半径都是10px*/borde
37、r-radius属性示例属性示例divwidth:100px;height:100px;background:#C96;.box1border-radius:100px;.box2border-radius:100px0;.box3height:50px;border-radius:50%;.box4border-radius:50%;background:url(images/head01.jpg)no-repeat;background-size:cover;.box5height:50px;border-radius:50px50px00;制作饼状图制作饼状图display属性属性vdi
38、splay:block;以块级元素显示以块级元素显示vdisplay:inline;以行内元素显示以行内元素显示vdisplay:inline-block;以行内块元素显示，行内块元以行内块元素显示，行内块元素将在一行内水平排列，但每个元素又具有块级元素素将在一行内水平排列，但每个元素又具有块级元素的特点的特点vdisplay:none;将元素隐藏，且不占据网页空间将元素隐藏，且不占据网页空间过渡属性过渡属性transitionvCSS的动态伪类的动态伪类(如如hover)能为网页添加一些动态效果，能为网页添加一些动态效果，但动态伪类没有中间状态但动态伪类没有中间状态v过渡属性就是让一个属性在
39、两种状态之间平滑改变的过渡属性就是让一个属性在两种状态之间平滑改变的动画。动画。vtransition:color.5sease-in.1s;/*作用属性作用属性持续时间持续时间速度变化速度变化延迟延迟*/vtransition:color.5s.1s;/*作作用属性用属性持续时间持续时间延迟延迟*/vtransition:color.5s;/*作用属性作用属性持续时间持续时间*/transition属性的子属性属性的子属性vtransition属性实际上是属性实际上是4个属性的简写个属性的简写vtransiton:transition-propertytransition-durationt
40、ransition-timing-functiontransition-delay;vtransiton-property：指定在元素的某个属性上有动画：指定在元素的某个属性上有动画效果效果vtransition-duration：指定过渡的持续时间。：指定过渡的持续时间。vtransition-timing-function：能够让动画在过渡持续：能够让动画在过渡持续期间在速度上有变化期间在速度上有变化vtransition-delay：用于延迟一段时间后再开启过渡效：用于延迟一段时间后再开启过渡效果果transition应用举例应用举例v图像渐变图像渐变v列表文本移动列表文本移动v图标变文
41、字图标变文字阴影属性阴影属性box-shadowvbox-shadow:h-shadowv-shadowblurspreadcolorinset;vbox-shadow:10px10px5px#888888;/*设置左下设置左下角阴影，角阴影，*/vbox-shadow:0015px#888888;/*设置外发光，设置外发光，*/vbox-shadow:10px10px5px#888888inset;/*设设置内凹阴影，置内凹阴影，*/翘边阴影和曲线阴影翘边阴影和曲线阴影圆角的设计方法圆角的设计方法v圆角在网页设计中让人又爱又恨，一方面设计师圆角在网页设计中让人又爱又恨，一方面设计师为追求美观
42、的效果经常需要借助于圆角，另一方为追求美观的效果经常需要借助于圆角，另一方面为了在网页中设计圆角又不得不增添很多工作面为了在网页中设计圆角又不得不增添很多工作量。量。v制作固定宽度的圆角（不带边框的、带边框的）制作固定宽度的圆角（不带边框的、带边框的）v制作可变宽度圆角（不带边框的、带边框的）制作可变宽度圆角（不带边框的、带边框的）v不用图片做圆角不用图片做圆角1.制作固定宽度的圆角框制作固定宽度的圆角框v用用CSS制作不带边框的固定宽度圆角框（如图制作不带边框的固定宽度圆角框（如图4-57左左所示）至少需要两个盒子，一个盒子放置顶部的圆角所示）至少需要两个盒子，一个盒子放置顶部的圆角图案，另
43、一个盒子放置底部的圆角图案，并使它位于图案，另一个盒子放置底部的圆角图案，并使它位于盒子底部。把这两个盒子叠放在一起，再对栏目框设盒子底部。把这两个盒子叠放在一起，再对栏目框设置和圆角相同的背景色就可以了置和圆角相同的背景色就可以了v制作带边框的固定宽度圆角框（如图制作带边框的固定宽度圆角框（如图4-57右所示）则右所示）则至少需要三个盒子，最底层的盒子放置圆角框中部的至少需要三个盒子，最底层的盒子放置圆角框中部的边框和背景组成的图案，并使它垂直平铺，上面两层边框和背景组成的图案，并使它垂直平铺，上面两层的盒子分别放置顶部的圆角和底部的圆角，这样在顶的盒子分别放置顶部的圆角和底部的圆角，这样在
44、顶部和底部圆角图片就遮盖了中部的图案，形成了完整部和底部圆角图片就遮盖了中部的图案，形成了完整的圆角框的圆角框2.制作可变宽度圆角制作可变宽度圆角v制作可变宽度不带边框的圆角框就是前面介绍的制作可变宽度不带边框的圆角框就是前面介绍的4图图像法制作圆角框，而要制作带边框的可变宽度圆角则像法制作圆角框，而要制作带边框的可变宽度圆角则要采用要采用5图像二维滑动门方法图像二维滑动门方法3.不用图片做圆角山顶角方法不用图片做圆角山顶角方法v如果不想用图片做圆角，那也是可以实现的，这需要如果不想用图片做圆角，那也是可以实现的，这需要一种称为山顶角一种称为山顶角(mountaintopcorner)的圆角制
45、作方的圆角制作方法，所谓山顶角，就是说不是纯粹意义上的平滑圆角，法，所谓山顶角，就是说不是纯粹意义上的平滑圆角，而是通过几个而是通过几个1像素高的像素高的div（水平细线）叠放起来形（水平细线）叠放起来形成视觉上的圆角，用这种方法做圆角一般采用成视觉上的圆角，用这种方法做圆角一般采用4个个div叠放，所以圆角的弧度不是很大。叠放，所以圆角的弧度不是很大。3.不用图片做圆角山顶角方法不用图片做圆角山顶角方法v如果把最上方一条细线的颜色改为黑色，再设置下面如果把最上方一条细线的颜色改为黑色，再设置下面三条细线的左右边框是三条细线的左右边框是1像素黑色，那么就出现了带像素黑色，那么就出现了带有边框的
46、圆角框效果了有边框的圆角框效果了4.学习圆角制作的意义学习圆角制作的意义v由于人们的审美观念决定了圆角比方角更具有亲和力，由于人们的审美观念决定了圆角比方角更具有亲和力，使我们很多时候必须制作圆角框。另外，圆角框技术使我们很多时候必须制作圆角框。另外，圆角框技术是制作其他不规则图案栏目框的基础。例如图是制作其他不规则图案栏目框的基础。例如图4-61所所示的栏目框，就可以把栏目框上面部分看成是上圆角，示的栏目框，就可以把栏目框上面部分看成是上圆角，下面部分看成是下圆角，再按照制作圆角框的思路制下面部分看成是下圆角，再按照制作圆角框的思路制作了。作了。盒子的浮动盒子的浮动盒子的浮动盒子的浮动v在标
47、准流中，块级元素的盒子都是上下排列，行在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，限制太大。内元素的盒子都是左右排列，限制太大。v所有盒子浮动所有盒子浮动有时希望相邻有时希望相邻块级元素的盒子左右排列块级元素的盒子左右排列v或者希望一个盒子被另一个盒子中的内容所环绕或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出（一个盒子浮动）做出图文混排图文混排的效果的效果左浮动左浮动不浮动不浮动一个盒子浮动和多个盒子浮动一个盒子浮动和多个盒子浮动默认样式默认样式浮动样式浮动样式HTML代码顺序：代码顺序：左列左列右列右列浮动效果展示浮动效果展示结论：通过结论：通过CS
48、S布局，可以在不改变布局，可以在不改变HTML代码的同时，代码的同时，调整盒子的显示位置。调整盒子的显示位置。两个盒子的故事两个盒子的故事误差误差左浮动左浮动原因：原因：左列进行浮动后，脱离了默认文档流，左列进行浮动后，脱离了默认文档流，所以只剩右列的盒子。所以只剩右列的盒子。解决方法：解决方法：同一层盒子的一起加浮动属性。同一层盒子的一起加浮动属性。我也浮我也浮动动总结：一个盒子浮动后的特点总结：一个盒子浮动后的特点（1）浮动后的盒子将以行内块元素显示，但宽度不）浮动后的盒子将以行内块元素显示，但宽度不会自动伸展。会自动伸展。（2）浮动的盒子将脱离标准流，即不再占据浏览器）浮动的盒子将脱离标
49、准流，即不再占据浏览器原来分配给它的位置（原来分配给它的位置（IE有时例外）。有时例外）。（3）未浮动的盒子将占据浮动盒子的位置，同时未）未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。浮动盒子内的内容会环绕浮动后的盒子。2.多个盒子浮动的特点多个盒子浮动的特点v多个盒子都浮动后，就产生了块级元素水平排列的效多个盒子都浮动后，就产生了块级元素水平排列的效果果v多个浮动元素不会相互覆盖，一个浮动元素的外边多个浮动元素不会相互覆盖，一个浮动元素的外边界（界（margin）碰到另一个浮动元素的外边界后便停止）碰到另一个浮动元素的外边界后便停止运动。运动。v若包含的容器太窄
50、，无法容纳水平排列的多个浮动若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动（图元素，那么最后的浮动盒子会向下移动（图4-68）。）。但如果浮动元素的高度不同，那当它们向下移动时可但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住能会被卡住清除浮动的影响清除浮动的影响浮动和清除浮动：浮动和清除浮动：131布局布局bodyheadercontainernavcontentsidepagefooter4.6.2清除浮动的影响清除浮动的影响vclear:left、right：表表示示该该盒盒子子的的左左边边或或右右边边不不允允许许有有浮动的对象。浮动的对象。vcl