雪碧+滑动门,自适应宽度菜单
近一个周来学习CSS+DIV(web标准),做了不少例子,感觉对HTML有了新的认识,本人觉得css Sprites技术很重要,优点,减少文件体积,减少客户端对服务器的访问次数,提高效率。本文出自:十天学会DIV+CSS(WEB标准)
效果图:
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> *{margin:0px;padding:0px;border:none;} #content{margin:60px auto;} #content ul{list-style:none;} #content ul li{float:left;margin-left:5px;height:34px;text-align:center;line-height:34px;background-image:url("/Images/btn_bg.gif");background-repeat:no-repeat;background-position:left 0px;padding-left:10px;} #content ul li a{text-decoration:none; display:block;background-image:url("/Images/btn_bg.gif");background-repeat:no-repeat;background-position:right 0px;padding-right:10px;} #content ul li:hover{background-image:url("/Images/btn_bg.gif");background-repeat:no-repeat;background-position:left -37px;} #content ul li:hover a{background-image:url("/Images/btn_bg.gif");background-repeat:no-repeat;background-position:right -37px;} </style> </head> <body> <div id="content"> <ul> <li><a href="#">首页</a></li> <li><a href="#">免费注册</a></li> <li><a href="#">登录</a></li> </ul> </div> </body> </html>
注:有兴趣,可以访问:标准之路(http://www.aa25.cn)