第14讲_使用CSS设置链接与导菜单

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Copyright 2010-2012,Hdwnt,Inc.All Rights Reserved.,*,第十三讲,使用CSS设置,链接与导航菜单,本讲目标,1,、精品导航欣赏,2,、标签,语法回顾,3,、了解鼠标指针样式,4,、按钮式超链接及荧光灯效果菜单,5,、使用项目列表创建导航菜单,6,、掌握图片翻转效果,7,、鼠标指针经过时给图片增加边框,新课引入,在一个网站中，所有页面都会通过超链接相互链接在一起，这样才会形成一个有机的整体。,在各种网站中，导航都是网页中最重要的组成部分之一。,1,、精品导航欣赏,著名网站首页导航欣赏,1,、淘宝网首页,2,、淘宝网天猫商城,”,爱贴墙贴”店铺首页,http:/ Document*/,a,color:blue,;,text-,decoration:none,;,/*,去除下划线,*/,a:hover,color:red,;,text-,decoration:underline,;,/*,设置下划线,*/,这种写法称为：,伪类,标签,“,href,”,属性路径设置,1,、相对路径，一般用于,站点内部网页之间相互链接,；,2,、绝对路径，一般用于,A,站点链接,B,站点,；,两种方式：相对路径和绝对路径,3,、控制鼠标指针,cursor,定制的鼠标属性值及指针效果,4,、按钮式超链接和荧光灯效果菜单,按钮式超链接,Home,East,West,North,South,代码演示,1,代码演示,2,荧光灯效果的菜单,参考课本,P253P256,进行分析设计,代码演示,5,、使用项目列表创建导航菜单,项目列表回顾,Home,Contact us,Web Dev,Web,Design,Map,可以是,ul,li,的组合，也可以是,ol,li,的组合，,区别就在于,list-style-type,这个属性值的不同！,代码演示,使用,CSS,修饰项目符号,ul,list-style-,type:none,;,通常情况下,我们不需要项目符号：,其实，除了,list-style-type,这个属性外，,CSS,还提供了属性,list-style-image,，那么效果到底好不好用呢？,发现并不好用，因此不推荐这种设置图片符号的方法，,而是采取对,li,设置背景图片的方式来实现,代码演示,利用项目列表创建导航菜单,参考课本,P261-P264,，效果如下：,横向导航菜单,竖向导航菜单,代码演示,代码演示,6,、其他超链接案例,图片翻转效果,图片翻转效果，我们参考,apple,公司官网导航菜单,http:/,/,实现思路：,1,、将,标记变为块级元素，设定它的高度和宽度与图片,相同。,2,、当鼠标经过时，背景图片换掉，文字颜色改变。,案例演示,鼠标指针经过时给图片增加边框,图片增加边框效果，我们参考淘宝网首页“,所有类目,”,案例演示,千里之行 始于足下,22,