【墨夜拎月 · web1.0 】使用a链接实现导航 ![](https://p3-juejin.byteimg.com/

<html>

<head>

<title>动态超链接</title>

<style>

<!--

body{

    background:url(bg9.gif);    /* 页面背景图片 */

    margin:0px; padding:0px;

    cursor:pointer;

}

.chara1{

    font-size:12px;

    background-color:#90bcff;   /* 导航条的背景颜色 */

}

.chara1td{

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

    <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:4px10px4px10px;

    background-color: #ecd8db;

    text-decoration: none;

    border-top: 1pxsolid#EEEEEE;      /* 边框实现阴影效果 */

    border-left: 1pxsolid#EEEEEE;

    border-bottom: 1pxsolid#717171;

    border-right: 1pxsolid#717171;

}

a:hover{                                /* 鼠标经过时的超链接 */

    color:#821818;                      /* 改变文字颜色 */

    padding:5px8px3px12px;           /* 改变文字位置 */

    background-color:#e2c4c9;           /* 改变背景色 */

    border-top: 1pxsolid#717171;      /* 边框变换，实现“按下去”的效果 */

    border-left: 1pxsolid#717171;

    border-bottom: 1pxsolid#EEEEEE;

    border-right: 1pxsolid#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:#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>