I believe everyone has used navigation websites, and I am no exception. However, one day I suddenly thought, why not make a navigation for myself? There used to be so many local or online APIs, and it took me a long time to find them every time I used them. Now I have built a small navigation page, which is clear at a glance, haha!
This is the source code of my navigation page, a sincere gift:
< html xmlns = "http://www.w3 .org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=GB2312" / >
< title >My Homepage title >
< style type = "text/css" >
.main {
margin-top: 50px;
background-color: #D9FF99;
.title {
font-size: 40px;
color: #CC6633;
font-family: "汉正光典", "小元", "Microsoft亚黑", 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,"Microsoft Yahei", 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; : 1px solid #CCC;
.content li a:hover {
background-color: #0C0C35;
style >
head >
< body >
< table width = "960" border = "0" cellpadding = "0" cellspacing = "0" class = "main " align = "center" >
< tr >
< 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 >
< td width = "578" align = "center" bgcolor = "#D5EDB3" >< span class = "title" >我 的 主 页 span > td >
tr >
table >
td >
tr >
< tr height = "10" >
< td bgcolor = "#004000" > td >
tr >
< tr >
< td class = "content" >
< ul >
< li >< a href = "jquery/index.html" >jQuery a > li >
< li >< a href = "android/index.html" >Android a > li >
< li >< a href = "hibernate/index.html" >Hibernate a > li >
< li >< a href = "groovy-api/index.html" >Groovy a > li >
< li >< a href = "grails/index.html" >Grails a > li >
< li >< a href = "five/index.html" >HTML5 a > li >
< li >< a href = "bootstrap/index.html" >Bootstrap a > li >
< ul >
td >
tr >
table >
body >
html >
这就是最终效果: