CSS精灵范例

黄振国 · 发表于 2015-12-26 21:45:33

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div#tools h5 {
margin: 0 0 10px 0;
padding: 0;
overflow:hidden;
}

div#tools h5#tools_reference, div#tools h5#tools_quiz {
text-indent: -9999px;
width: 120px;
height: 45px;
}

div#tools h5#tools_reference a,  div#tools h5#tools_quiz a {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-decoration: none;
}

div#tools h5#tools_reference a {
background: transparent url(http://www.nowamagic.net/csszone/images/site_reference.gif) top left no-repeat;
}

div#tools h5#tools_reference a:hover {
background: transparent url(http://www.nowamagic.net/csszone/images/site_reference.gif) 0 -45px no-repeat;
}

div#tools h5#tools_quiz a {
background: transparent url(http://www.nowamagic.net/csszone/images/site_quiz.gif) top left no-repeat;
}

div#tools h5#tools_quiz a:hover {
background: transparent url(http://www.nowamagic.net/csszone/images/site_quiz.gif) 0 -45px no-repeat;
}
</style>
</HEAD>

<BODY>

<div id="tools">
  <h5 id="tools_reference"><a href="">PHP 参考手册</a></h5>
  <h5 id="tools_quiz"><a href="">PHP 测验</a></h5>
</div>

</BODY>
</HTML>

		自动登录	找回密码
密码			立即注册

[基础操作] CSS精灵范例

浏览过的版块