html中的底部导航栏,html中导航栏固定在头部或者底部

demo

.body{

width: 98%;

height: 200%;

}

.nav{

background: url("global_nav_bg.png") repeat-x scroll 0 0 transparent;

height: 35px;

width: 100%;

z-index: 9998;

position: fixed;

left: 0px;

}

.top{

top: 0px;

}

.bottom{

bottom: 0px;

}

.nav ul{

display: inline;

float: left;

font-size: 14px;

margin: 0 0 0 163px;

}

.nav ul li{

list-style: none outside none;

padding: 0 0 0 2px;

display: inline;

float: left;

position: relative;

z-index: 9998;

color: #FFFFFF;

display: inline-block;

height: 16px;

line-height: 16px;

padding: 9px 10px 8px;

}

ul li a:active, ul li a:link, ul li a:visited{

color: #FFFFFF;

text-decoration: none;

}

ul li a:hover{

color: #FF0000;

text-decoration: underline;

}

• 百度

• 新浪

• 雅虎

• 腾讯

• 人人

• 百度

• 新浪

• 雅虎

• 腾讯

• 人人

需要用到的图片global_nav_bg.png