htmlcssjavascript 标准实例教程（第二版）课件.ppt

《htmlcssjavascript 标准实例教程（第二版）课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、本书编委会编著实例版第20章CSS样式的高级应用20.1列表20.2定位20.3CSS层20.4鼠标指针——cursor20.5小实例——综合设置层样式20.6习题HTML/CSS/JavaScript标准教程实例版（第2版）20.1列表20.1.1设计列表样式——list-style-type20.1.2添加列表图像——list-style-image20.1.3调整列表位置——list-style-position20.1.1设计列表样式——list-style-type基本语法list-style-type:

2、<属性值>20.1.1设计列表样式——list-style-type语法说明20.1.1设计列表样式——list-style-type实例代码20.1.1设计列表样式——list-style-type接上页20.1.1设计列表样式——list-style-type网页效果20.1.2添加列表图像——list-style-image基本语法list-style-image:none

3、URL20.1.2添加列表图像——list-style-image语法说明none表示不使用图像符号。URL指定图像的名称或者路径。

4、20.1.2添加列表图像——list-style-image实例代码20.1.2添加列表图像——list-style-image接上页20.1.2添加列表图像——list-style-image网页效果20.1.3调整列表位置——list-style-position基本语法list-style-position:outside

5、inside20.1.3调整列表位置——list-style-position语法说明outside表示列表符号不向内缩进，是列表的默认属性值。inside表示列表符号向内缩进。20.

6、1.3调整列表位置——list-style-position实例代码20.1.3调整列表位置——list-style-position接上页20.1.3调整列表位置——list-style-position网页效果20.1.3调整列表位置——list-style-position效果说明从图20-3的网页效果可以看出，第一段文字的列表符号和文字是对齐排列的，也就是说列表符号是向内缩进的。而第二段文字的列表符号是在文字外排列的，也就是说列表符号是没有向内缩进的。20.2定位20.2.1定位方式——position20

7、.2.2设置位置——top、bottom、right、left20.2.3浮动——float20.2.4清除——clear20.2.1定位方式——position基本语法position:static

8、absolute

9、relative20.2.1定位方式——position语法说明static表示为静态定位，是默认设置。absolute表示绝对定位，与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。relative表示相对定位，对象不可层叠，但也要依据top、bo

10、ttom、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，就变成了图20-5。但从两图的效果来看，差距是很大的，这主要是因为两个定位方式所参照的标准不一样，绝对定位是以网页的左上角为参照

11、点，而相对定位是以其相近的元素为参照点。20.2.2设置位置——top、bottom、right、left基本语法top:auto

12、长度值

13、百分比bottom:auto

14、长度值

15、百分比left:auto

16、长度值

17、百分比right:auto

18、长度值

19、百分比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、

20、right、left效果说明因为类样式d1和d2所定义的位置距网页上端的距离都为70像素，而距网页左边的距离一个为20像素，一个为200像素，所以在两个层引用这两个样式后，层内容分别放到了图像的两边。20.2.3浮动——float基本语法float:left

21、right

22、none20.2.3浮动——float语法说明left表示浮动元素在左边，是居左对齐的