CSS如何实现网页导航栏置顶 HTML下拉网页，导航条一直漂浮在顶端怎么做？
\u5982\u4f55\u8ba9CSS\u5bfc\u822a\u56fa\u5b9a\u5728\u9875\u9762\u9876\u7aef\u3002\u7f6e\u9876\u7684\u4f18\u70b91.\u51cf\u5c11\u8df3\u51fa\u7387\uff1a\u5982\u679c\u662f\u4ece\u641c\u5bfb\u5f15\u64ce\u800c\u6765\u7684\u8bbf\u5ba2\uff0c\u5bf9\u6211\u4eec\u7f51\u7ad9\u4e0d\u719f\uff0c\u6587\u7ae0\u8bfb\u5b8c\u3001\u8d44\u6599\u627e\u5230\u540e\uff0c\u6ca1\u6709\u4e2a\u5438\u5f15\u6ce8\u610f\u529b\u7684\u8bbe\u8ba1\uff0c\u901a\u5e38\u5c31\u76f4\u63a5\u79bb\u5f00\u4e86\u3002\u90a3\u4e48\u5982\u679c\u6d6e\u52a8\u5bfc\u89c8\u5217\u6070\u5de7\u6709\u4e2a\u8bbf\u5ba2\u6709\u5174\u8da3\u7684\u4e3b\u9898\uff0c\u5c31\u6709\u673a\u4f1a\u7559\u4f4f\u8fd9\u4f4d\u5ba2\u4eba\u4e86\u3002
2.\u968f\u65f6\u63d0\u4f9b\u5bfc\u822a\uff1a\u4e0d\u662f\u6bcf\u4e2a\u4e0a\u7f51\u7684\u4eba\u90fd\u5f88\u719f\u6089\u7f51\u7ad9\u7684\u6784\u9020\u3001\u6446\u8bbe\u4f4d\u7f6e\u7b49\uff0c\u90a3\u4e48\u8fd9\u4e2a\u6d6e\u52a8\u5bfc\u89c8\u5217\u53ea\u8981\u9879\u76ee\u8bbe\u8ba1\u5f97\u597d\uff0c\u5c31\u80fd\u8ba9\u8fd9\u4f4d\u8ff7\u9014\u7f94\u7f8a\u7684\u7f51\u8def\u751f\u624b\u6709\u4e00\u4e2a\u5f88\u597d\u7684\u91cd\u70b9\u6307\u5f15\u3002
3.\u8282\u7701\u64cd\u4f5c\uff1a\u5bfc\u89c8\u5217\u7f6e\u9876\u53ef\u4ee5\u7701\u53bb\u6309\u300c\u56de\u5230\u9876\u7aef\u300d\u8fd9\u4e2a\u6309\u94ae\uff0c\u7f51\u9875\u53ef\u4ee5\u5c11\u5b89\u88c5\u3001\u6267\u884c\u4e00\u4e2a\u533a\u5757\uff0c\u800c\u4e14\u300c\u56de\u5230\u9876\u7aef\u300d\u6309\u94ae\u6709\u65f6\u4f1a\u906e\u4f4f\u4e00\u4e9b\u6587\u5b57\u3002
\u5b9e\u73b0\u65b9\u6cd5\u5bfc\u822a\u680f\u4e0b\u62c9\u81f3\u4e00\u5b9a\u9ad8\u5ea6\u540e\u56fa\u5b9a\u5728\u9876\u90e8\u7684\u7279\u6548\u3002\u5b9e\u73b0\u7684\u65b9\u6cd5\u6709\u597d\u591a\u79cd\uff0c\u8fd9\u91cc\u4ecb\u7ecd\u4e2a\u6700\u7b80\u5355\u6613\u61c2\u7684\u65b9\u6cd5\u3002\u901a\u8fc7jQuery\u6dfb\u52a0\u79fb\u9664\u7c7b\u6765\u5b9e\u73b0
\u6ce8\u610f\uff1adispaly:fixed\uff1b\u4f1a\u4f7f\u5143\u7d20\u8131\u79bb\u6587\u6863\uff0c\u4e0d\u5360\u636e\u6587\u6863\u7a7a\u95f4\u3002\u6240\u4ee5\u9875\u9762\u4f1a\u6709\u4e00\u4e9b\u8df3\u52a8\uff0c\u8fd9\u65f6\u53ef\u4ee5\u7ed9\u76f8\u90bb\u5143\u7d20\u52a0\u4e0anav\u6240\u5360\u9ad8\u5ea6\u7684margin-top\u6216padding-top\u5373\u53ef
\uff081\uff09\u201c\u5bfc\u822a\u680f\u4e0b\u62c9\u81f3\u4e00\u5b9a\u9ad8\u5ea6\u540e\u56fa\u5b9a\u5728\u9876\u90e8\u7684\u7279\u6548\u201d\uff0c\u4e5f\u6709\u540c\u5b66\u559c\u6b22\u53eb\u8ddf\u968f\u5bfc\u822a\u4ec0\u4e48\u7684\u3002\u53cd\u6b63\u5c31\u662f\u8fd9\u4e2a\u4e48\u610f\u601d\u3002\u5148\u76f4\u63a5\u4e0a\u4ee3\u7801\uff1a
\u5c06\u8fd9\u4e2ajs\u653e\u5230\u8981\u5b9e\u73b0\u6548\u679c\u7684\u9875\u9762\u91cc\u9762\u53bb\uff0c\u7136\u540e\u6211\u4eec\u8981\u4fee\u6539\u7684\u662f\u7b2c\u4e09\u884c\u7684.nav\uff0c\u201cnav\u201c\u6539\u6210\u4f60\u81ea\u5df1\u9875\u9762\u5bfc\u822a\u680f\u7684class\uff1b\u7b2c\u4e03\u884c\u7684\u201d100\u201c\u4e3a\u4e0b\u62c9\u5230100\u4e2a\u50cf\u7d20\u7684\u65f6\u5019\u89e6\u53d1\u7279\u6548\uff0c\u53ef\u4ee5\u81ea\u884c\u4fee\u6539\u81f3\u5408\u9002\u7684\u9ad8\u5ea6\u3002
\uff082\uff09\u7136\u540e\u5728css\u6587\u4ef6\u91cc\u9762\u589e\u52a0\u8fd9\u4e2a\u5c5e\u6027\uff1a
\u8fd9\u6837\u5c31\u5dee\u4e0d\u591a\u5b8c\u6210\u4e86\u3002
\u8bb2\u4e0b\u8fd9\u4e2ajs\u7684\u610f\u601d\uff0c\u5224\u65ad\u4e0b\u62c9\u5230\u4e00\u5b9a\u9ad8\u5ea6\u7684\u65f6\u5019\uff0c\u7ed9\u5bfc\u822a\u680f\u7684div\u63d2\u5165\u4e00\u4e2a\u201dfixednav\u201c\u5c5e\u6027\uff0c\u7136\u540e\u7ed9\u201dfixednav\u201c\u52a0\u4e0a\u56fa\u5b9a\u5728\u9876\u90e8\u7684\u53c2\u6570\u3002
\u8fd9\u4e2a\u6280\u672f\u5f88\u7b80\u5355\u3002
\u5982\u679c\u4f60\u6709\u4e00\u5b9a\u7684\u57fa\u7840\uff0c\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u5bf9\u4f60\u4f1a\u6709\u5e2e\u52a9\u7684\u3002
\u4f46\u662f\u5982\u679c\u4f60\u6ca1\u6709\u57fa\u7840\uff0c\u5efa\u8bae\u4f60\u597d\u597d\u5148\u8865\u4e0b\u57fa\u7840\u3002
\u671b\u91c7\u7eb3
style="position:fixed;top:0px;left:0px"
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、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下：
<div class="nav">这里是导航所在的DIV容器。</div>
CSS代码：
.nav{
position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
top:0; /* 距离窗口顶部距离 */
left:0; /* 距离窗口左边的距离 */
width:100%; /* 宽度设置为100% */
height:40px; /* 高度 */
z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}设置方式，原理及大致内容请看css代码注释。
你那个问题应该就是要在写样式的时候先初始化一下 写上*{margin:0;padding:0;border:0;}把所有的之都初始为0，你在火狐firebug里面，应该就是多了一个margin或者padding
绛旓細鍦ㄤ袱涓眰涔嬮棿鍔犺繖涓紝鍏朵腑楂樺害鍙互鑷繁璁剧疆鎴愯嚜宸遍渶瑕佺殑楂樺害 css杩欐牱锛.blank{ clear:both; overflow:hidden; display:block; overflow:hidden;}
绛旓細缁欏鑸姞涓猵鐒跺悗缁欎粬鍙栦釜鍚嶅瓧鐒跺悗鍦–SS甯粬灞呬腑涓涓媡ext-align:center锛涜繖鏍峰氨鍙互缁欏鑸眳涓簡 css濡備綍璁瀵艰埅鏍涓嶅姩锛熷畾浣嶏紝鍥哄畾瀹氫綅fixed 濡備綍鍒╃敤html鍒朵綔缃戦〉姘村钩瀵艰埅鑿滃崟锛1銆佹柊寤篽tml椤甸潰 鎵撳紑html缂栬緫杞欢锛屾柊寤轰竴涓猦tml椤甸潰銆傚鍥撅細2銆佹坊鍔犲鑸爣绛 鍦╞ody>鏍囩閲屾柊寤轰竴涓猽l>/ul>鏍囩锛岀劧鍚庡湪ul...
绛旓細style="position:fixed 杩欎竴鍙ユ牱寮忓姞鍦ㄤ綘鐨瀵艰埅鐨勫鍣ㄤ笂闈㈠氨鍙互浜
绛旓細涓鑸潵璁瀹炵幇瀵艰埅鏍鎸囧畾鏄噰鐢ㄧ粷瀵瑰畾浣嶇殑鏂瑰紡銆傜ず渚嬩唬鐮佸涓嬶細杩欓噷鏄鑸墍鍦ㄧ殑DIV瀹瑰櫒銆 CSS浠ｇ爜锛.nav{ position:fixed; /* 缁濆瀹氫綅锛宖ixed鏄浉瀵逛簬娴忚鍣ㄧ獥鍙ｅ畾浣嶃 */ top:0; /* 璺濈绐楀彛椤堕儴璺濈 */ left:0; /* 璺濈绐楀彛宸﹁竟鐨勮窛绂 */ width:100%; /* 瀹藉害璁剧疆涓100% */ height:40px...
绛旓細鐢ㄤ竴涓粷瀵瑰畾浣嶇殑CSS鍥哄畾鍒伴《閮ㄣ
绛旓細HTML5璁瀵艰埅鏍鍥哄畾椤堕儴涓嶅姩涓斾笉閬尅浣忎笅闈㈢殑DIV鏂规硶濡備笅锛1锛岄鍏堝湪html涓紝娣诲姞鑹ソ鐨勫鑸唴瀹广2锛屽悗鑰呮槸缃戦〉鐨勫叿浣撳唴瀹癸紝杩欓噷鐨勪唬鐮佹瘮杈冪畝鍗曘3锛屽湪鏍峰紡涓紝棣栧厛鍦ㄨ彍鍗曚腑瀹氫箟涓浜涙牱寮忋4锛屾鏃讹紝鍦ㄨ繍琛椤甸潰鏃讹紝婊氬姩鏉℃粴鍔ㄥ悗瀵艰埅灏嗘秷澶便5锛屼负浜嗗皢瀵艰埅鏍忓浐瀹氬湪椤堕儴锛屽彲浠ユ坊鍔犳牱寮忎綅缃細鍥哄畾锛涙渶楂橈細0...
绛旓細鐢╝bsolute瀹氫綅
绛旓細htmlcss瀵艰埅鏍忔庝箞鏄剧ず鍐呭锛熶娇鐢∟AV鍏冪礌涓鸿秴閾炬帴鏉ュ畾涔夊鑸爮 瀵艰埅鏍忓浜缃戦〉鏉ヨ鏄緢閲嶈鐨勮缃悎閫傜殑瀵艰埅鏍忎篃鏄緢瑕佸繀瑕佺殑 涓嬮潰浠嬬粛HTML鐨勫鑸爮璁剧疆 甯屾湜鑳藉府鍔╁埌澶у 鏂规硶/姝ラ 1.浣跨敤ul鍒楄〃璁剧疆瀵艰埅鏍 2.璁剧疆nav鍏冪礌CSS鏍峰紡瀹藉害楂樺害鑳屾櫙棰滆壊 3.灏唋i鍏冪礌鍐呭绉诲姩 4.鍘婚櫎涓嬪垝绾 5.鍐呭灞呬腑 html鎼滅储...
绛旓細鏃犲簭鍒楄〃鏄痟tml椤甸潰鎺掔増缁忓父鐢ㄥ埌鐨勯潪甯稿疄鐢ㄧ殑鏍囩锛屼絾鏄柊鎵嬪湪浣跨敤鏃犲簭鍒楄〃鏃讹紝缁忓父浼氬湪妯悜鎺掔増涓婂嚭鐜伴棶棰橈紝绗旇呭湪杩欓噷鎻愪緵浜嗙瑪鑰呭湪浣跨敤鏃犲簭鍒楄〃鍒朵綔缃戦〉瀵艰埅鏍鏃剁殑鍑犵鏂规硶涓庡父瑙侀棶棰樼殑瑙ｅ喅闂銆傦紙浠css鍐呴儴鏍峰紡涓轰緥锛塠娉細鏈夊悓瀛︿箣鍓嶉棶杩囨垜鎬庝箞鍒朵綔涓寮犵綉椤碉紝浣嗗彧浼歨tml锛屾湰鏂囩敤鍒板潎涓篶ss銆傛晠璇存槑锛...
绛旓細04 涓瀵艰埅鏍娣诲姞涓浜涘睘鎬 #nav { width:1000px; height:30px; background:#CCC; margin:0 auto; margin-top:50px; } #nav ul { width:960px; height:35px;
