htmlcssjavascript 标准实例教程(第二版)课件.ppt

htmlcssjavascript 标准实例教程(第二版)课件.ppt

ID:57057635

大小:4.34 MB

页数:85页

时间:2020-07-30

htmlcssjavascript 标准实例教程(第二版)课件.ppt_第1页
htmlcssjavascript 标准实例教程(第二版)课件.ppt_第2页
htmlcssjavascript 标准实例教程(第二版)课件.ppt_第3页
htmlcssjavascript 标准实例教程(第二版)课件.ppt_第4页
htmlcssjavascript 标准实例教程(第二版)课件.ppt_第5页
资源描述:

《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表示浮动元素在左边,是居左对齐的

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。