TA的每日心情 | 衰
2024-12-4 11:15 |
|---|
签到天数: 75 天 连续签到: 1 天 [LV.6]常住居民II
|
马上注册，下载更多源码！
您需要 登录 才可以下载或查看，没有账号？立即加入
x
本帖最后由 wjd19862 于 2013-10-20 19:13 编辑
用HTML5+CSS3制作的网页导航特效，此代码是模仿的apple苹果官方网站的导航，比较粗糙一些，喜欢的网页教学网的网友可以自己美化代码达到自己想要的效果。
<!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://ctc.qzs.qq.com/qzone/phot ... 1Ks7ssMwJ9aYpkqAAA!) no-repeat bottom left;
}
</style>
<title>CSS3模拟apple苹果官方网站导航_</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.xydai.cn/">Index</a></li>
<li><a href="http://www.xydai.cn/">Store</a></li>
<li><a href="http://www.xydai.cn/">Mac</a></li>
<li><a href="http://www.xydai.cn/">iPod</a></li>
<li><a href="http://www.xydai.cn/">iPhone</a></li>
<li><a href="http://www.xydai.cn/">iPad</a></li>
<li><a href="http://www.xydai.cn/">iTunes</a></li>
<li><a href="http://www.xydai.cn/">Support</a></li>
</ul>
<input type="text" id="kw" value='' />
</div>
</body>
</html> |
评分
-
查看全部评分
|
[复制链接]
新源代有你更给力！！！！
