高级css解析,CSS样式的高级应用解析.ppt

CSS样式的高级应用解析

20.3.2 设置层裁切——clip 接上页 20.3.2 设置层裁切——clip 网页效果 20.3.2 设置层裁切——clip 效果说明 层裁切的矩形区域坐标值说明，上坐标10像素是指矩形的上边距网页上边的距离；右坐标6厘米是指矩形的右边距网页左边的距离为6厘米；下坐标80像素是指矩形的下边距网页的上边的距离；左坐标12像素是指矩形的左边距网页左边的距离为12像素。 20.3.3 设置层大小—度来—width、height 基本语法 width:auto|长度 height:auto|长度 20.3.3 设置层大小—度来—width、height 语法说明 ? width表示的是宽度，而height表示的是高度。 ? auto表示自动设置长度。 ? 长度包括长度值和单位。 ? 长度也可使用相对值中的百分比。 20.3.3 设置层大小—度来—width、height 实例代码 20.3.3 设置层大小—度来—width、height 接上页 20.2.1 定位方式——position 实例代码 20.2.1 定位方式——position 接上页 20.2.1 定位方式——position 网页效果 20.2.1 定位方式——position 效果说明 在图20-4的源代码基础上，只要把类样式d1和d2中定位方式语句由position:absolute改为position:relative，就变成了图20-5。但从两图的效果来看，差距是很大的，这主要是因为两个定位方式所参照的标准不一样，绝对定位是以网页的左上角为参照点，而相对定位是以其相近的元素为参照点。 20.2.2 设置位置——top、bottom、right、left 基本语法 top:auto|长度值|百分比 bottom: auto|长度值|百分比 left: auto|长度值|百分比 right: auto|长度值|百分比 语法说明： 四个属性分别表示对象与其他对象的顶部、底部、左边和右边的相对位置。 Auto表示默认值 长度值包括数字和长度单位 百分比是一个相对值。 20.2.2 设置位置——top、bottom、right、left 实例代码 20.2.2 设置位置——top、bottom、right、left 接上页 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.4 清除——clear 基本语法 clear:left|right|both|none 20.2.4 清除——clear 语法说明 ? left表示不允许在某元素的左边有浮动元素。 ? right表示不允许在某元素的右边有浮动元素。 ? both表示在某元素左右两边都不允许有浮动元素。 ? none表示在某元素左右两边都允许有浮动元素。 20.2.4 清除——clear 实例代码 20.2.4 清除——clear 接上页 20.2.4 清除——clear 网页效果 20.2.4 清除——clear 效果说明 在图20-8的效果图中，图像20-2-4本身应用了浮动属性是浮动在其他内容的右边，但是因为这段文字应用了d1所定义的样式，不允许在该内容右边有浮动元素，所以图像20-2-4浮动到了应用d1所定义样式的内容上面，且还是居右对齐。 20.3 CSS层 20.3.1 设置层空间——z-index 20.3.2 设置层裁切——clip 20.3.3 设置层大小—度来—width、height 20.3.4 设置层溢出——overflow 20.3.5 设置层可见——visibility 20.3.1 设置