<html> <head> <style type="text/css"> #nav{ margin:10px; } #nav ul{ float:left; border-left:1px solid #666; list-style:none; } #nav li{ float:left; border:1px solid #666; border-left:0; } #nav li a{ display:block; text-align:center; line-height:20px; height:20px; width:60px; color:#039; text-decoration:none; background:#3CF url(/i/eg_smile.gif) no-repeat; } #nav li a:hover{ color:#FFF; background-color:#90F; background-position:left bottom;//background-position初始值为0，即图片左上角与li边框的左上角重合，left bottom表示图片左 //下角与li边框的左下角重合,实现链接背景图片滑动效果 } </style> </head> <body> <div id=nav> <ul> <li><a href="#" mce_href="#" title="回到首页">首页</a></li> <li><a href="#" mce_href="#" title="访问博客">博客</a></li> <li><a href="#" mce_href="#" title="访问论坛">论坛</a></li> </ul> </div> </body> </html>
效果使用http://www.w3school.com.cn/ 的TIY工具查看。
转自《别具光芒》
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
