网易邮箱按钮,简单制作 css

作者：简简单单 2008-02-28

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>^_^ == http://www.macji.com</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>" media="all">
/* 原谅我,为了方便把图片做成一张了 */
body{margin:100px}
a{display:block; /*这里我直接写死了*/  padding:0 0 0 15px; font:12px/29px Arial; color:#555; background:url(http://www.macji.com/img/bg_icon.gif) no-repeat 0 30px}
a span{display:block; padding:0 15px 0 0; background:url(http://www.macji.com/img/bg_icon.gif) no-repeat right 30px}
a:hover{background-position:0 -29px}
a:hover span{background-position:right -29px}
a:active{background-position:0 0}
a:active span{padding:1px 0 0 1px; background-position:right 0}
em{display:block; padding:0 0 0 25px; font-style:normal; background:url(http://www.macji.com/img/bg_icon.gif) no-repeat 0 -60px}
</style>
</head>
<body>
<a href="javascript:;" onclick="this.blur();"><span><em>按下</em></span></a>
</body>
</html>

提示：您可以先修改部分代码再运行

网易邮箱按钮,简单制作 css

相关文章

精彩推荐