动态的超链接：
<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>
