相信大家都用过导航网站吧,我也不例外。但是,有一天突发奇想,为什么不给自己做一个导航呢,曾经有那么多的本地或在线API,每次用的时候都得找半天,现在建了个小导航页,一目了然了,哈哈!
这就是我的导航页源码,真情奉送:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我的主页 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 >
这就是最终效果: