因为有些功能是链接不能实现的,而有些功能按钮实现起来又麻烦。所以在项目的导航中想放入统一的链接或者按钮来实现全部功能是很麻烦的事情,所以我们就有了将按钮伪装成链接样式的需求。
网上Copy了一个,以下是代码,效果还是不错。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" / >
<title >无标题文档</title >
<style type="text/css" >
body {
font-family: "Verdana" sans-serif;
}
a:link,
a:visited {
color: blue;
}
a:hover,
a:focus,
a:active {
color: black;
}
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: black;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
}
-moz-user-select: text;
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: blue;
}
</style >
</head >
<body >
<form action="#" method="post" >
<p ><button type="submit" class="link" ><span >I am a button</span ></button ></p >
</form >
<p ><a href="#" >That's nice, I am a link</a ></p >
</body >
</html >
顣槝峇 Rd栧?R0_N/f