做一个自己的导航页，立即行动吧！
相信大家都用过导航网站吧，我也不例外。但是，有一天突发奇想，为什么不给自己做一个导航呢，曾经有那么多的本地或在线API，每次用的时候都得找半天，现在建了个小导航页，一目了然了，哈哈！
这就是我的导航页源码，真情奉送：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/> 5 <title>我的主页</title> 6 <style type="text/css"> 7 .main { 8 margin-top: 50px; 9 background-color: #D9FF99; 10 } 11 12 .title { 13 font-size: 40px; 14 color: #CC6633; 15 font-family: "汉真广标", "幼圆", "微软雅黑", sans-serif; 16 text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); 17 } 18 19 .content ul { 20 display: block; 21 width: 960px; 22 height: 400px; 23 list-style-type: none; 24 margin: 0; 25 padding: 20px 0px; 26 } 27 28 .content li { 29 display: block; 30 width: 192px; 31 height: 100px; 32 float: left; 33 text-align: center; 34 font-family: consolas,"微软雅黑", sans-serif; 35 font-size: 24px; 36 } 37 38 .content li a { 39 display: block; 40 width: 140px; 41 height: 60px; 42 color: white; 43 text-align: center; 44 line-height: 60px; 45 background-color: green; 46 text-decoration: none; 47 margin: 18px 25px; 48 border: 1px solid #CCC; 49 } 50 51 .content li a:hover { 52 background-color: #0C0C35; 53 } 54 </style> 55 </head> 56 <body> 57 <table width="960" border="0" cellpadding="0" cellspacing="0" class="main" align="center"> 58 <tr> 59 <td> 60 <table width="960" border="0" cellspacing="0" cellpadding="0"> 61 <tr> 62 <td width="382"><img 63 src="//images0.cnblogs.com/blog/343602/201310/28113106-18da6293d7a44fed97ce8b1dadaa6c30.jpg" 64 width="382" height="101" border="0"/></td> 65 <td width="578" align="center" bgcolor="#D5EDB3"><span class="title">我 的 主 页</span></td> 66 </tr> 67 </table> 68 </td> 69 </tr> 70 <tr height="10"> 71 <td bgcolor="#004000"></td> 72 </tr> 73 <tr> 74 <td class="content"> 75 <ul> 76 <!-- 这一块是本地API文档链接，大家相应的修改一下 --> 77 <li><a href="jquery/index.html">jQuery</a></li> 78 <li><a href="android/index.html">Android</a></li> 79 <li><a href="hibernate/index.html">Hibernate</a></li> 80 <li><a href="groovy-api/index.html">Groovy</a></li> 81 <li><a href="grails/index.html">Grails</a></li> 82 <li><a href="five/index.html">HTML5</a></li> 83 <li><a href="bootstrap/index.html">Bootstrap</a></li> 84 <ul> 85 </td> 86 </tr> 87 </table> 88 </body> 89 </html>
这就是最终效果：
