《第14讲_使用CSS设置链接与导航菜单》-公开·课件设计.pptVIP

本讲目标 新课引入 在一个网站中，所有页面都会通过超链接相互链接在一起，这样才会形成一个有机的整体。 在各种网站中，导航都是网页中最重要的组成部分之一。 著名网站首页导航欣赏 1、淘宝网首页 2、淘宝网天猫商城”爱贴墙贴”店铺首页 /shop/view_shop.htm 3、苹果-Apple官网首页 / 4、门户类型网站首页 腾讯、新浪、网易、搜狐 5、QQ空间 A标签语法回顾 HTML HEAD TITLE链接到其他页面/TITLE /HEAD BODY A href=register/register.html[免费注册]/A A href=login/login.htm[登录]/A /BODY /HTML A标签常用CSS属性 A标签“href”属性路径设置 cursor定制的鼠标属性值及指针效果 按钮式超链接 荧光灯效果的菜单 项目列表回顾 使用CSS修饰项目符号 利用项目列表创建导航菜单 参考课本P261-P264，效果如下： 图片翻转效果 鼠标指针经过时给图片增加边框 Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 了了了了了了来了来了 1、精品导航欣赏 2、标签A语法回顾 3、了解鼠标指针样式 4、按钮式超链接及荧光灯效果菜单 5、使用项目列表创建导航菜单 6、掌握图片翻转效果 7、鼠标指针经过时给图片增加边框 1、精品导航欣赏 2、标签A语法回顾 链接内容 链接的地址 A标签还具有什么其他属性？分别起什么作用呢？ /* CSS Document */ a{ color:blue; text-decoration:none; /*去除下划线*/ } a:hover{ color:red; text-decoration:underline; /*设置下划线*/ } 这种写法称为：伪类 1、相对路径，一般用于站点内部网页之间相互链接； 2、绝对路径，一般用于A站点链接B站点； 两种方式：相对路径和绝对路径 3、控制鼠标指针 4、按钮式超链接和荧光灯效果菜单 body a href=home.htmHome/a a href=east.htmEast/a a href=west.htmWest/a a href=north.htmNorth/a a href=south.htmSouth/a /body 代码演示1 代码演示2 参考课本P253~P256,进行分析设计 代码演示 5、使用项目列表创建导航菜单 ul liHome/li liContact us/li li class=specialWeb Dev/li liWeb Design/li liMap/li /ul 可以是ul…li的组合，也可以是ol…li的组合， 区别就在于list-style-type这个属性值的不同！ 代码演示 ul { list-style-type:none; } 通常情况下,我们不需要项目符号： 其实，除了list-style-type这个属性外，CSS还提供了属性list-style-image，那么效果到底好不好用呢？ 发现并不好用，因此不推荐这种设置图片符号的方法， 而是采取对li设置背景图片的方式来实现 代码演示 横向导航菜单 竖向导航菜单 代码演示 代码演示 6、其他超链接案例 图片翻转效果，我们参考apple公司官网导航菜单 / 实现思路： 1、将A标记变为块级元素，设定它的高度和宽度与图片 相同。 2、当鼠标经过时，背景图片换掉，文字颜色改变。 案例演示 图片增加边框效果，我们参考淘宝网首页“所有类目” 案例演示 千里之行 始于足下 * * Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 了了了了了了来了来了