《htmlcssjavascript标准实例教程（第二版）课件》由会员分享，可在线阅读，更多相关《htmlcssjavascript标准实例教程（第二版）课件（84页珍藏版）》请在金锄头文库上搜索。
1、实例版,第20章 CSS样式的高级应用,20.1 列表 20.2 定位 20.3 CSS层 20.4 鼠标指针cursor 20.5 小实例综合设置层样式 20.6 习题,20.1 列表,20.1.1 设计列表样式list-style-type 20.1.2 添加列表图像list-style-image 20.1.3 调整列表位置list-style-position,20.1.1 设计列表样式list-style-type,基本语法,list-style-type:,20.1.1 设计列表样式list-style-type,语法说明,20.1.1 设计列表样式list-style-type,
2、实例代码,20.1.1 设计列表样式list-style-type,接上页,20.1.1 设计列表样式list-style-type,网页效果,20.1.2 添加列表图像list-style-image,基本语法,list-style-image:none|URL,20.1.2 添加列表图像list-style-image,语法说明, none表示不使用图像符号。 URL指定图像的名称或者路径。,20.1.2 添加列表图像list-style-image,实例代码,20.1.2 添加列表图像list-style-image,接上页,20.1.2 添加列表图像list-style-image,网
3、页效果,20.1.3 调整列表位置list-style-position,基本语法,list-style-position:outside|inside,20.1.3 调整列表位置list-style-position,语法说明, outside表示列表符号不向内缩进，是列表的默认属性值。 inside表示列表符号向内缩进。,20.1.3 调整列表位置list-style-position,实例代码,20.1.3 调整列表位置list-style-position,接上页,20.1.3 调整列表位置list-style-position,网页效果,20.1.3 调整列表位置list-style
4、-position,效果说明,从图20-3的网页效果可以看出，第一段文字的列表符号和文字是对齐排列的，也就是说列表符号是向内缩进的。而第二段文字的列表符号是在文字外排列的，也就是说列表符号是没有向内缩进的。,20.2 定位,20.2.1 定位方式position 20.2.2 设置位置top、bottom、right、left 20.2.3 浮动float 20.2.4 清除clear,20.2.1 定位方式position,基本语法,position:static|absolute|relative,20.2.1 定位方式position,语法说明, static表示为静态定位，是默认设置。
5、 absolute表示绝对定位，与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。 relative表示相对定位，对象不可层叠，但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置。,20.2.1 定位方式position,实例代码,20.2.1 定位方式position,接上页,20.2.1 定位方式position,网页效果,20.2.1 定位方式position,效果说明,在图20-4的源代码基础上，只要把类样式d1和d2中定位方式语句由position:absolute改为position:relative，就变
6、成了图20-5。但从两图的效果来看，差距是很大的，这主要是因为两个定位方式所参照的标准不一样，绝对定位是以网页的左上角为参照点，而相对定位是以其相近的元素为参照点。,20.2.2 设置位置top、bottom、right、left,基本语法,top:auto|长度值|百分比 bottom: auto|长度值|百分比 left: auto|长度值|百分比 right: auto|长度值|百分比,20.2.2 设置位置top、bottom、right、left,实例代码,20.2.2 设置位置top、bottom、right、left,接上页,20.2.2 设置位置top、bottom、right
7、、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,接上页,2
8、0.2.3 浮动float,网页效果,20.2.3 浮动float,效果说明,实例20-2-3代码中imgfloat: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,实例代码,
9、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 设置
10、层空间z-index,基本语法,z-index:auto|数字,20.3.1 设置层空间z-index,语法说明, auto表示子层会按照父层的属性显示。 数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。,20.3.1 设置层空间z-index,实例代码,20.3.1 设置层空间z-index,接上页,20.3.1 设置层空间z-index,网页效果,20.3.1 设置层空间z-index,效果说明,在“图20-9设置层空间”中，第三层的内容覆盖在第二层和第一层内容上面，第二层的内容又覆盖在第一层内容上面，所以从视觉角度会有立体感。,20.3.
11、2 设置层裁切clip,基本语法,clip:rect| |auto,20.3.2 设置层裁切clip,语法说明, auto表示不裁切。 rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左上角为参照点计算的。而且任意一个坐标值都可由auto来代替，表示该边不裁切。,20.3.2 设置层裁切clip,实例代码,20.3.2 设置层裁切clip,接上页,20.3.2 设置层裁切clip,网页效果,20.3.2 设置层裁切clip,效果说明,层裁切的矩形区域坐标值说明，上坐标10像素是指矩形的上边距网页上边的距离；右坐标6厘米是指矩
12、形的右边距网页左边的距离为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.3
13、.3 设置层大小度来width、height,网页效果,20.3.3 设置层大小度来width、height,注意,对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。,20.3.4 设置层溢出overflow,基本语法,overflow: visible/hidden/scroll/auto,20.3.4 设置层溢出overflow,语法说明, visible：扩大层的容纳范围，将所有内容都显示出来。 hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。 scroll：表示一直显示滚动条。 a
14、uto：当层内容超出了层的容纳范围时，则显示滚动条。,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
15、,实例代码,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表示根据对
16、象元素的内容自动选择鼠标指针形状。 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代码中定义的两个类样式几乎涉及了本章所学的所有属性。第一个类样式的定义中应用到了定位属性、位置属性、层空间、层大小、层溢出和鼠标属性。第二个类样式的定义中应用到了定
