用CSS设置超链接与导航菜单.ppt

水平菜单 水平菜单可以自由地转换为竖直菜单和折行菜单 玻璃效果的菜单 基本页面 设置菜单整体效果 应用滑动门技术 用CSS设置 链接与导航菜单 在HTML语言中，超链接是通过标记a来实现的，链接的具体地址则是利用a标记的href属性，代码如下： a href=“”百度/a a{ /* 超链接的样式 */ text-decoration:none; /* 去掉下画线 */ } 首先跟所有HTML页面一样，建立最简单的菜单结构，本例使用和上面实例相同的HTML结构，代码如下： 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 style a{ display:block; /*设置为块级元素*/ font-family: Arial; /* 统一设置所有样式 */ font-size: .8em; text-align:center; margin:3px; } a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #DDD; text-decoration: none; border-top: 1px solid #EEEEEE;/* 边框实现阴影效果 border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } a:hover{ /* 鼠标经过时的超链接 */ color:#821818;` /* 改变文字颜色 */ padding:5px 8px 3px 12px; /* 改变文字位置 */ background-color:#CCC; /* 改变背景色 */ border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; } /style 图 最终效果 图 荧光灯效果菜单 首先，从编写基本的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 （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 （1）现在就需要设置文字链接了。 为了使5个文字链接依次竖直排列，需要将它们从“行内元素”变为“块级元素”。 此外还应该为它们设置背景色和内边距，以使菜单文字之间不要过于局促。 具体代码如下： #menu a, #menu a:visited