導(dǎo)航條制作資料

【第一步】我們要先做一個(gè)容器（要求：ID為“nav”，寬度為960px，高度為：35px，位于頁面水平正中，與瀏覽器頂部的距離是30px；),這個(gè)容器就是放我們的導(dǎo)航的喲~代碼如下：

HTML代碼：

<divid="nav"></div>

CSS代碼：

#nav{

width:960px;

height:35px;

background:#CCC;/*為了便于查看區(qū)域范圍大小，故而加個(gè)背景色*/

margin:0auto;/*水平居中*/

margin-top:30px;/*頂部30px*/

}還有一點(diǎn)需要提醒的是，為了頁面在瀏覽器的兼容性，不要忘記在CSS文件頂部加入標(biāo)簽重置代碼喲~代碼：

body,div{padding:0;margin:0;}這里就不多說了，不明白的就看，課程頂部的課程關(guān)鍵詞

怎么樣，作出來了沒有，效果是不是一個(gè)灰色條，位于頁面的正中間，并且所有瀏覽器效果一樣呢~呵呵

(如果沒有做出來證明你沒有認(rèn)真看教程喲~用這種態(tài)度看教程會(huì)學(xué)不好的，本身我把整個(gè)XHTML+CSS的理論都?jí)嚎s到教程里了，或者說教程的“知識(shí)點(diǎn)濃度”很高，有時(shí)需要你一字不漏的去品我說的話，不要一目十行的去看喲~只要你把我寫的教程逐字逐句的研究透了，KwooJan保證你以后只要做出個(gè)頁面就很Easy的兼容各種瀏覽器，并且代碼絕對(duì)的精簡！CSS文件加載速度大大提升喲~)

【第二步】

盒子做好了，我們就要往里面放導(dǎo)航條中的內(nèi)容了“CSS學(xué)習(xí)學(xué)前準(zhǔn)備入門教程提高教程布局教程精彩應(yīng)用”，如果我們把這內(nèi)容(目前有6個(gè))，當(dāng)成酒杯的話，如果直接放到盒子里面的話，肯定會(huì)亂，并且還會(huì)東倒西歪，一點(diǎn)順序都沒有，但是我們平時(shí)會(huì)用一個(gè)隔板將每個(gè)酒杯隔開，這樣就是酒杯很有序的放入盒子，并且牢穩(wěn)而且防震，方便使用！現(xiàn)在我們把這個(gè)隔板叫做“有序列表”起個(gè)英文名字叫：ul,里面的每個(gè)單元格我們也給起個(gè)英文名字叫“l(fā)i”，大家想想里面的這個(gè)ul是不是和盒子里面的空間一樣大，小了，酒杯放不進(jìn)去，大了杯子就會(huì)不穩(wěn)，所以我們定義UL的時(shí)候大小一定也要和外面的盒子一樣大喲~,所以呢，我們的代碼就知道怎么寫了吧HTML代碼

<divid="nav">

<ul>

<li>CSS學(xué)習(xí)</li>

<li>學(xué)前準(zhǔn)備</li>

<li>入門教程</li>

<li>提高教程</li>

<li>布局教程</li>

<li>精彩應(yīng)用</li>

</ul>

</div>

CSS代碼：

#navul{

width:960px;

height:35px;

}效果作出來了沒有，下面是在IE6和FF中顯示效果(其他瀏覽器效果大家自己測試，總結(jié)規(guī)律)：

效果不一樣吧，沒關(guān)系，IE6中盒子被撐大，F(xiàn)F中卻沒有，但是我們的“酒杯”卻出來了，還有我們不希望我們的酒杯縱向排列，而是橫向排列，怎么辦呢？給大家一分鐘時(shí)間想~~~

想出來了沒有？什么沒有？

沒關(guān)系，我?guī)е蠹蚁胂?，因?yàn)?lt;li>標(biāo)簽也是塊狀元素，所以他也有塊狀元素的“霸道”，不允許其他元素和自己處于同一行，總共六個(gè)<li>,所以他們六個(gè)就像臺(tái)階似的縱向排列起來了，我提示到這里，大家應(yīng)該知道怎么做才能讓這些“酒杯”橫向排列了吧！^_^

對(duì)嘍~用浮動(dòng)Float！可是讓誰浮動(dòng)呢，當(dāng)然是<li>標(biāo)簽嘍~代碼如下：#navulli{float:left;}效果是不是和下面的一樣呢

<divid="nav">

<ul>

<li><ahref="#">CSS學(xué)習(xí)</a></li>

<li><ahref="#">學(xué)前準(zhǔn)備</a></li>

<li><ahref="#">入門教程下載</a></li>

<li><ahref="#">提高教程</a></li>

<li><ahref="#">布局基礎(chǔ)教程</a></li>

<li><ahref="#">精彩應(yīng)用</a></li>

</ul>

