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