欢迎来到天天文库
浏览记录
ID：39221081
大小：775.00 KB
页数：22页
时间：2019-06-27
《使用CSS设置链接与导航菜单》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、第十三讲使用CSS设置链接与导航菜单本讲目标1、精品导航欣赏2、标签语法回顾3、了解鼠标指针样式4、按钮式超链接及荧光灯效果菜单5、使用项目列表创建导航菜单6、掌握图片翻转效果7、鼠标指针经过时给图片增加边框新课引入在一个网站中，所有页面都会通过超链接相互链接在一起，这样才会形成一个有机的整体。在各种网站中，导航都是网页中最重要的组成部分之一。1、精品导航欣赏著名网站首页导航欣赏1、淘宝网首页www.taobao.com2、淘宝网天猫商城”爱贴墙贴”店铺首页http://itie.tmall.com/shop/view
2、_shop.htm3、苹果-Apple官网首页http://www.apple.com.cn/4、门户类型网站首页腾讯、新浪、网易、搜狐5、QQ空间2、标签语法回顾标签语法回顾链接到其他页面[免费注册][登录]链接内容链接的地址标签还具有什么其他属性？分别起什么作用呢？3、>标签常用CSS属性/*CSSDocument*/a{color:blue;text-decoration:none;/*去除下划线*/}a:hover{color:red;text-decoration:underline;/*设置下划线*/}这种写法称为：伪类标签“href”属性路径设置1、相对路径，一般用于站点内部网页之间相互链接；2、绝对路径，一般用于A站点链接B站点；两种方式：相对路径和绝对路径3、控制鼠标指针cursor定制的鼠标属性值及指针效果4、按钮式超链接和荧光灯效果菜单按钮式超链接4、ref="home.htm">HomeEastWestNorthSouth代码演示1代码演示2荧光灯效果的菜单参考课本P253~P256,进行分析设计代码演示5、使用项目列表创建导航菜单项目列表回顾HomeContactusWebDev
3、>标签常用CSS属性/*CSSDocument*/a{color:blue;text-decoration:none;/*去除下划线*/}a:hover{color:red;text-decoration:underline;/*设置下划线*/}这种写法称为：伪类标签“href”属性路径设置1、相对路径，一般用于站点内部网页之间相互链接；2、绝对路径，一般用于A站点链接B站点；两种方式：相对路径和绝对路径3、控制鼠标指针cursor定制的鼠标属性值及指针效果4、按钮式超链接和荧光灯效果菜单按钮式超链接4、ref="home.htm">HomeEast
4、ref="home.htm">Home
5、
6、航菜单参考课本P261-P264，效果如下：横向导航菜单竖向导航菜单代码演示代码演示6、其他超链接案例图片翻转效果图片翻转效果，我们参考apple公司官网导航菜单http://www.apple.com.cn/实现思路：1、将标记变为块级元素，设定它的高度和宽度与图片相同。2、当鼠标经过时，背景图片换掉，文字颜色改变。案例演示鼠标指针经过时给图片增加边框图片增加边框效果，我们参考淘宝网首页“所有类目”案例演示千里之行始于足下22
此文档下载收益归作者所有
