HTML和CSS(图6):超链接

顺晟科技

2022-09-13 14:09:52

动态的超链接：

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

上一篇：超链接的四种样式 --ZT 十天学下一篇：HTML - CSS样式表-基本概念

网站建设

Css

HTML和CSS(图6):超链接