主頁 > 知識庫 > CSS網(wǎng)頁布局入門教程9：用CSS設(shè)計網(wǎng)站導航——橫向?qū)Ш?/div>

CSS網(wǎng)頁布局入門教程9：用CSS設(shè)計網(wǎng)站導航——橫向?qū)Ш?/h1>

網(wǎng)站導航是網(wǎng)站中最重要的元素，是網(wǎng)站提供給用戶的最直接最方便的訪問網(wǎng)站內(nèi)容的工具。網(wǎng)站導航從形式上主要由橫向?qū)Ш?、縱向?qū)Ш健⑾吕岸嗉壊藛螌Ш降谌N形式。
　　橫向?qū)Ш健∽鳛殚T戶網(wǎng)站的設(shè)計而言，主導航一般采用橫向?qū)Ш?。由于門戶網(wǎng)站下方文字較多，且每個頻道均有一同的樣式區(qū)分，因此在頂部固定一個區(qū)域設(shè)計統(tǒng)一風格且不占用過多空間的導航是最理想的選擇，國內(nèi)大部分門戶均采用這種形式。
　　縱向?qū)Ш健∧壳霸陂T戶網(wǎng)站的設(shè)計中已經(jīng)不再流行，縱向?qū)Ш礁鼉A向于表達產(chǎn)品分類。
　　下拉導航　主要用于功能復雜的網(wǎng)站。在有些網(wǎng)站上也常見的。

　　總的來說導航的核心目標是設(shè)計一個簡便快捷的操作入口，幫助用戶快速到達網(wǎng)站中的相應內(nèi)容，設(shè)計上應當根據(jù)網(wǎng)站類型及內(nèi)容的需求設(shè)計合理的導航形式。這里我們將使用css對常用的三種導航形式進行設(shè)計，看看css是如何實現(xiàn)這些樣式的。

　　橫向?qū)Ш?

　　使用css布局的形式制作導航與table布局有很大的區(qū)別，網(wǎng)站除了頁面布局之外，最重要的就是導航部分，在這一步應該先制作出一個簡單明快的導航系統(tǒng)，然后一步一步的完成具有設(shè)計效果的最終導航。在這里我們先構(gòu)想出了頂部的初級設(shè)計樣式，導航為一種橫向?qū)Ш叫问?。在開始css的導航制作之前，先讓我們回想一下傳統(tǒng)的表格式而已的導航制作。如果表格式而已實現(xiàn)如圖所示的導航形式，需要設(shè)計一個表格table。導航目前共有7個欄目組成，需要設(shè)計一個1行7列的表格，并在每一個單元td>/td>標簽中插入導航文字，然后　讓每個單元格的文本居中,可以看一下實現(xiàn)代碼：

程序代碼---[WWW.AA25.CN]
table width="100%" border="0" cellpadding="0" cellspacing="0">
  tr>
    td align="center">a href="http://:www.aa25.cn/index.asp">主頁/a>/td>
    td align="center">a href="http://:www.aa25.cn/Sort/List_4.html">DIV+CSS教程/a>/td>
    td align="center">a href="http://:www.aa25.cn/Sort/List_5.html">常用代碼/a>/td>
    td align="center">a href="http://:www.aa25.cn/Sort/List_6.html">水晶圖標/a>/td>
    td align="center">a href="http://:www.aa25.cn/Sort/List_7.html">幻燈圖片/a>/td>
    td align="center">a href="http://:www.aa25.cn/Sort/List_10.html">軟件下載/a>/td>
    td align="center">a href="http://:www.aa25.cn/css2/">CSS2.0實用手冊/a>/td>
  /tr>
/table>
/body>

　　通過代碼可以看到，設(shè)定了表格的寬高，并把邊框邊距設(shè)為0以便于隱藏表格線，然后讓第個單元格的文本對齊方式為居中，就實現(xiàn)了簡單導航，這里的要點在于設(shè)計了一個與導航形式類似的數(shù)據(jù)表，將導航交往每一格數(shù)據(jù)中。再來看一下如何用css來設(shè)計同樣的導航系統(tǒng)。
　　DIV+CSS布局的核心是實現(xiàn)了表現(xiàn)和內(nèi)容的分離，先來認識一下內(nèi)容部分的代碼編寫方式：

程序代碼---[WWW.AA25.CN]
  ul id="nav">
    li>a href="http://:www.aa25.cn/index.asp">主頁/a>/li>
    li>a href="http://:www.aa25.cn/Sort/List_4.html">DIV+CSS教程/a>/li>
    li>a href="http://:www.aa25.cn/Sort/List_5.html">常用代碼/a>/li>
    li>a href="http://:www.aa25.cn/Sort/List_6.html">水晶圖標/a>/li>
    li>a href="http://:www.aa25.cn/Sort/List_7.html">幻燈圖片/a>/li>
    li>a href="http://:www.aa25.cn/Sort/List_10.html">軟件下載/a>/li>
    li>a href="http://:www.aa25.cn/css2/">CSS2.0實用手冊/a>/li>
  /ul>

