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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2018/7/18,#,YCF,（中职）Web前端设计基础 项目八-1电子课件,CSS 3,创建网页菜单,项目八,授课教师,：,姓名,WEB,前端设计基础,Contents,1.,项目描述,2.,知识,准备,3.,项目实施,4.,项目拓展,5.,项目小结,6.,技能训练,一 项目,描述,本项目学习要点,用,CSS 3,美化项目列表,；,用,CSS 3,制作网页菜单,。,用,CSS 3,美化超链接,；,二 知识准备,CSS 3,美化超链接,；,CSS 3,美化项目列表,。,CSS 3,美化超链接,1.,改变超链接的基本样式,伪类是,CSS,本身定义的一种类，使用伪类可以定义超链接在不同状态下的样式效果。超链接的伪类有四种状态，详细信息如,表所,示。,想要定义未被访问的超链接样式，可以通过,a:link,来实现，要设置被访问过的超链接样式，可以通过,a:visited,来实现，要设置鼠标经过和激活时的样式用,a:hover,和,a:active,来实现。,属性,说明,a:link,定义,a,元素未访问时的样式,a:visited,定义,a,元素访问后的样式,a:hover,定义鼠标经过显示的样式,a:active,定义鼠标单击激活时的样式,CSS 3,美化超链接,1.,改变超链接的基本样式,a:linkCSS,样式,a:visitedCSS,样式,a:hoverCSS,样式,a:activedCSS,样式,定义这四个伪类，必须按照“,link,、,visited,、,hover,、,active”,的顺序进行，不然浏览器可能无法正常显示这,4,种样式。,格式为：,CSS 3,美化超链接,2.,设置带有提示信息的超链接,超链接的文字比较简洁，有时候不能表达这个超链接的含义，通常是为超链接添加上一些介绍性信息，即提示信息。要设置这样的信息，可以通过超链接信息的描述标记,title,来实现，,title,属性的值为提示的内容,。,格式如下：,CSS 3,美化超链接,2.,设置带有提示信息的超链接,【,例,8-1】,超链接基本样式和提示信息实例，代码如下所示（示例文件,8-1.html,）。,超链接基本样式和提示信息,#nav1padding:20px;,acolor:#545454;text-decoration:none;margin:3px;padding:3px;,a:linkcolor:#545454;,a:visitedcolor:#545454;,a:hovercolor:#f60;text-decoration:underline;,a:activecolor:#f63;,首页,|,产品展示,|,售后服务,|,联系我们,|,关于我们,在,chrome,浏览器中预览,CSS 3,美化超链接,3.,设置超链接的背景图,超链接不仅可以使用文字，也可是使用背景图片加文字和背景颜色加文字的形式来显示，这样的超链接会更加精美。超链接添加背景图片，使用,background-image,来实现，超链接添加背景颜色，使用,background-color,来实现。,CSS 3,美化超链接,3.,设置超链接的背景图,【,例,8-2】,设置超链接的背景颜色实例，代码如下所示（示例文件,8-2.html,）。,.,navmargin: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,在,chrome,浏览器中预览,首页,关于我们,产品展示,售后服务,联系我们,CSS 3,美化超链接,4.,设置超链接的按钮效果,为了增强超链接的视觉效果，会将超链接模拟成表单按钮，当鼠标指针移动到一个超链接上的时候，超链接的文本或者图片就会像被按下，有种凹陷的效果。其实现方式是利用,CSS,中的,a:hover,，当鼠标经过连接时，链接向下、向右各移一个像素，这样显示效果就想按钮按下了一样。,CSS 3,美化超链接,4.,设置超链接的按钮效果,【,例,8-3】,超链接按钮效果实例，代码如下所示（示例文件,8-3.html,）。,#,navmargin-top:10px;padding:20px;border:1px red solid;,afont-family,:,微软雅黑,;text-align:center;margin:3px;,a:link,a:visited,color,:#ac2300;,padding:4px,10px 4px 10px;,background-color,:#ccd8db;,text-decoration,:none;,border-top:1px,solid#eeeeee;,border-left:1px,solid#eeeeee;,border-bottom:1px,solid#717171;,border-right:1px,solid#717171;,a:hover,color,:#821821;,padding:5px,8px 3px 12px;,background-color,:#e2c4c9;,text-decoration,:none;,border-top:1px,solid#717171;,border-left:1px,solid#717171;,border-bottom:1px,solid#eeeeee;,border-right:1px,solid#eeeeee;,首页,关于我们,品牌特卖,产品展示,联系我们,在,chrome,浏览器中预览,CSS 3,美化超链接,5.,设置超链接的鼠标样式,想要在网页中实现鼠标样式改变的效果，可以通过,CSS,属性设置来实现。,CSS3,中鼠标箭头样式可以通过,cursor,属性来实现。,cursor,属性有,17,个属性值，对应鼠标的,17,个样式，常用如,表所,示。当鼠标经过超链接是可以使用这些鼠标样式，达到相应的效果。,cursor,值,描述,url,需使用的自定义光标的,default,默认光标（通常是一个箭头）,auto,默认,，,浏览器,设置的,光标,crosshair,光标呈现为十,字线,pointer,光标呈现为指示链接的指针（一只手）,move,此光标指示某对象可被,移动,e-resize,此光标指示矩形框的边缘可被向右（东）,移动,ne-resize,此光标指示矩形框的边缘可被向上及向右移动（北,/,东,）,nw-resize,此光标指示矩形框的边缘可被向上及向左移动（北,/,西,）,n-resize,此光标指示矩形框的边缘可被向上（北）,移动,se-resize,此光标指示矩形框的边缘可被向下及向右移动（南,/,东,）,sw-resize,此光标指示矩形框的边缘可被向下及向左移动（南,/,西,）,s-resize,此光标指示矩形框的边缘可被向下移动（南,）,w-resize,此光标指示矩形框的边缘可被向左移动（西,）,text,此光标指示,文本,wait,此光标指示程序正忙（通常是一只表或沙漏,）,help,此光标指示可用的帮助（通常是一个问号或一个气球,）,作业,一、选择题,1.,下列,超,链接状态中，,_,是错误的。,A a,是声明超链接样式,B a:link,设置已链接的样式,C,a:active,设置激活时超链接的样式,D a:hover,设置当鼠标悬停链接时的超链接样式,2.,如果希望进入网页时鼠标光标就能显示,crosshair,光标图标，那么“,cursor:crosshair;,”语句应该写在,HTML,文件的,_,位置。,A B C D ,二、上机实训,上机完成例,8-1,和例,8-3,的实例操作。,End,