</div>2)文字大小12像素，CSS代碼如下a{font-size:12px;}3）鼠標(biāo)移動(dòng)上面和拿開效果#navullia{color:#333;text-decoration:none;}

#navullia:hover{color:#fff;text-decoration:underline;}效果是不是和下面一樣，鼠標(biāo)移上去變成白色的有下劃線的鏈接

到這里，基本上一個(gè)導(dǎo)航條就出來了~不過為了能讓大家再提高一個(gè)層次，KwooJan就幫大家對(duì)上面的導(dǎo)航條進(jìn)行一下修改，算是拋磚引玉！

我希望鼠標(biāo)移上去后，鏈接的背景變成黑色的，下面是我的步驟

首先把鏈接a加上一個(gè)背景，以方便看出來鏈接a的區(qū)域#navullia{color:#333;text-decoration:none;background:#0FF;}怎么樣，知道a的區(qū)域了吧

現(xiàn)在我要將a的高度設(shè)定為35px和盒子一樣高度，這樣我在把剛才的亮藍(lán)色背景就可以完全覆蓋下面盒子的灰色了

于是我插入下面紅色的代碼：#navullia{height:35px;color:#333;text-decoration:none;background:#0FF;}可是不管我怎么刷新瀏覽器，高度都沒有任何變化，這是為什么呢？！

原因就在于a屬于內(nèi)聯(lián)元素，內(nèi)聯(lián)元素是無法設(shè)置寬度和高度的，width和height只是針對(duì)塊狀元素，說道這里，解決辦法就出來了，只要我們把內(nèi)聯(lián)元素a轉(zhuǎn)化成塊狀元素就可以了，我們用“display:block;”將內(nèi)聯(lián)元素轉(zhuǎn)化成塊狀元素。大家先不要加這段代碼，閉上眼想想界面會(huì)變成什么樣子？#navullia{display:block;height:35px;color:#333;text-decoration:none;background:#0FF;}實(shí)際效果：

IE6和FF顯示效果居然大相徑庭，IE6中為什么所有鏈接縱向排列了呢？其實(shí)這個(gè)也很簡單，IE認(rèn)為a既然轉(zhuǎn)化成塊狀元素，就擁有塊狀元素的特性---霸道，它是不允許其他元素和它同一行，再加上也沒有對(duì)a的寬度進(jìn)行設(shè)定，所以才導(dǎo)致IE6中這么顯示，不過FF中為什么不這樣呢，和我們想象的一樣，那是因?yàn)镕ireFox認(rèn)為a即使為塊狀元素，也應(yīng)該受到外面<li>元素的影響，所以如此現(xiàn)實(shí)，究竟以誰標(biāo)準(zhǔn)，因?yàn)榇蠹叶颊J(rèn)為FF是標(biāo)準(zhǔn)瀏覽器，所以大家可以以FF為標(biāo)準(zhǔn)，不過KwooJan認(rèn)為，不用管誰標(biāo)準(zhǔn)不標(biāo)準(zhǔn)，那都是相對(duì)的，我認(rèn)為IE標(biāo)準(zhǔn)，F(xiàn)F就不標(biāo)準(zhǔn)了呢，我不愿意在這個(gè)問題上浪費(fèi)精力，我更喜歡將精力用在思考如何提高頁面的瀏覽器兼容性！

看到這里我想大家應(yīng)該知道如何讓頁面在IE6中顯示的和FF中一樣，很簡單，只需要在a的CSS代碼中加入“float:left;”

#navullia{display:block;height:35px;color:#333;text-decoration:none;background:#0FF;float:left;}

問題迎刃而解，這還是用到前三節(jié)的課程內(nèi)容，如果你想不起來如何解決，說明前面的課，特別是第二節(jié)的課，你沒有真正理解！怎么做，你應(yīng)該知道....回去再品品去

但是這樣你不覺著，每個(gè)連接的左邊和右邊是不是太擠了，緊貼著a區(qū)域的左側(cè)和右側(cè)，應(yīng)該怎么做？還是很簡單，只需要再加上一句話“padding:010px;”

#navullia{display:block;height:35px;color:#333;text-decoration:none;background:#0FF;float:left;padding:010px;}

現(xiàn)在再瞅瞅，是不是下面的效果

這樣看看是不是不擠了吧，哈哈，看著舒服了吧，但是這離我們的想要的效果只有一步了，因?yàn)楝F(xiàn)在看到的連接效果是，鼠標(biāo)移上去和拿開背景都是藍(lán)色的，我們現(xiàn)在只需要將，a鏈接中的背景去掉，移到a:hover的CSS代碼中，并且顏色變成“#000”就ok了~

#navullia{display:block;height:35px;color:#333;text-decoration:none;float:left;padding:010px;}

#navullia:hover{color:#fff;text-decoration:underline;background:#000;}

怎么