专注前端素材！
源代码：
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>素材8网教程(study.sucai8.cn)</title> <style> #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites_hover.gif') 0 0;} #home a:hover{background: url('/images/img_navsprites_hover.gif') 0 -45px;} #prev{left:63px;width:43px;} #prev{background:url('/images/img_navsprites_hover.gif') -47px 0;} #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next{left:129px;width:43px;} #next{background:url('/images/img_navsprites_hover.gif') -91px 0;} #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="#"></a></li> <li id="prev"><a href="#"></a></li> <li id="next"><a href="#"></a></li> </ul> </body> </html>
运行结果