人妻少妇heyzo无码专区,国产免费AV吧在线观看不卡

主頁(yè) > 知識(shí)庫(kù) > 一個(gè)自動(dòng)居中的導(dǎo)航條實(shí)例與相關(guān)問題 DIV+CSS

一個(gè)自動(dòng)居中的導(dǎo)航條實(shí)例與相關(guān)問題 DIV+CSS

這是我剛剛作的一個(gè)導(dǎo)航條，為了讓那四個(gè)LINK居中，我這樣作了，但作完后發(fā)現(xiàn)了很多的問題，寫出來和大家分享一下！

首先我們先來看一下這個(gè)導(dǎo)航條！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test zishu</title> <style> /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋體", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none;} a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;} #nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(http://www.zishu.cn/attachments/month_0609/j2006912180.jpg);background-color: #FF9900; text-align:center;} #nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;} #nav li a{margin:1px;} p{ margin:50px 0; text-align:center; } </style> </head> <body> <div   class="aa0mr4w"   id="nav">     <ul><li>首 頁(yè)</li><li>發(fā)布信息</li><li>我的客齊集</li><li>幫 助</li></ul> </div> <p>www.zishu.cn 子鼠 2006-09-11 凌晨</p> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

問題：
1、空格BUG出現(xiàn)我FIREFOX中，不知道為什么，如果把LI分不寫在同一行，問題就出來了，你可以在上邊運(yùn)行代碼中試一下！

2、IE和FIREFOX的微小區(qū)別（看下圖），如果你沒有發(fā)現(xiàn)這小小的區(qū)別，你就不會(huì)在CSS中寫成padding:6px 15px 5px 15px; 也就永遠(yuǎn)不會(huì)把中間的豎線和上下兩條線連在一起！（這其中IE6和IE7還有更微小的區(qū)別）；

3、#nav li a{margin:1px;}這行是不是沒有用？如果你這樣認(rèn)為你就刪了試一下，看行不行！

4、頁(yè)面在縮放到一定小時(shí)會(huì)折行，F(xiàn)IREFOX中用min-width解決，而IE中min-width不認(rèn)識(shí)，所以只有用：expression((documentElement.clientWidt.....來解決了！我在上邊的代碼中沒有加，如果你不想折行就把上邊#nav這行改成：

程序代碼

復(fù)制代碼代碼如下:

#nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(nav_bg.jpg);background-color: #FF9900; text-align:center;min-width:400px;width: expression((documentElement.clientWidth  400) ? "400px" : "auto" );} 

基本就這行多問題，建議自已作一下，這樣你會(huì)發(fā)現(xiàn)特別多的問題！
另外：這篇BLOG會(huì)在FIREFOX中很難看，你就湊合看吧！
再另外：我寫的難免有問題，如果真有，你就指出來，我會(huì)非常高興的！

您可能感興趣的文章:

CSS中position屬性之fixed實(shí)現(xiàn)div居中
js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法
JS+CSS設(shè)置img在DIV中只顯示Img垂直居中的部分
CSS如何使DIV層居中
CSS將div內(nèi)容垂直居中案例總結(jié)

標(biāo)簽：上海長(zhǎng)治新疆沈陽(yáng) 河南樂山紅河滄州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《一個(gè)自動(dòng)居中的導(dǎo)航條實(shí)例與相關(guān)問題 DIV+CSS》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。