动态的超链接：

<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>

HTML与CSS（图解6）：超链接相关推荐

  1. CSS a控制超链接文字样式

    超链接的代码 <a href="http://www.divcss5.com/" target="_blank" title="关于div cs ...

  2. CSS设置按钮式超链接

    CSS设置按钮式超链接 网页上有很多超链接都是按钮的形式,这些都使用了各种图片,这里通过CSS普通的属性实现按钮的效果. 首先,建立最简单的HTML页面,代码如下: <table width=& ...

  3. CSS设置动态超链接

    CSS设置动态超链接 HTML中,超链接是通过标记<a>实现的,具体的地址使用标记<a>的href属性. <ahref="http://blog.csdn.ne ...

  4. html文字超链接不让变色,css不让超链接变色怎么设置？

    [相关推荐:css在线手册] 链接有四个状态a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被 ...

  5. Html字母变大的代码,css鼠标选中字体变大 div css鼠标悬停超链接的文字变大

    css鼠标选中字体变大 css鼠标悬停超链接的文字变大 CSS布局鼠标悬停在超链接上字体变大,css实现鼠标经过锚文本文字时改变字体大小篇. 实现这一效果需要的是:hover伪类设置需要字体. 鼠标选 ...

  6. html超链接点击不,css怎么设置超链接不可点击

    css设置超链接不可点击的方法:首先通过"cursor:pointer;"属性使鼠标变成箭头:然后通过"pointer-events:none;"属性使超链接失 ...

  7. 在html中加粗字体的文本链接,css如何设置超链接字体加粗效果

    css如何设置超链接字体加粗效果 发布时间:2020-11-18 10:23:39 来源:亿速云 阅读:140 作者:小新 小编给大家分享一下css如何设置超链接字体加粗效果,希望大家阅读完这篇文章后 ...

  8. css如何设置超链接样式

    css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性. (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性. (3) :hover:设置 ...

  9. css 超链接的颜色,用css样式控制超链接颜色显示

    用css样式控制超链接颜色显示 用css样式控制超链接颜色显示,阅读用css样式控制超链接颜色显示,很多人在网页上实现不同链接有不同的颜色上不知如何处理,如果改a的属性,好像所有的链接的颜色都改了.事 ...

  10. CSS之【超链接伪类】

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

最新文章

  1. Java之——java.lang.NoSuchMethodException: [org.springframework.web.multipart.MultipartFile;.()
  2. Oracle 把游标说透
  3. 如何传输文件到linux服务器？
  4. 3.js模式-策略模式
  5. linux 修改当前系统时间
  6. 新建文本文档好玩的代码_(03)用什么工具写ASP源代码？
  7. 什么是网络爬虫python_什么的什可以组什么词语
  8. 关于equals和hashCode
  9. 总结的几个cocoapods的几个常见问题
  10. 拍照区域遮盖层_真石漆与一般涂料所用外墙腻子层，有什么区别？
  11. NLog文章系列——入门教程(转)
  12. Abaqus槽钢杆受力有限元分析
  13. 完全背包问题(详细解答)
  14. Bada学习-bada测试服务器
  15. GD32F10x的窗口看门狗定时器
  16. QQ音乐爬虫之放弃的路
  17. 浅谈如何在优麒麟22.04中使用Eigenstrat和Plink工具生成类23andMe格式原始数据
  18. 2010年研究生答案Q278046046
  19. 【学习笔记】builtin函数
  20. 请等待您的伙伴确认该请求_您想成为产品负责人吗？您最好知道等待什么

热门文章

  1. python(16)-列表list,for循环
  2. 《UNIX环境高级编程 3rd》笔记（1 / 21）：UNIX基础知识
  3. STL源码剖析 数值算法 copy 算法
  4. C++ primer第六章6.6函数匹配
  5. C++11 explicit关键字的作用
  6. 如何调整反光镜和座椅的位置 为您支招
  7. 项目经理如何把工作简单化
  8. R 读取excel的方法
  9. 【重点突破】—— React实现富文本编辑器
  10. 2018.8.26 Spring自学如门