第16章 用CSS设置链接与导航菜单创新.ppt

第16章用CSS设置链接与导航菜单 制作丰富的超链接特效 创建按钮式超链接 制作荧光灯效果的菜单 控制鼠标指针 设置项目列表样式 创建基于列表的导航菜单 应用滑动门技术的玻璃效果菜单 16.1 制作丰富的超链接特效 在HTML语言中，超链接是通过标记a来实现的，链接的具体地址则是利用a标记的href属性，代码如下： a href=前沿视频教室/a a{text-decoration:none; /* 去掉下画线 */ } 16.2 创建按钮式超链接 首先跟所有HTML页面一样，建立最简单的菜单结构，本例使用和上面实例相同的HTML结构，代码如下： body div id=“menu” 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 /div /body head title按钮超链接/title style #menu{height:2.5em; background-color:#CCC; } a{text-align:center; margin:20px; padding:5px 10px; line-height:2.5em; text-decoration: none; } a:link, a:visited{color: #A62020; background-color: #DDD; border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */ border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } a:hover{color:#821818; /* 改变文字颜色 */ background-color:#CCC; /* 改变背景色 */ border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; } /style /head 16.3 制作荧光灯效果的菜单 16.3.1 创建HTML框架 首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架，HTML代码如下。 html body div id=menu a href=# Home /a a href=# Contact Us/a a href=# Web Dev/a a href=# Web Design/a a href=# Map /a /div /body /html 16.3.2 设置容器的CSS样式 （1）现在设置菜单div容器的整体区域样式，设置菜单的宽度、背景色，以及文字的字体和大小。 在HTML文件的head部分增加CSS样式表代码如下。 style type=text/css #menu { font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; margin:0 auto; border:1px solid #ccc; } /style 16.3.3 设置菜单项的CSS样式 （1）现在就需要设置文字链接了。 为了使5个文字链接依次竖直排列，需要将它们从“行内元素”变为“块级元素”。 此外还应该为它们设置背景色和