查看文章 |
闲来小研css sprite from:www.alistapart.com/articles/sprites
2009-06-11 08:42
<html> <head> <link rel="stylesheet" href="css.css" type="text/css" media="all" /> </head> <body> <ul id="skyline"> <li id="panel1b"><a href="#1"></a></li> <li id="panel2b"><a href="#2"></a></li> <li id="panel3b"><a href="#3"></a></li> <li id="panel4b"><a href="#4"></a></li> </ul> </body> </html> /*下面是css*/ #skyline { width: 400px; height: 200px; background: url(test-3.jpg); margin: 10px auto; padding: 0; position: relative;} #skyline li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} #skyline li, #skyline a { height: 200px; display: block;} #panel1b {left: 0; width: 95px;} #panel2b {left: 96px; width: 75px;} #panel3b {left: 172px; width: 110px;} #panel4b {left: 283px; width: 117px;} #panel1b a:hover { background: transparent url(test-3.jpg) 0 -200px no-repeat;} #panel2b a:hover { background: transparent url(test-3.jpg) -96px -200px no-repeat;} #panel3b a:hover { background: transparent url(test-3.jpg) -172px -200px no-repeat;} #panel4b a:hover { background: transparent url(test-3.jpg) -283px -200px no-repeat;}  |
最近读者：
