源码网盘
根据慕课网做的css3小特效导航栏，图标以不同方式显示
页面布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/go.html?url=css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/go.html?url=css/style.css"/>
</head>
<body>
<div class="nav">
<ul>
<li>
<a class="tooltip tooltip-effect-1" href="/go.html?url=#">Home
<span class="tooltip-content">
<i class="fa fa-fw fa-home"></i>
</span>
</a>
</li>
<li>
<a class="tooltip tooltip-effect-2" href="/go.html?url=#">About me
<span class="tooltip-content">
<i class="fa fa-fw fa-user"></i>
</span>
</a>
</li>
<li>
<a class="tooltip tooltip-effect-3" href="/go.html?url=#">Photography
<span class="tooltip-content">
<i class="fa fa-fw fa-camera-retro"></i>
</span>
</a>
</li>
<li>
<a class="tooltip tooltip-effect-4" href="/go.html?url=#">Work
<span class="tooltip-content">
<i class="fa fa-fw fa-briefcase"></i>
</span>
</a>
</li>
<li>
<a class="tooltip tooltip-effect-5" href="/go.html?url=#">Contact
<span class="tooltip-content">
<i class="fa fa-fw fa-envelope"></i>
</span>
</a>
</li>
</ul>
</div>
</body>
</html>页面布局
&
