CSS设置按钮式超链接
网页上有很多超链接都是按钮的形式,这些都使用了各种图片,这里通过CSS普通的属性实现按钮的效果。
首先,建立最简单的HTML页面,代码如下:
<table width="600px"cellpadding="2" class="chara1" align="center">
<tr>
<td><ahref="#">首页</a></td>
<td><ahref="#">心情日记</a></td>
<td><ahref="#">学习心得</a></td>
<td><ahref="#">工作笔记</a></td>
<td><ahref="#">生活琐碎</a></td>
<td><ahref="#">其他</a></td>
</tr>
</table>
然后,CSS对<a>标记整体控制,加入CSS的3个伪属性,对于普通超链接和点击过的超链接采用同样的样式,并且,利用边框的样式模拟按钮的效果。
鼠标经过时,改变文字的颜色,背景色、位置和边框等等,从而,模拟按钮按下去的效果。
<html>
<head>
<title>
</title>
<style>
<!--
a{
font-family:Arial;
font-size:.8em;
text-align:center;
margin:3px;
}
a:link,a:visited{
color:#a62020;
padding:4px10px 4px 10px;
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:5px8px 3px 12px;
background-color:#e2c4c9;
border-top:1pxsolid #717171;
border-left:1pxsolid #717171;
border-bottom:1pxsolid #eeeeee;
border-right:1pxsolid #eeeeee;
}
-->
</style>
</head>
<body>
<tablewidth="600px" cellpadding="2" class="chara1"align="center">
<tr>
<td><ahref="#">首页</a></td>
<td><ahref="#">心情日记</a></td>
<td><ahref="#">学习心得</a></td>
<td><ahref="#">工作笔记</a></td>
<td><ahref="#">生活琐碎</a></td>
<td><ahref="#">其他</a></td>
</tr>
</table>
</body>
</html>
通过对3个伪属性的颜色、背景色和边框的修改,模拟了按钮的效果。