第二部分第15章元素的定位与布局课件.ppt

语法说明 ? auto表示不裁切。 ? rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左上角为参照点计算的四个偏移数值 。而且任意一个坐标值都可由auto来代替，表示该边不裁切。 实例代码 接上页 网页效果 效果说明 层裁切的矩形区域坐标值说明，上坐标10像素是指矩形的上边距网页上边的距离；右坐标6厘米是指矩形的右边距网页左边的距离为6厘米；下坐标80像素是指矩形的下边距网页上边的距离；左坐标12像素是指矩形的左边距网页左边的距离为12像素。 设置层大小——width、height 基本语法 width:auto|长度 height:auto|长度 语法说明 ? width表示的是宽度，而height表示的是高度。 ? auto表示自动设置长度。 ? 长度包括长度值和单位。 ? 长度也可使用相对值中的百分比。 实例代码 接上页 网页效果 注意 对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。 设置层溢出——overflow 基本语法 overflow: visible/hidden/scroll/auto 语法说明 ? visible：扩大层的容纳范围，将所有内容都显示出来。 ? hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。 ? scroll：表示一直显示滚动条。 ? auto：当层内容超出了层的容纳范围时，则显示滚动条。 实例代码 blue 网页效果 语法说明 ? visible表示该层是可见的。 ? hidden表示该层被隐藏，是不可见的。 ? inherit表示子层或子元素会继承父层或父元素的可见性，父级元素可见则子级元素也可见。 设置层可见——visibility 基本语法 visibility:visible|hidden|inherit 实例代码 接上页 网页效果 效果说明 图20-14的效果是在图20-13的代码基础上将d1样式中的可见性visibility属性由hidden修改为visible。所以图像20-3-5-1.jpg在图20-13中被隐藏，而在图20-14中是可见的。 语法说明 ? auto表示根据对象元素的内容自动选择鼠标指针形状。 ? URL（图像地址）表示选取自定义的图像作为鼠标指针的形状。 ? 关键字共有16种，是系统预先定义好的鼠标指针形状，具体说明和形状见表20-2。 15.6 鼠标指针——cursor 基本语法 cursor:auto|关键字|URL（图像地址） 表20-2 鼠标指针关键字说明 hand 实例代码 接上页 网页效果 效果说明 在实例20-4-1代码中分别为段落和图像定义了两个不同的鼠标指针形状，当鼠标指向图像时，鼠标指针变为手形，效果如图20-15。当鼠标指向段落文字时，鼠标指针变为文本选择的形状，效果如图20-16。 网页效果 小实例——综合设置层样式(上机题） 实例代码 小实例——综合设置层样式（上机题） 接上页 效果说明 虽然图20-17的效果看上去并不复杂，但是在实例20-5-1代码中定义的两个类样式几乎涉及了本章所学的所有属性。第一个类样式的定义中应用到了定位属性、位置属性、层空间、层大小、层溢出和鼠标属性。第二个类样式的定义中应用到了定位属性、位置属性、字号和颜色属性、以及层空间、层宽度和列表图像样式属性。 HTML/CSS/JavaScript 第15章 第15章 元素的定位与布局 语法说明 ? static表示为静态定位，是默认设置。 ? absolute表示绝对定位，与15.2的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。 ? relative表示相对定位，对象不可层叠，但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置。 15.1 定位方式——position 基本语法 position:static|absolute|relative 实例代码 html head title应用定位方式/title style type=text/css !-- h2{font-family:黑体;font-size:16pt} .d1{background-color:yellow;position:absolute;top:60px;left:40px} .d2{background-color:aqua;position:absolute;top:160px;left:25px} -- /style /hea