<!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 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浏览器下看到的是方形的。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。