[CSS]制作按钮式超链接

首先，跟所有HTML页面一样，建立最简单的菜单结构，本例直接采用<a>标记排列形式，代码如下：

<body>
 <a href="#">首页</a>
    <a href="#">一起走到</a>
    <a href="#">从明天起</a>
    <a href="#">纸飞机</a>
    <a href="#">下一站</a>
    <a href="#">门</a>
    <a href="#">其他</a>
</body>

此时页面效果如下图所示，仅仅只是几个普通的超链接的堆砌。

然后对<a>标记进行整体控制，同时加入CSS的3个伪属性。对于普通超链接和单击过的超链接采用同样的样式风格，并且利用边框的样式模拟按钮效果。而对于鼠标指针经过时的超链接，相应地改变文字颜色、背景色、位置和边框，从而模拟出按钮被“按下去”的特效，代码如下：

<style type="text/css">
a{      /* 统一设置所以样式 */
     font-family:Arial;
     font-size:12px;
     text-align:center;
     margin:3px;
}
a:link,a:visited{  /* 超链接正常状态、被访问过的样式 */
    color:#A62020;
    padding:4px 10px 4px 10px;
    background-color:#ecd8bd;
    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>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。