- 1、本文档共49页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
使用CSS样式美化超链接和鼠标指针 超链接是整个互联网的基础,通过超链接能够实现页面的跳转、功能的激活等,超链接可以将网站中每个页面关联在一起。通过CSS样式,可以设置出美观大方、具有不同外观和样式效果的超链接,从而增加页面的样式效果和超链接交互效果。本章将介绍如何使用CSS样式对超链接效果进行控制。 超链接是网页中最重要、最根本的元素之一,网站中的每一个网页都是通过超链接的形式关联在一起的。如果页面之间是彼此独立的,那么这样的网站将无法正常运行。主要内容8.1 定义超链接样式——制作活动公告8.2 超链接伪类应用(1)——制作按钮式超链接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)——为网页元素添加轮廓边框定义超链接样式【任务描述】 对于超链接的修饰,通常可以采用CSS伪类。伪类是一种特殊的选择符,能被浏览器自动识别。其最大的用处是在不同状态下可以对超链接定义不同的样式效果,是CSS本身定义的一种类。 本实例制作的是一个小活动的内容公告,通过对超链接的4种CSS样式伪类进行设置,实现了文本超链接样式的不同效果。定义超链接样式【任务展示】案例效果图定义超链接样式【任务实现】HTML代码定义超链接样式【任务实现】CSS样式代码定义超链接样式【相关知识】 超链接是由a/a标签组成,超链接可以是文字或图像。添加了超链接的文字具有自己默认的样式,从而和其他文字区分开,其中默认的超链接样式为蓝色文字且有下划线(如:超链接)。通过CSS可以修饰超链接效果,从而达到美化页面整体的效果。 定义超链接样式对于超链接伪类的设置属性如下: a:link:定义超链接对象在没有访问前的样式; a:hover:定义当鼠标移至超链接对象上时的样式; a:active:定义当鼠标单击超链接对象时的样式; a:hover:定义超链接对象已经被访问过后的样式。 定义超链接样式什么是超链接? 超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮件地址、一个文件,甚至是一个应用程序。而用来超链接的对象,可以是一段文本或者是一个图片。 定义超链接样式按照链接路径的不同,超链接可以分为哪几种类型? 可分为以下几类:内部链接;外部链接;锚记链接;脚本链接。 超链接伪类应用(1)【任务描述】 在网页制作中,通过CSS样式的设置可以制作出各种各样的导航菜单超链接。本实例就是对CSS样式表进行设置,制作出按钮式导航菜单。超链接伪类应用(1)【任务展示】案例效果图超链接伪类应用(1)【任务实现】CSS样式代码超链接伪类应用(1)【相关知识】 在很多网页中,超链接制作成各种按钮的效果,这些效果大多采用图像的方式来实现。通过CSS样式的设置,同样可以制作出类似于按钮效果的导航菜单超链接。超链接伪类应用(1)按照链接对象的不同,可以将超链接分为哪几类? 可分为以下几类:内部链接;图像链接;锚记链接;邮件链接;空链接;多媒体链接。 超链接伪类应用(1)怎样合理地设置网页中的超链接? 在网页中创建超链接时,用户需要综合整个网站中的所有页面进行考虑,合理地安排超链接,这样才会使整个网站中的页面具有一定的条理性,创建超链接的建议如下: 避免孤立文件的存在; 在网页中避免使用过多的超级链接; 网页中的超链接不要超过4层; 页面较长时可以使用书签; 设置主页或上一层的链接。 超链接伪类应用(2)【任务描述】 本实例制作的是网站页面的导航菜单,通过设置4种伪类样式代码,为文字的超链接添加了好看的背景,使得网页看起来更具有欣赏性。超链接伪类应用(2)【任务展示】案例效果图超链接伪类应用(2)【任务实现】CSS样式代码超链接伪类应用(2)【相关知识】链接路径可以分为几种形式?相对路径:最适合网站的内部链接。只要是属于同一网站下的,即使不在同一个目录下,相对路径也非常适合。绝对路径:为文件提供完整的路径,包括使用协议。适合网站的外部链接。根路径:同样适用于创建内部链接,但大多数情况下,不建议使用此种路径形式。通过适用以下两种情况:①当站点的规模非常大,放置于几个服务器上时;②当一个服务器上同时放置几个站点时。根路很以“ \ ”开始,然后是根目录下的目录名。使用CSS定义鼠标指针样式【任务描述】 通常在浏览网页时,看到的鼠标指针的形状有箭头、手形和I字形,而在Windows环境下实际看
您可能关注的文档
- 企业员工内部培训 .ppt
- 前房角镜检查法 眼科 .ppt
- 前台接待培训课件 .ppt
- 前台培训课程 .ppt
- 浅述中医外治法在脂肪肝中的应用 .pptx
- 浅谈中西方礼仪文化差异 .ppt
- 全面预算管理培训讲义 .ppt
- 全轻混凝土施工工艺 .ppt
- 人防工程知识祥解 .ppt
- 人教版 充满魅力的书画和戏曲艺术 .ppt
- 2025届江苏省新沂市第四中学初三6月适应性考试数学试题含解析.doc
- 2025届江苏省盐城市汇文中学初三3月质检数学试题试卷含解析.doc
- 2025届吉林省长春达标名校中考数学试题模拟试卷(8)含解析.doc
- 2025届江苏省无锡市锡东片初三2月开学摸底(延迟开学网络考试)数学试题A卷试题含解析.doc
- 2025届江苏省泰兴市泰兴区初三第一次四校联考数学试题含解析.doc
- 2025届江苏省宿迁市沭阳怀文中学初三下期2月数学试题试卷含解析.doc
- 2025届湖南省株洲市炎陵县初三第五次检测试题考试数学试题含解析.doc
- 2025届江苏省盐城市东台市第一教研片市级名校中考最新原创信息试卷数学试题(八)含解析.doc
- 2025届江苏省徐州市邳州市八路中学初三年级下学期第三次摸底考试数学试题含解析.doc
- 2025届江苏省扬州市邗江实验重点名校初三第四次质量抽测数学试题含解析.doc
文档评论(0)