html+css+javascript_标准实例教程(第二版)20.ppt

20.3.3 设置层大小—度来—width、height 注意 对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。 20.3.4 设置层溢出——overflow 基本语法 overflow: visible/hidden/scroll/auto 20.3.4 设置层溢出——overflow 语法说明 ? visible：扩大层的容纳范围，将所有内容都显示出来。 ? hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。 ? scroll：表示一直显示滚动条。 ? auto：当层内容超出了层的容纳范围时，则显示滚动条。 20.3.4 设置层溢出——overflow 实例代码 20.3.4 设置层溢出——overflow 接上页 20.3.4 设置层溢出——overflow 网页效果 20.3.5 设置层可见——visibility 基本语法 visibility:visible|hidden|inherit 20.3.5 设置层可见——visibility 语法说明 ? visible表示该层是可见的。 ? hidden表示该层被隐藏，是不可见的。 ? inherit表示子层或子元素会继承父层或父元素的可见性，父级元素可见则子级元素也可见。 20.3.5 设置层可见——visibility 实例代码 20.3.5 设置层可见——visibility 接上页 20.3.5 设置层可见——visibility 接上页 20.3.5 设置层可见——visibility 网页效果 20.3.5 设置层可见——visibility 效果说明 图20-14的效果是在图20-13的代码基础上将d1样式中的可见性visibility属性由hidden修改为visible。所以图像20-3-5-1.jpg在图20-13中被隐藏，而在图20-14中是可见的。 20.4 鼠标指针——cursor 基本语法 cursor:auto|关键字|URL（图像地址） 20.4 鼠标指针——cursor 语法说明 ? auto表示根据对象元素的内容自动选择鼠标指针形状。 ? URL（图像地址）表示选取自定义的图像作为鼠标指针的形状。 ? 关键字共有16种，是系统预先定义好的鼠标指针形状，具体说明和形状见表20-2。 20.4 鼠标指针——cursor 表20-2 鼠标指针关键字说明 20.4 鼠标指针——cursor 实例代码 20.4 鼠标指针——cursor 接上页 20.4 鼠标指针——cursor 网页效果 20.4 鼠标指针——cursor 效果说明 在实例20-4-1代码中分别为段落和图像定义了两个不同的鼠标指针形状，当鼠标指向图像时，鼠标指针变为手形，效果如图20-15。当鼠标指向段落文字时，鼠标指针变为文本选择的形状，效果如图20-16。 20.5 小实例——综合设置层样式 实例代码 20.5 小实例——综合设置层样式 接上页 20.5 小实例——综合设置层样式 网页效果 20.5 小实例——综合设置层样式 效果说明 虽然图20-17的效果看上去并不复杂，但是在实例20-5-1代码中定义的两个类样式几乎涉及了本章所学的所有属性。第一个类样式的定义中应用到了定位属性、位置属性、层空间、层大小、层溢出和鼠标属性。第二个类样式的定义中应用到了定位属性、位置属性、字号和颜色属性、以及层空间、层宽度和列表图像样式属性。 20.2.2 设置位置——top、bottom、right、left 网页效果 20.2.2 设置位置——top、bottom、right、left 效果说明 因为类样式d1和d2所定义的位置距网页上端的距离都为70像素，而距网页左边的距离一个为20像素，一个为200像素，所以在两个层引用这两个样式后，层内容分别放到了图像的两边。 20.2.3 浮动——float 基本语法 float:left|right|none 20.2.3 浮动——float 语法说明 ? left表示浮动元素在左边，是居左对齐的。 ? right表示浮动元素在右边，是居右对齐的。 ? none表示不浮动，是默认值。 20.2.3 浮动——float 实例代码 20.2.3 浮动——float 接上页 20.2.3 浮动——float 网页效果 20.2.3 浮动——float 效果说明 实例20-2-3代码中img{float:left}定义了图像的浮动属性为浮动在元素的左边，所以图像20-2-3.jpg浮动到了文字内容的左边，即居左对齐。 20.2