<!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>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
background: url(images/apple1.jpg) center no-repeat;
padding: 0;
margin:0;
}
ul.osx-dock {
display: inline-block;
height: 130px;
padding: 0 40px 00;
overflow: hidden;
margin: 0 0 040px;
}
ul.osx-dock li {
display: block;
position: relative;
float: left;
width: 50px;
height: 50px;
margin: 60px 04px 0;
-webkit-transition: 0.15slinear;
-webkit-transition-property: -webkit-transformmargin;
text-align: center;
}
ul.osx-dock lia {
display: block;
height: 50px;
padding: 0 1px;
-webkit-transition: 0.15slinear;
-webkit-transition-property: -webkit-transformmargin;
margin: 0;
-webkit-Box-reflect: below2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.45,transparent),to(rgba(255,255,0.25)));
}
ul.osx-dock lia img { width: 48px; }
ul.osx-dock li:hover {
margin-left: 9px;
margin-right: 9px;
z-index: 200;
}
ul.osx-dock li:hovera {
-webkit-transform-origin: centerbottom;
-webkit-transform: scale(1.5);
}
ul.osx-dock lispan {
position: absolute;
bottom: 80px;
margin: 0 auto;
display: none;
width: auto;
font-size: 11px;
font-weight: bold;
padding: 3px 6px;
-webkit-border-radius: 6px;
color: #fff;
}
ul.osx-dock li:hoverspan { display: block; }
div#dockContainer {
position: fixed;
bottom: 12px;
height: 120px;
padding: 50px 0 0;
text-align: center;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
width: 100%;
line-height: 1;
z-index: 100;
}
div#dockWrapper {
width: auto;
display: inline-block;
position: relative;
border-bottom: solid2px rgba(255,.35);
line-height: 0;
}
</style>
</head>
<body>
<div id="dockContainer">
<div id="dockWrapper">
<ul class="osx-dock">
<li class="active"> <span>ZURB</span> <a href="#"title="ZURB"><img src="images/zurb-icon.png"/></a> </li>
<li> <span>LinkedIn</span> <a href="#" title="LinkedIn"><img src="images/linkedin-icon.png" /></a> </li>
<li> <span>Notable</span> <a href="#" title="Notable"><img src="images/notable-icon.png" /></a> </li>
<li> <span>last.fm</span> <a href="#" title="Last.fm"><img src="images/lastfm-icon.png" /></a> </li>
<li> <span>Facebook</span> <a href="#" title="Facebook"><img src="images/facebook-icon.png" /></a> </li>
<li> <span>Google</span> <a href="#" title="Google"><img src="images/google-icon.png" /></a> </li>
<li> <span>Notable</span> <a href="#" title="Notable"><img src="images/notable-icon.png" /></a> </li>
<li> <span>last.fm</span> <a href="#" title="Last.fm"><img src="images/lastfm-icon.png" /></a> </li>
<li> <span>Facebook</span> <a href="#" title="Facebook"><img src="images/facebook-icon.png" /></a> </li>
<li> <span>Google</span> <a href="#" title="Google"><img src="images/google-icon.png" /></a> </li>
</ul>
</div>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
