Question

CSS如何实现网页导航栏置顶

以下即为我的问题点：期待达到的效果导航栏实现置顶，并且能够自动适应；当前问题点导航栏无法置顶！请高手指教！谢谢！

Answer 1

1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none;是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。

2、在html页面body里面编写导航栏内容，可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。

3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。

4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。

5、也可以制作成水平导航栏，overflow: hidden;代码的意思是超出高度和宽度的部分自动隐藏，float: left;使导航栏水平显示。

6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。

Answer 2

一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下：

<div class="nav">这里是导航所在的DIV容器。</div>

CSS代码：

.nav{
	position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
	top:0; /* 距离窗口顶部距离 */
	left:0; /* 距离窗口左边的距离 */
	width:100%; /* 宽度设置为100% */
	height:40px; /* 高度 */
	z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}

设置方式，原理及大致内容请看css代码注释。

Answer 3

你那个问题应该就是要在写样式的时候先初始化一下 写上*{margin:0;padding:0;border:0;}把所有的之都初始为0，你在火狐firebug里面，应该就是多了一个margin或者padding