html+css+javascript 标准实例教程(第二版)20.ppt
《html+css+javascript 标准实例教程(第二版)20.ppt》由会员分享,可在线阅读,更多相关《html+css+javascript 标准实例教程(第二版)20.ppt(85页珍藏版)》请在三一文库上搜索。
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,实例代码,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html+css+javascript 标准实例教程第二版20 html css javascript 标准 实例教程 第二 20
链接地址:https://www.31doc.com/p-7196587.html