html中导航栏固定在头部或者底部代码,Css代码库,德仔网

代码语言

代码分类

【Css】 html中导航栏固定在头部或者底部

作者:ranbolwb / 发布于2014/6/4/ 6524

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


	<html>
	<head>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	 <title>demo</title>
	
	 <style type="text/css">
	 .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;
	 }
	 </style>
	</head>
	<body>
	 <div class="body">
	 <div class="nav top">
	 <ul>
	 <li>
	 <a href="http://www.baidu.com" target="_blank">百度</a>
	 </li>
	 <li>
	 <a href="http://www.sina.com" target="_blank">新浪</a>
	 </li>
	 <li>
	 <a href="http://cn.yahoo.com" target="_blank">雅虎</a>
	 </li>
	 <li>
	 <a href="http://www.qq.com" target="_blank">腾讯</a>
	 </li>
	 <li>
	 <a href="http://www.renren.com" target="_blank">人人</a>
	 </li>
	 </ul>
	 </div>
	
	 <div class="nav bottom">
	 <ul>
	 <li>
	 <a href="http://www.baidu.com" target="_blank">百度</a>
	 </li>
	 <li>
	 <a href="http://www.sina.com" target="_blank">新浪</a>
	 </li>
	 <li>
	 <a href="http://cn.yahoo.com" target="_blank">雅虎</a>
	 </li>
	 <li>
	 <a href="http://www.qq.com" target="_blank">腾讯</a>
	 </li>
	 <li>
	 <a href="http://www.renren.com" target="_blank">人人</a>
	 </li>
	 </ul>
	 </div>
	 </div>
	</body>
	</html>

试试其它关键字

　导航栏固定　

同语言下

可能有用的

ranbolwb贡献的其它代码(12)