|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> body { margin:0; padding:0 } .menu { list-style:none; margin:0; float:right; } .menu li { float:left; margin:0 auto; cursor:pointer; height:30px; padding:30px 5px 5px 5px; margin:0px 3px; -moz-border-radius:0px 0px 5px 5px; -webkit-border-radius:0px 0px 5px 5px; background-color:#B1CCED; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); color: #FFF; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); font-family: "Lucida Grande",Lucida,Verdana,sans-serif; font-size:13px; font-weight:bold; text-transform:uppercase; } </style> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function () { var moveTop = '60px'; var moveout = '30px'; var bgColor = '#B1CCED'; var bgmovecolor = '#7FB0F0'; var obj = $(this); var items = $("li", obj); items.mouseover(function () { $(this).animate({ paddingTop: moveTop }, 500); $(this).css('background-color', bgmovecolor); $(this).css({color: '#e0e0e0'}); }).mouseout(function () { $(this).animate({ paddingTop: moveout }, 500); $(this).css('background-color', bgColor); $(this).css({color: '#fff'}); }); }); </script> </head> <body> <ul class="menu"> <li>About us</li> <li>Contacts</li> <li>Others</li> <li>Products</li> <li>Portfolio</li> <li>Testemonies</li> </ul> </body> </html> 其中那些图角css样式在ie并不适用，所以在ie浏览器下看到的是方形的。
|
|
|
