本书编委会 编著实例版第第20章章 CSS样样式的高式的高级应级应用用20.1 列表列表20.2 定位定位20.3 CSS层层20.4 鼠鼠标标指指针针cursor20.5 小小实实例例综合合设置置层样式式20.6 习题习题HTML/CSS/JavaScript 标准教程实例版（第2版）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1 列表列表20.1.1 设计列表列表样式式list-style-type20.1.2 添加列表添加列表图像像list-style-image20.1.3 调整列表位置整列表位置list-style-positionHTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.1 设计列表列表样式式list-style-type基本基本语法法list-style-type:HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.1 设计列表列表样式式list-style-type语法法说明明HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.1 设计列表列表样式式list-style-type实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.1 设计列表列表样式式list-style-type接上接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.1 设计列表列表样式式list-style-type网网页效果效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.2 添加列表添加列表图图像像list-style-image基本基本语法法list-style-image:none|URLHTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.2 添加列表添加列表图图像像list-style-image语法法说明明 none表示不使用图像符号。 URL指定图像的名称或者路径。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.2 添加列表添加列表图图像像list-style-image实例代例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.2 添加列表添加列表图图像像list-style-image接上接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.2 添加列表添加列表图图像像list-style-image网网页效果效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.3 调整列表位置list-style-position基本基本语法法list-style-position:outside|insideHTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.3 调整列表位置list-style-position语法法说明明 outside表示列表符号不向内缩进，是列表的默认属性值。 inside表示列表符号向内缩进。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.3 调整列表位置list-style-position实例代例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.3 调整列表位置list-style-position接上接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.3 调整列表位置list-style-position网网页效果效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.1.3 调整列表位置list-style-position效果效果说明明从图20-3的网页效果可以看出，第一段文字的列表符号和文字是对齐排列的，也就是说列表符号是向内缩进的。而第二段文字的列表符号是在文字外排列的，也就是说列表符号是没有向内缩进的。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2 定位20.2.1 定位方式定位方式position20.2.2 设置位置置位置top、bottom、right、left20.2.3 浮浮动float20.2.4 清除清除clearHTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.1 定位方式定位方式position基本基本语法法position:static|absolute|relativeHTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.1 定位方式定位方式position语法法说明明 static表示为静态定位，是默认设置。 absolute表示绝对定位，与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。 relative表示相对定位，对象不可层叠，但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.1 定位方式定位方式position实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.1 定位方式定位方式position接上接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.1 定位方式定位方式position网网页效果效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.1 定位方式定位方式position效果效果说明明在图20-4的源代码基础上，只要把类样式d1和d2中定位方式语句由position:absolute改为position:relative，就变成了图20-5。但从两图的效果来看，差距是很大的，这主要是因为两个定位方式所参照的标准不一样，绝对定位是以网页的左上角为参照点，而相对定位是以其相近的元素为参照点。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.2 设设置位置置位置top、bottom、right、left 基本基本语法法top:auto|长度度值|百分比百分比bottom: auto|长度度值|百分比百分比left: auto|长度度值|百分比百分比right: auto|长度度值|百分比百分比HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.2 设设置位置置位置top、bottom、right、left 实例代例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.2 设设置位置置位置top、bottom、right、left 接上接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.2 设设置位置置位置top、bottom、right、left 网网页效果效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.2 设设置位置置位置top、bottom、right、left 效果效果说明明因为类样式d1和d2所定义的位置距网页上端的距离都为70像素，而距网页左边的距离一个为20像素，一个为200像素，所以在两个层引用这两个样式后，层内容分别放到了图像的两边。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.3 浮浮动动float基本基本语法法float:left|right|none HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.3 浮浮动动float语法法说明明 left表示浮动元素在左边，是居左对齐的。 right表示浮动元素在右边，是居右对齐的。 none表示不浮动，是默认值。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.3 浮浮动动float实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.3 浮浮动动float接上接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.3 浮浮动动float网网页效果效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.3 浮浮动动float效果效果说明明实例20-2-3代码中imgfloat:left定义了图像的浮动属性为浮动在元素的左边，所以图像20-2-3.jpg浮动到了文字内容的左边，即居左对齐。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.4 清除清除clear基本基本语法法clear:left|right|both|none HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.4 清除清除clear语法法说明明 left表示不允许在某元素的左边有浮动元素。 right表示不允许在某元素的右边有浮动元素。 both表示在某元素左右两边都不允许有浮动元素。 none表示在某元素左右两边都允许有浮动元素。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.4 清除清除clear实例代例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.4 清除清除clear接上接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.4 清除清除clear网网页效果效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.2.4 清除清除clear效果效果说明明在图20-8的效果图中，图像20-2-4本身应用了浮动属性是浮动在其他内容的右边，但是因为这段文字应用了d1所定义的样式，不允许在该内容右边有浮动元素，所以图像20-2-4浮动到了应用d1所定义样式的内容上面，且还是居右对齐。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3 CSS层层20.3.1 设置置层空空间z-index20.3.2 设置置层裁切裁切clip20.3.3 设置置层大小大小度来度来width、height20.3.4 设置置层溢出溢出overflow20.3.5 设置置层可可见visibilityHTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.1 设置置层空空间z-index基本基本语法法z-index:auto|数字数字HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.1 设置置层空空间z-index语法说明 auto表示子层会按照父层的属性显示。 数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.1 设置置层空空间z-index实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.1 设置置层空空间z-index接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.1 设置置层空空间z-index网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.1 设置置层空空间z-index效果说明在“图20-9设置层空间”中，第三层的内容覆盖在第二层和第一层内容上面，第二层的内容又覆盖在第一层内容上面，所以从视觉角度会有立体感。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.2 设设置置层层裁切裁切clip基本语法clip:rect| |autoHTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.2 设设置置层层裁切裁切clip语法说明 auto表示不裁切。 rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左上角为参照点计算的。而且任意一个坐标值都可由auto来代替，表示该边不裁切。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.2 设设置置层层裁切裁切clip实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.2 设设置置层层裁切裁切clip接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.2 设设置置层层裁切裁切clip网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.2 设设置置层层裁切裁切clip效果说明层裁切的矩形区域坐标值说明，上坐标10像素是指矩形的上边距网页上边的距离；右坐标6厘米是指矩形的右边距网页左边的距离为6厘米；下坐标80像素是指矩形的下边距网页的上边的距离；左坐标12像素是指矩形的左边距网页左边的距离为12像素。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.3 设设置置层层大小大小度来度来width、height基本语法width:auto|长度度 height:auto|长度度HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.3 设设置置层层大小大小度来度来width、height语法说明 width表示的是宽度，而height表示的是高度。 auto表示自动设置长度。 长度包括长度值和单位。 长度也可使用相对值中的百分比。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.3 设设置置层层大小大小度来度来width、height实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.3 设设置置层层大小大小度来度来width、height接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.3 设设置置层层大小大小度来度来width、height网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.3 设设置置层层大小大小度来度来width、height注意对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.4 设设置置层层溢出溢出overflow基本语法overflow: visible/hidden/scroll/autoHTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.4 设设置置层层溢出溢出overflow语法说明 visible：扩大层的容纳范围，将所有内容都显示出来。 hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。 scroll：表示一直显示滚动条。 auto：当层内容超出了层的容纳范围时，则显示滚动条。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.4 设设置置层层溢出溢出overflow实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.4 设设置置层层溢出溢出overflow接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.4 设设置置层层溢出溢出overflow网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.5 设设置置层层可可见见visibility基本语法visibility:visible|hidden|inheritHTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.5 设设置置层层可可见见visibility语法说明 visible表示该层是可见的。 hidden表示该层被隐藏，是不可见的。 inherit表示子层或子元素会继承父层或父元素的可见性，父级元素可见则子级元素也可见。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.5 设设置置层层可可见见visibility实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.5 设设置置层层可可见见visibility接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.5 设设置置层层可可见见visibility接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.5 设设置置层层可可见见visibility网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.3.5 设设置置层层可可见见visibility效果说明图20-14的效果是在图20-13的代码基础上将d1样式中的可见性visibility属性由hidden修改为visible。所以图像20-3-5-1.jpg在图20-13中被隐藏，而在图20-14中是可见的。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.4 鼠鼠标标指指针针cursor基本语法cursor:auto|关关键字字|URL（图像地址）像地址）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.4 鼠鼠标标指指针针cursor语法说明 auto表示根据对象元素的内容自动选择鼠标指针形状。 URL（图像地址）表示选取自定义的图像作为鼠标指针的形状。 关键字共有16种，是系统预先定义好的鼠标指针形状，具体说明和形状见表20-2。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.4 鼠鼠标标指指针针cursor实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.4 鼠鼠标标指指针针cursor接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.4 鼠鼠标标指指针针cursor网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.4 鼠鼠标标指指针针cursor效果说明在实例20-4-1代码中分别为段落和图像定义了两个不同的鼠标指针形状，当鼠标指向图像时，鼠标指针变为手形，效果如图20-15。当鼠标指向段落文字时，鼠标指针变为文本选择的形状，效果如图20-16。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.5 小小实实例例综合合设置置层样式式实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.5 小小实实例例综合合设置置层样式式接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.5 小小实实例例综合合设置置层样式式网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2020.5 小小实实例例综合合设置置层样式式效果说明虽然图20-17的效果看上去并不复杂，但是在实例20-5-1代码中定义的两个类样式几乎涉及了本章所学的所有属性。第一个类样式的定义中应用到了定位属性、位置属性、层空间、层大小、层溢出和鼠标属性。第二个类样式的定义中应用到了定位属性、位置属性、字号和颜色属性、以及层空间、层宽度和列表图像样式属性。