　　這段代碼使用了一個新的元素ul，在導航之前，先簡要了解一下ul元素。ul是css而已中使用得很廣泛的一種元素主要用來描述列表型內(nèi)容，每一個ul>/ul>表示其中的內(nèi)容為一個列表塊，塊中的每一條列表數(shù)據(jù)用li>/li>來描述，可以看一下不加任何樣式的ul的實現(xiàn)顯示效果。

　　如圖所示，作為一種列表型內(nèi)容，ul默認樣式就中上了圓點狀序號，而且默認為從上至下排列。為什么我們的導航系統(tǒng)要使用ul元素？實際上導航也是種列表，可以理解為導航列表，每一個列表數(shù)據(jù)就是導航中的一個導航頻道，同樣也可以使用二層嵌套的div來實現(xiàn)一個導航的代碼結(jié)構(gòu)，但相對于ul列表來說，div顯得過于復雜，ul的使用還是應當重點放在塊狀型區(qū)域，而對于簡單的只有文字的導航來說，ul就更為輕巧靈活。
　　在代碼中我們也為ul定義了一個id叫nav，接下來為這個ul及其下面的對象編寫代碼讓它實現(xiàn)需要的導航效果。

　　把第一段樣式編寫給了ul下的li對象，我們希望列表中的每一個一列表項不再遵行其默認的從上至下的排列，因此給#nav li指定了foat:left;的屬性，如同div的foat:left;一樣，也是通過浮動定位的原理使得自身向左浮動，從而使下一個對象貼緊該對象的右邊，最終所有的li都具有了向左浮動的我，從而形式了橫向的排列形式。
　　導航的關(guān)鍵在于a鏈接對象的樣式控制，在這里使用#nav li a{}給li下的每一個a鏈接對象編寫了樣式：
　　display:block是這里的重點，它使得a鏈接對象的顯示方式由一段文本改為一個塊狀對象，和idv的特性相同，div默認狀態(tài)下是一個塊狀對象，a鏈接對象默認狀態(tài)下是一個普通文本，這樣就沒有辦法使得a鏈接對象能夠像一個方塊狀按鈕一樣去動作，使用display:block之后，a鏈接對象將能夠像div和其它元素一樣成為一個塊狀對象（block），就可以使用css外邊距、內(nèi)邊距等屬性給a鏈接標簽加上一系列的樣式了。
　　通過display:block的應用，我們讓a標簽元素有了寬度width:97px，高度height:22px，并在每一個a之間使用margin-left:2px;形式了左側(cè)的外邊距為2px。
　　display屬性是css中對對象顯示模式操作的一個屬性，主要用一專稿　變對象的顯示方式，在css中，所有對象都有自己默認的顯示方式，如a與span等對象，它們默認為一種午間內(nèi)聯(lián)對象，顯示時它們不會影響其它任何對象的顯示，如當應用span之后，span之后的內(nèi)容會自動排在span的右邊，像一段文本一樣，而div這類對象的默認顯示為塊狀沖鋒槍，它們默認狀態(tài)下便占據(jù)了一行的空間，并像一個廣場一樣顯示在頁面中，通過display:block，將a也變成了塊狀對象。此外，display還有眾多使用方式將在以后逐步了解到。

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

　預覽一下效果，已經(jīng)像個導航的模樣了，不過鼠標移上去沒有任何響應，這樣對于用戶體驗來說是非常不友好的，因此需要通過一些帶有交互反饋的操作來提示用戶對象是可以點擊的：
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
　　這次預覽效果，用鼠標移上一個頻道，響應出現(xiàn)了，這樣我們的導航已經(jīng)變得友好多了。

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

初級導航模塊完成，不妨對比一下使用表格式布局和css而已在這方面的優(yōu)劣，你會發(fā)現(xiàn)，css的優(yōu)勢是顯而易見的。
　　注：從本節(jié)開始不再寫出具體詳細的制作步驟，如果你對其中的部分不明白，可以在本節(jié)留言；對css掌握不熟練的朋友，建議再溫習前幾節(jié)，平時多用dreamweaver做一些實例，慢慢會逐步掌握的。

標簽：南充東莞遼源陽泉濱州喀什海東邯鄲

巨人網(wǎng)絡通訊聲明：本文標題《CSS網(wǎng)頁布局入門教程9：用CSS設(shè)計網(wǎng)站導航——橫向?qū)Ш健?，本文關(guān)鍵詞 CSS,網(wǎng)頁,布局,入門教程,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡，涉及言論、版權(quán)與本站無關(guān)。