如何将导航栏始终固定在窗口顶部_html/css

首頁

web前端

html教學

如何将导航栏始终固定在窗口顶部_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">*{  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;}</style></head><body><div id="nav">  <ul>    <li class="menu"><a href="#">前台专区</a></li>    <li class="menu"><a href="#">后台专区</a></li>    <li class="menu"><a href="#">交流专区</a></li>  </ul></div><div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div></body></html>

登入後複製

上面的代码已经实现了需要的功能，导航条固定在了网页的顶部，这个主要是使用了position:fixed，然后将top值设置为0即可，但是仅仅使用position:fixed还是不够，因为IE6浏览器并不支持，所以还需要进行浏览器兼容性设置，那就是添加以下代码即可:

_position:absolute;/* 把导航栏位置定义为绝对位置 关键*/_top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */

登入後複製

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/589.html

最为原始地址是:http://www.softwhy.com

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7769

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1294

PHP教程

1234

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。