做一个自己的导航页，立即行动吧！_html/css_WEB-ITnose

相信大家都用过导航网站吧，我也不例外。但是，有一天突发奇想，为什么不给自己做一个导航呢，曾经有那么多的本地或在线API，每次用的时候都得找半天，现在建了个小导航页，一目了然了，哈哈！

这就是我的导航页源码，真情奉送：

< html xmlns = "http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=GB2312" />

< title >我的主页

< style type = "text/css" >

.main {

margin-top: 50px;

background-color: #D9FF99;

.title {

font-size: 40px;

color: #CC6633;

font-family: "汉真广标", "幼圆", "微软雅黑", sans-serif;

text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5);

.content ul {

display: block;

width: 960px;

height: 400px;

list-style-type: none;

margin: 0;

padding: 20px 0px;

.content li {

display: block;

width: 192px;

height: 100px;

float: left;

text-align: center;

font-family: consolas,"微软雅黑", sans-serif;

font-size: 24px;

.content li a {

display: block;

width: 140px;

height: 60px;

color: white;

text-align: center;

line-height: 60px;

background-color: green;

text-decoration: none;

margin: 18px 25px;

border: 1px solid #CCC;

.content li a:hover {

background-color: #0C0C35;

< body >

< table width = "960" border = "0" cellpadding = "0" cellspacing = "0" class = "main" align = "center" >

< tr >

< td >

< table width = "960" border = "0" cellspacing = "0" cellpadding = "0" >

< tr >

< td width = "382" >< img

src = "http://images.cnitblog.com/blog/343602/201310/28113106-18da6293d7a44fed97ce8b1dadaa6c30.jpg"

width = "382" height = "101" border = "0" />

< td width = "578" align = "center" bgcolor = "#D5EDB3" >< span class = "title" >我 的 主 页

< tr height = "10" >

< td bgcolor = "#004000" >

< tr >

< td class = "content" >

< ul >

< li >< a href = "jquery/index.html" >jQuery

< li >< a href = "android/index.html" >Android

< li >< a href = "hibernate/index.html" >Hibernate

< li >< a href = "groovy-api/index.html" >Groovy

< li >< a href = "grails/index.html" >Grails

< li >< a href = "five/index.html" >HTML5

< li >< a href = "bootstrap/index.html" >Bootstrap

< ul >

这就是最终效果：