使用CSS样式美化超链接和鼠标指针50张课件.ppt
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《使用CSS样式美化超链接和鼠标指针50张课件.ppt》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 CSS 样式 美化 超链接 鼠标 指针 50 课件
- 资源描述:
-
1、使用使用CSS样式美化超链接和鼠标指针样式美化超链接和鼠标指针sghgmyy126 超链接是整个互联网的基础,通过超链接能够实现页面的跳转、功能的激活等,超链接可以将网站中每个页面关联在一起。通过CSS样式,可以设置出美观大方、具有不同外观和样式效果的超链接,从而增加页面的样式效果和超链接交互效果。本章将介绍如何使用CSS样式对超链接效果进行控制。超链接是网页中最重要、最根本的元素之一,网站中的每一个网页都是通过超链接的形式关联在一起的。如果页面之间是彼此独立的,那么这样的网站将无法正常运行。sghgmyy126主要内容8.1 定义超链接样式制作活动公告8.2 超链接伪类应用(1)制作按钮式超
2、链接8.3 超链接伪类应用(2)制作图像式超链接8.4 使用CSS定义鼠标指针样式改变默认的鼠标指针8.5 使用CSS定义鼠标变换效果8.6 box-shadow属性(CSS3.0)为网页元素添加阴影8.7 overflow属性(CSS3.0)网页元素内容溢出处理8.8 resize属性(CSS3.0)在网页中实现区域缩放调节8.9 outline属性(CSS3.0)为网页元素添加轮廓边框sghgmyy126定义超链接样式 对于超链接的修饰,通常可以采用CSS伪类。伪类是一种特殊的选择符,能被浏览器自动识别。其最大的用处是在不同状态下可以对超链接定义不同的样式效果,是CSS本身定义的一种类。本
3、实例制作的是一个小活动的内容公告,通过对超链接的4种CSS样式伪类进行设置,实现了文本超链接样式的不同效果。【任务描述任务描述】sghgmyy126定义超链接样式【任务展示任务展示】案例效果图案例效果图sghgmyy126定义超链接样式【任务实现任务实现】HTML代码代码sghgmyy126定义超链接样式【任务实现任务实现】CSS样式代码样式代码sghgmyy126定义超链接样式【相关知识相关知识】超链接是由标签组成,超链接可以是文字或图像。添加了超链接的文字具有自己默认的样式,从而和其他文字区分开,其中默认的超链接样式为蓝色文字且有下划线(如:超链接超链接)。通过CSS可以修饰超链接效果,从
4、而达到美化页面整体的效果。sghgmyy126定义超链接样式对于超链接伪类的设置属性如下:a:link:定义超链接对象在没有访问前的样式;a:hover:定义当鼠标移至超链接对象上时的样式;a:active:定义当鼠标单击超链接对象时的样式;a:hover:定义超链接对象已经被访问过后的样式。sghgmyy126定义超链接样式 什么是超链接?超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮件地址、一个文件,甚至是一个应用程序。而用来超链接的对象,可以是一段文本或者是一个图片。sghgmyy126定义超链接样式 按照
5、链接路径的不同,超链接可以分为哪几种类型?可分为以下几类:内部链接;外部链接;锚记链接;脚本链接。sghgmyy126超链接伪类应用(1)在网页制作中,通过CSS样式的设置可以制作出各种各样的导航菜单超链接。本实例就是对CSS样式表进行设置,制作出按钮式导航菜单。【任务描述任务描述】sghgmyy126超链接伪类应用(1)【任务展示任务展示】案例效果图案例效果图sghgmyy126超链接伪类应用(1)【任务实现任务实现】CSS样式代码样式代码sghgmyy126超链接伪类应用(1)【相关知识相关知识】在很多网页中,超链接制作成各种按钮的效果,这些效果大多采用图像的方式来实现。通过CSS样式的设
6、置,同样可以制作出类似于按钮效果的导航菜单超链接。sghgmyy126超链接伪类应用(1)按照链接对象的不同,可以将超链接分为哪几类?可分为以下几类:内部链接;图像链接;锚记链接;邮件链接;空链接;多媒体链接。sghgmyy126超链接伪类应用(1)n怎样合理地设置网页中的超链接?在网页中创建超链接时,用户需要综合整个网站中的所有页面进行考虑,合理地安排超链接,这样才会使整个网站中的页面具有一定的条理性,创建超链接的建议如下:避免孤立文件的存在;在网页中避免使用过多的超级链接;网页中的超链接不要超过4层;页面较长时可以使用书签;设置主页或上一层的链接。sghgmyy126超链接伪类应用(2)本
7、实例制作的是网站页面的导航菜单,通过设置4种伪类样式代码,为文字的超链接添加了好看的背景,使得网页看起来更具有欣赏性。【任务描述任务描述】sghgmyy126超链接伪类应用(2)【任务展示任务展示】案例效果图案例效果图sghgmyy126超链接伪类应用(2)【任务实现任务实现】CSS样式代码样式代码sghgmyy126超链接伪类应用(2)【相关知识相关知识】n链接路径可以分为几种形式?相对路径:最适合网站的内部链接。只要是属于同一网站下的,即使不在同一个目录下,相对路径也非常适合。绝对路径:为文件提供完整的路径,包括使用协议。适合网站的外部链接。根路径:同样适用于创建内部链接,但大多数情况下,
8、不建议使用此种路径形式。通过适用以下两种情况:当站点的规模非常大,放置于几个服务器上时;当一个服务器上同时放置几个站点时。根路很以“”开始,然后是根目录下的目录名。sghgmyy126使用使用CSS定义鼠标指针样式定义鼠标指针样式 通常在浏览网页时,看到的鼠标指针的形状有箭头、手形和I字形,而在Windows环境下实际看到的鼠标指针种类要比这个广泛得多。CSS弥补了HTML语言在这方面的不足,通过cursor属性可以设置各式各样的鼠标指针样式。【任务描述任务描述】sghgmyy126使用使用CSS定义鼠标指针样式定义鼠标指针样式【任务展示任务展示】案例效果图案例效果图sghgmyy126使用使
9、用CSS定义鼠标指针样式定义鼠标指针样式【任务实现任务实现】CSS样式代码样式代码sghgmyy126使用使用CSS定义鼠标指针样式定义鼠标指针样式【相关知识相关知识】cursor属性用于设置光标在网页中的视觉效果,通过样式改变鼠标形状,当鼠标放在被此选择设置、修饰过的区域上时,形状会发生改变。具体的形状包括:属性值指针说明及对应效果属性值指针说明及对应效果crosshair交叉十字n-resize向北的箭头text文本选择符号nw-resize指向西北的箭头waitWindows等待形状w-resize向西的箭头pointer手形sw-resize指向西南的箭头default默认的鼠标形状s
展开阅读全文