CSS3模拟apple苹果官方网站导航

最新推荐文章于 2024-04-09 09:41:00 发布

android_hasen

最新推荐文章于 2024-04-09 09:41:00 发布

阅读量1.6k

点赞数

分类专栏： java 文章标签： java html 导航

java 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<style type="text/css">
body { font-family:Arial; font-size:12px; color:#4b4b4b; text-align:center; }
* { padding:0px; margin:0px; }
ul { list-style:none; }
#nav { position:relative; margin-left:auto; margin-right:auto; text-align:left; width:960px; height:38px; margin-

top:15px; overflow:hidden;
border:0px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
box-shadow: inset 0 0 1px #fff;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
background:#c2c2c2;
background:-moz-linear-gradient(center top, rgba(100,100,100,1), rgba(113,113,113,0.9) 49%, rgba(90,90,90,0.9) 50%, 

rgba(116,116,116,1));
background:-webkit-gradient(linear, center top, center bottom, from(rgba(100,100,100,1)), color-stop(49%,rgba

(113,113,113,0.9)), color-stop(50%,rgba(90,90,90,0.9)), to(rgba(116,116,116,1)));
background:-o-linear-gradient(top, rgba(100,100,100,1), rgba(113,113,113,0.9) 49%, rgba(90,90,90,0.9) 50%, rgba

(116,116,116,1));
}
#nav li { display:block; color:#ffffff; width:100px; height:36px; text-align:center; border-right:solid 1px #5b5b5b; 

float:left; padding-top:8px; }
#nav li a { text-shadow:#000 1px 1px 1px; color:#ffffff; font-size:13px; text-decoration:none;
font-family:"Lucida Sans Unicode"; vertical-align:middle;
-webkit-transition:-webkit-transform 0.6s linear, color 0.3s linear, text-shadow 0.4s linear;
-moz-transition:-moz-transform 0.6s linear, color 0.3s linear, text-shadow 0.4s linear;
-o-transition:-o-transform 0.6s linear, color 0.3s linear, text-shadow 0.4s linear;
}
#nav li a:hover {
-webkit-transform:scale(1.5,1);
-moz-transform:scale(1.5,1);
-o-transform:scale(1.5,1);
color:darkred;
text-shadow:#111111 2px 2px 2px;
}
#nav input { display:block; width:120px; float:left; margin-top:8px; background:transparent; height:20px; margin-

left:15px;
vertical-align:middle; font-family:"sans-serif"; font-size:14px; text-indent:26px;
border:0px;
border-bottom:inset 1px #353535;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-o-border-radius:8px;
box-shadow:inset 0px 2px 1px #353535;
-moz-box-shadow:inset 0px 2px 1px #353535;
-webkit-box-shadow:inset 0px 2px 1px #353535;
background:url(http://www.webjx.com/files/120703/1_014000.png) no-repeat bottom left;
}
</style>
<title>CSS3模拟apple苹果官方网站导航</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.webjx.com">Index</a></li>
<li><a href="http://www.webjx.com/">Store</a></li>
<li><a href="http://www.webjx.com/">Mac</a></li>
<li><a href="http://www.webjx.com/">iPod</a></li>
<li><a href="http://www.webjx.com/">iPhone</a></li>
<li><a href="http://www.webjx.com/">iPad</a></li>
<li><a href="http://www.webjx.com/">iTunes</a></li>
<li><a href="http://www.webjx.com/">Support</a></li>
</ul>
<input type="text" id="kw" value='' />
</div>
</body>
</html>