网页设计与制作 课件 项目六、项目七 盒子模型

1

第四章图像及盒子模型4.1图像及图像属性图像标记符<img>或<img/>必要属性：Src:表示要插入图像的文件名，必须包含路径Alt:当图片资源不存在或错误时，显示的提示信息图像标记符1、设置图像高度和宽度的属性Width：设置图像的宽度Height:

设置图像的高度（图像标记符不支持直接设置align标记符属性）2、设置图像的边框Border:

设置图像的边框效果取值：粗细线条样式颜色等粗细：可以是具体数值加像素（px）单位线条样式：solid实线dashed虚线double双线等图像标记符3、设置图像的水平对齐：通过CSS属性定义属性：Text-align取值：rightleftcenter4、设置图像的垂直对齐属性属性：Vertical-align取值：top与文本顶部对齐middle与文本中央对齐

bottom与文本底部对齐图像标记符5、设置图文混排属性：float取值：leftright6、设置图像的透明度属性：opacity取值：具体数值4.2认识盒子模型及属性

CSS盒子模型CSS的盒子模型，他规定了任何一个HTML元素所形成的元素框的，处理方式，即一个元素被定义为一个“盒子”，这个“盒子”包括元素的宽度width、高度height、填充padding、边框border和边距margin。标记符<div></div>作用：用于网页布局特点：块级元素，独占一行，没有样式效果，宽度默认为整个父容器的宽度，高度会随内容的增加自动变高<span></span>作用：用于网页布局特点：行内元素，标签前后添加内容不会自动换行，没有样式效果，默认没有宽度和高度，会随内容的增加而自动变宽或变高。CSS盒子模型属性border：表示边框，页面内容的边框，可以设置宽度、颜色、类型。padding：内边距，表示内容到边框的距离margin:外边距，边框以外的距离内边距和外边距取值：取值为像素，可以同时指定上（top）、右(right)、下(bottom)、左(left)四个方向的边距。如果设置一个边距，表示四个方向内边距相同如果设置两个边距，表示上下一致，左右一致如果设置三个边距，表示上、下不一致，左右一致如果设置四个边距，表示上、右、下、左都不一致CSS浮动属性设置浮动属性：float取值：left左浮动right右浮动none默认值，不浮动清除浮动属性：clear取值：left左侧不允许有浮动元素right右侧不允许有浮动元素both两侧都不允许有浮动元素，是最常用的取值4.3多媒体设置音频标签音频格式分别是ogg，mp3和wav<audio></audio>属性：Src:属性用于设置音频文件的路径controls:属性用于为音频提供播放控件Loop：取值loop,用于设置音频结束时重新开始播放例：<audiosrc=“music/1.mp3”controls=“controls”></audio>视频标签三种视频格式分别是ogg，mp4和webm<Video></Video>属性：Src:属性用于设置视频文件的路径controls:属性用于为视频提供播放控件Loop：取值loop,用于设置音频结束时重新开始播放width/height：设置视频的内容的宽度/高度例：<videosrc=“movie/1.mp4”controls=“controls”Loop=“loop”></video>嵌入多个视频<source></source>作用：为浏览器提供备用视频文件，首先以第一个视频为主，若第一个视频不支持，则选择第二个视频作为备选属性：Src:属性用于设置视频文件的路径例：<video

controls=“co