（中职）Web前端设计基础 项目八-1电子课件.pptxVIP

（中职）Web前端设计基础 项目八-1电子课件正版可修改PPTYCFWEB前端设计基础CSS 3创建网页菜单项目八授课教师：姓名Contents5.项目小结3.项目实施1.项目描述2.知识准备6.技能训练4.项目拓展一 项目描述本项目学习要点用CSS 3美化超链接；用CSS 3美化项目列表；用CSS 3制作网页菜单。二 知识准备CSS 3美化超链接；CSS 3美化项目列表。CSS 3美化超链接1.改变超链接的基本样式伪类是CSS本身定义的一种类，使用伪类可以定义超链接在不同状态下的样式效果。超链接的伪类有四种状态，详细信息如表所示。属性说明a:link定义a元素未访问时的样式a:visited定义a元素访问后的样式a:hover定义鼠标经过显示的样式a:active定义鼠标单击激活时的样式想要定义未被访问的超链接样式，可以通过a:link来实现，要设置被访问过的超链接样式，可以通过a:visited来实现，要设置鼠标经过和激活时的样式用a:hover和a:active来实现。CSS 3美化超链接1.改变超链接的基本样式格式为：a:link{CSS样式}a:visited{CSS样式}a:hover{CSS样式}a:actived{CSS样式}定义这四个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。CSS 3美化超链接2.设置带有提示信息的超链接超链接的文字比较简洁，有时候不能表达这个超链接的含义，通常是为超链接添加上一些介绍性信息，即提示信息。要设置这样的信息，可以通过超链接信息的描述标记title来实现，title属性的值为提示的内容。格式如下：a href= title=提示信息的文本内容/aCSS 3美化超链接2.设置带有提示信息的超链接【例8-1】超链接基本样式和提示信息实例，代码如下所示（示例文件8-1.html）。!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title超链接基本样式和提示信息/title style #nav1{padding:20px;} a{color:#545454;text-decoration: none;margin:3px;padding: 3px;} a:link{color:#545454;} a:visited{color:#545454;} a:hover{color:#f60;text-decoration: underline;} a:active{color:#f63;} /style/headbody div id=nav1 a href=#首页/a| a href=#产品展示/a| a href=#售后服务/a| a href=#联系我们/a| a href=# title=我们是一个团结的集体关于我们/a /div/body/html在chrome浏览器中预览CSS 3美化超链接3.设置超链接的背景图超链接不仅可以使用文字，也可是使用背景图片加文字和背景颜色加文字的形式来显示，这样的超链接会更加精美。超链接添加背景图片，使用background-image来实现，超链接添加背景颜色，使用background-color来实现。CSS 3美化超链接3.设置超链接的背景图【例8-2】设置超链接的背景颜色实例，代码如下所示（示例文件8-2.html）。style type=text/css .nav{margin:20px;font-size:14px;font-family: 微软雅黑;} a{ color:#333; text-decoration:none; display: block; float: left; text-align: center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-left:6px; } a:hover{ background-color:#F60; color:#fff}/stylebody div class=nav a href=#首　　页/a a href=#关于我们/a a href=#产品展示/a a href=#售后服务/a a href=#联系我们/a /div/body在chrome浏览器中预览CSS 3美化超链接4.设置超链接的按钮效果为了增强超链接的视觉效果，会将超链接模拟成表单按钮，当鼠标指针移动到一个超链接上的时候，超链接的文本或者图片就会像被按下，有种凹陷的效果。其实现方式是利用CSS中的a:hover，当鼠标经过连接时，链接向下、向右各移一个像素，这