精通 CSS+DIV 网页样式与布局 77_网页设计首页 free 一起走到纸飞机-优快云博客

本文链接：https://blog.youkuaiyun.com/myjnt/article/details/53510211

本文介绍了一种HTML超链接样式的设置方法，包括正常状态、被访问过及鼠标悬停时的状态样式。通过CSS实现了美观且实用的按钮式超链接效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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