怎样做网页顶部一直固定的导航栏

作者&投稿:佘思 (若有异议请与网页底部的电邮联系)
怎么将导航栏始终固定在窗口顶部~

具体方法如下:

在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能。先看一段代码实例:





蚂蚁部落

*{
padding:0px;
margin:0px;
}
body, ul, li{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
#main{
width:20px;
height:1000px;
margin:0px auto;
background-color:#CCC;
}
#nav{
width:500px;
margin:0px auto;
position:fixed;/*固定作用*/
top:0px;
left:490px;
/*ie6下样式,加下划线表示只针对ie6 的hack */
_position:absolute;/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
z-index:9999; /* 让导航栏浮在网页的高层位置,遇到flash和图片时候也能始终保持最外层 */
text-align:left;
}
a{
color:#000000;
text-decoration:none;
}
.menu{
width:120px;
height:18px;
margin:0px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
display:inline;
list-style:none;
font-weight:bold;
float:left;
}





前台专区
后台专区
交流专区


大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了



上面的代码已经实现了需要的功能,导航条固定在了网页的顶部,这个主要是使用了position:fixed,然后将top值设置为0即可,但是仅仅使用position:fixed还是不够,因为IE6浏览器并不支持,所以还需要进行浏览器兼容性设置,那就是添加以下代码即可:
_position:absolute;/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */

这个技术很简单。
如果你有一定的基础,下面这段代码对你会有帮助的。
但是如果你没有基础,建议你好好先补下基础。
望采纳
style="position:fixed;top:0px;left:0px"

给 div 层 加个属性 position: fixed;top: 0px; 就好了

如何制作网页的导航条?
答:2.打开“文件”菜单,在下拉中找到“新建(N)”,或者用快捷键"ctrl+n"来直接新建一个html文档。3.在新建的html文件上,我点开的是“拆分”模式,所以左侧显示的是代码,右边是效果,这样可以在左边写代码,右边预览。4.在Dreamweavercs6中已经没有插入导航条对象了,这里用spry菜单栏,操作更方便。在...

怎样做网页顶部一直固定的导航栏
答:给 div 层 加个属性 position: fixed;top: 0px; 就好了

HTML下拉网页,导航条一直漂浮在顶端怎么做?
答:这个技术很简单。如果你有一定的基础,下面这段代码对你会有帮助的。但是如果你没有基础,建议你好好先补下基础。望采纳 style="position:fixed;top:0px;left:0px"

如何设计网站导航如何设计网站导航栏
答:超级实用!网站导航栏设计形式综述导航对一个网站起着重要的导向作用。一个优秀的导航设计可以让用户快速找到自己需要的东西,让用户清楚地了解网站的结构框架,起到重要的指导作用。以下是一些常见的网页导航形式: 1.顶部导航 置顶导航广泛应用于各个领域的网站。这种导航可以让用户快速找到自己需要的东西,一目了然。顶部...

如何用JS做固定在网页中的导航条
答:使元素固定在网页中,不需要用到JS的,只需要用到CSS样式就可以了。使用css 中的 position:fixed; fixed是相对于浏览器的定位,设置了这个样式的元素将不会随页面滚动而改变位置,固定在屏幕中。如 :.classname { position:fixed;left:0;top:0;z-index:9999;} ...

如何用css做导航栏如何用css做导航栏
答:html导航栏怎么能一直悬浮上面?1/8首先我们的html里,添加好导航内容。2/8后面的就是网页的具体内容了,这里的代码简单一些。3/8样式里,我们先定义一些菜单里的样式。4/8这时运行页面时,在滚动条滚动下去后,导航是会消失不见的。5/8为了让导航栏固定在顶部,我们可以在导航容器里添加样式position:...

HTML下拉网页,导航条一直漂浮在顶端怎么做?
答:应用css样式 div.navigation { position: fixed;top: 0;} 关键是用固定位置布局

HTML下拉网页,导航条一直漂浮在顶端怎么做?
答:.fixed { width:100%; height:30px; background:#000; position:fixed; top:0; left:0;}主要用到了position:fixed 这个属性,希望能帮到您,谢谢!

网页的导航栏怎么固定,不被上下滑动受影响
答:如果你是说用代码实现的话,给这个导航的容器定位为fixed。例如:.nav{ position:fixed;top:0px;left:0px;}

fireworks怎样制作网页导航条
答:那么怎样制作一个高质量的、美观的导航条呢?下面小编就教你怎么利用fw制作一个导航条。fireworks制作网页导航条的步骤:首先打开fireworks,新建一块画布,画布颜色我选择白色然后在左侧工具栏选择“矩形工具”---“圆角矩形”然后在画布上按住鼠标左键拖曳画出该矩形然后我们有鼠标点击选中该矩形,接着在下...