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

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

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

我的主页 title >

.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;

style >

head >

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

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

我 的 主 页 span > td >

tr >

table >

td >

tr >

td >

tr >

jQuery a > li >

Android a > li >

Hibernate a > li >

Groovy a > li >

Grails a > li >

HTML5 a > li >

Bootstrap a > li >

td >

tr >

table >

body >

html >

这就是最终效果：