欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-23 15:37:13
...
相信大家都用过导航网站吧,我也不例外。但是,有一天突发奇想,为什么不给自己做一个导航呢,曾经有那么多的本地或在线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 >

这就是最终效果: