动态的超链接：
<html> <head> <title>动态超链接</title> <style> <!-- body{ background:url(bg9.gif); /* 页面背景图片 */ margin:0px; padding:0px; cursor:pointer; /*意思就是鼠标指针变成 手 的形状，和放到链接上面的鼠标指针一样*/ } .chara1{ font-size:12px; background-color:#90bcff; /* 导航条的背景颜色 */ } .chara1 td{ text-align:center; } a:link{ /* 超链接正常状态下的样式 */ color:#005799; /* 深蓝 */ text-decoration:none; /* 无下划线 */ } a:visited{ /* 访问过的超链接 */ color:#000000; /* 黑色 */ text-decoration:none; /* 无下划线 */ } a:hover{ /* 鼠标经过时的超链接 */ color:#FFFF00; /* 黄色 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> <body> <table align="center" cellpadding="1" cellspacing="0"><!--align="center" 表格对齐格式为置中； cellpadding ="1" 表格中单元格在原有基础上沿四边各加上1个点子宽度。 cellspacing ="0" 表格中单元格之间的空白量（也可理解为左侧缩进）--> <tr><td><img src="banner3.jpg" border="0"></td></tr> </table> <table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center"> <tr> <td><a href="#">首页</a></td> <td><a href="#">心情日记</a></td> <td><a href="#">Free</a></td> <td><a href="#">一起走到</a></td> <td><a href="#">从明天起</a></td> <td><a href="#">纸飞机</a></td> <td><a href="#">下一站</a></td> </tr> </table> </body> </html>
按钮式超链接:
<html> <head> <title>按钮超链接</title> <style> <!-- a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px; } a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #ecd8db; 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:#e2c4c9; /* 改变背景色 */ border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; } --> </style> </head> <body> <a href="#">首页</a> <a href="#">心情日记</a> <a href="#">学习心得</a> <a href="#">工作笔记</a> <a href="#">生活琐碎</a> <a href="#">其他</a> </body> </html>
浮雕超链接：
<html> <head> <title>浮雕超链接</title> <style> body{ padding:0px; margin:0px; background-color:#f5eee1; } table.banner{ background:url(banner1_bg.jpg) repeat-x; width:100%; } table.links{ background:url(button1_bg.jpg) repeat-x; font-size:12px; width:100% } a{ width:80px; height:32px; padding-top:10px; text-decoration:none; text-align:center; background:url(button1.jpg) no-repeat; /* 超链接背景图片 */ } a:link{color:#654300;} a:visited{color:#654300;} a:hover{ color:#FFFFFF; text-decoration:none; background:url(button2.jpg) no-repeat; /* 变换背景图片 */ } </style> </head> <body> <table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner1_left.jpg" border="0"></td></tr> </table> <table cellpadding="0" cellspacing="0" class="links"> <tr><td><a href="#">首页导读</a><a href="#">在线用户</a><a href="#">查询网友</a><a href="#">在线好友</a><a href="#">好友名单</a><a href="#">查看讯息</a><a href="#">发送讯息</a></td></tr> </table> </body> </html>
变形鼠标形状：
参考：
来自：http://www.cnblogs.com/jian1982/archive/2011/08/03/2125873.html
cursor:hand 与 cursor:pointer 的效果是一样，都像手形光标。但用FireFox浏览时才注意到使用cursor:hand在FireFox里并被支持。
cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。
cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。
附：cursor属性收集
光标类型 CSS
十字准心 cursor: crosshair;
手 cursor: pointer;
cursor: hand;
写两个是为了照顾IE5，它只认hand。
等待/沙漏 cursor: wait;
帮助 cursor: help;
无法释放 cursor: no-drop;
文字/编辑 cursor: text;
可移动对象 cursor: move;
向上改变大小(North) cursor: n-resize;
向下改变大小(South) cursor: s-resize;
向右改变大小(East) cursor: e-resize;
向左改变大小(West) cursor: w-resize;
向上右改变大小(North East) cursor: ne-resize;
向上左改变大小(North West) cursor: nw-resize;
向下右改变大小(South East) cursor: se-resize;
向下左改变大小(South West) cursor: sw-resize;
自动 cursor: auto;
禁止 cursor:not-allowed;
处理中 cursor: progress;
系统默认 cursor: default;
用户自定义（可用动画） cursor: url(‘ # ‘);
# = 光标文件地址 (注意文件格式必须为：.cur 或 .ani)。
例如：
<html> <head> <title>鼠标变幻超链接</title> <style> <!-- body{ padding:0px; margin:0px; background-color:#efe5e2; } table.banner{ background:url(banner2_bg.jpg) repeat-x; width:100%; } table.links{ background:url(button3_bg.jpg) repeat-x; font-size:12px; width:100% } a{ width:80px; height:32px; padding-top:10px; text-decoration:none; text-align:center; background:url(button3.jpg) no-repeat; /* 超链接背景图片 */ } a:link, a visited{color:#2d2d26;} a:hover{ color:#FFFFFF; text-decoration:none; background:url(button4.jpg) no-repeat; /* 变换背景图片 */ } a.help:hover{ /* “帮助”按钮的样式 */ cursor:help; /* 变幻鼠标形状 */ } --> </style> </head> <body> <table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner2_left.jpg" border="0"></td></tr> </table> <table cellpadding="0" cellspacing="0" class="links"> <tr><td><a href="#">首页导读</a><a href="#">推荐版面</a><a href="#">推荐文章</a><a href="#">收藏夹</a><a href="#">我的信箱</a><a href="#">休闲娱乐</a><a href="#" class="help">帮助</a></td></tr> </table> </body> </html>