上傳人：7***

認(rèn)證信息

認(rèn)證類型：個(gè)人認(rèn)證

認(rèn)證主體：雷**（實(shí)名認(rèn)證）

IP屬地：湖北

IP屬地：湖北 上傳時(shí)間：2022-01-23 格式：DOC 頁數(shù)：5 大?。?4KB 積分：15 舉報(bào) 版權(quán)申訴

1、CSS網(wǎng)頁布局入門教程9：用CSS設(shè)計(jì)網(wǎng)站導(dǎo)航橫向?qū)Ш骄W(wǎng)站導(dǎo)航是網(wǎng)站中最重要的元素，是網(wǎng)站提供給用戶的最直接最方便的訪問網(wǎng)站內(nèi)容的工具。網(wǎng)站導(dǎo)航從形式上主要由橫向?qū)Ш健⒖v向?qū)Ш?、下拉及多?jí)菜單導(dǎo)航等三種形式。 橫向?qū)Ш?作為門戶網(wǎng)站的設(shè)計(jì)而言，主導(dǎo)航一般采用橫向?qū)Ш?。由于門戶網(wǎng)站下方文字較多，且每個(gè)頻道均有一同的樣式區(qū)分，因此在頂部固定一個(gè)區(qū)域設(shè)計(jì)統(tǒng)一風(fēng)格且不占用過多空間的導(dǎo)航是最理想的選擇，國內(nèi)大部分門戶均采用這種形式?？v向?qū)Ш?目前在門戶網(wǎng)站的設(shè)計(jì)中已經(jīng)不再流行，縱向?qū)Ш礁鼉A向于表達(dá)產(chǎn)品分類。 下拉導(dǎo)航 主要用于功能復(fù)雜的網(wǎng)站。在有些網(wǎng)站上也常見的?？偟膩碚f導(dǎo)航的核心目標(biāo)是設(shè)計(jì)一個(gè)簡便快捷

2、的操作入口，幫助用戶快速到達(dá)網(wǎng)站中的相應(yīng)內(nèi)容，設(shè)計(jì)上應(yīng)當(dāng)根據(jù)網(wǎng)站類型及內(nèi)容的需求設(shè)計(jì)合理的導(dǎo)航形式。這里我們將使用css對(duì)常用的三種導(dǎo)航形式進(jìn)行設(shè)計(jì)，看看css是如何實(shí)現(xiàn)這些樣式的。橫向?qū)Ш绞褂胏ss布局的形式制作導(dǎo)航與table布局有很大的區(qū)別，網(wǎng)站除了頁面布局之外，最重要的就是導(dǎo)航部分，在這一步應(yīng)該先制作出一個(gè)簡單明快的導(dǎo)航系統(tǒng)，然后一步一步的完成具有設(shè)計(jì)效果的最終導(dǎo)航。在這里我們先構(gòu)想出了頂部的初級(jí)設(shè)計(jì)樣式，導(dǎo)航為一種橫向?qū)Ш叫问?。在開始css的導(dǎo)航制作之前，先讓我們回想一下傳統(tǒng)的表格式布局的導(dǎo)航制作。如果表格式布局實(shí)現(xiàn)如圖所示的導(dǎo)航形式，需要設(shè)計(jì)一個(gè)表格table。導(dǎo)航目前共有7個(gè)欄目

3、組成，需要設(shè)計(jì)一個(gè)1行7列的表格，并在每一個(gè)單元<td></td>標(biāo)簽中插入導(dǎo)航文字，然后 讓每個(gè)單元格的文本居中,可以看一下實(shí)現(xiàn)代碼：<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="center"><a href="http:/:<td align="center"><a h

4、ref="http:/:<td align="center"><a href="http:/:d><td align="center"><a href="http:/:<td align="center"><a href="http:/:<td align="center"><a href="http:/:<td align="center"><a h

5、ref="http:/: </tr></table></body>通過代碼可以看到，設(shè)定了表格的寬高，并把邊框邊距設(shè)為0以便于隱藏表格線，然后讓第個(gè)單元格的文本對(duì)齊方式為居中，就實(shí)現(xiàn)了簡單導(dǎo)航，這里的要點(diǎn)在于設(shè)計(jì)了一個(gè)與導(dǎo)航形式類似的數(shù)據(jù)表，將導(dǎo)航裝入每一格數(shù)據(jù)中。再來看一下如何用css來設(shè)計(jì)同樣的導(dǎo)航系統(tǒng)。DIV+css布局的核心是實(shí)現(xiàn)了表現(xiàn)和內(nèi)容的分離，先來認(rèn)識(shí)一下內(nèi)容部分的代碼編寫方式：<ul id="nav"><li><a href="http:/:<li><a

6、href="http:/: <li><a href="http:/:<li><a href="http:/:<li><a href="http:/:<li><a href="http:/:<li><a href="http:/:</ul>這段代碼使用了一個(gè)新的元素ul，在導(dǎo)航之前，先簡要了解一下ul元素。ul是css而已中使用得很廣泛的一種元素主要用來描述列表型內(nèi)容，每一個(gè)<ul></ul>表示其中的內(nèi)容為一個(gè)

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

8、它實(shí)現(xiàn)需要的導(dǎo)航效果。把第一段樣式編寫給了ul下的li對(duì)象，我們希望列表中的每一個(gè)一列表項(xiàng)不再遵行其默認(rèn)的從上至下的排列，因此給#nav li指定了float:left;的屬性，如同div的float:left;一樣，也是通過浮動(dòng)定位的原理使得自身向左浮動(dòng)，從而使下一個(gè)對(duì)象貼緊該對(duì)象的右邊，最終所有的li都具有了向左浮動(dòng)的特性，從而形式了橫向的排列形式。導(dǎo)航的關(guān)鍵在于a鏈接對(duì)象的樣式控制，在這里使用#nav li a給li下的每一個(gè)a鏈接對(duì)象編寫了樣式：display:block是這里的重點(diǎn)，它使得a鏈接對(duì)象的顯示方式由一段文本改為一個(gè)塊狀對(duì)象，和div的特性相同，div默認(rèn)狀態(tài)下是一個(gè)塊狀對(duì)

9、象，a鏈接對(duì)象默認(rèn)狀態(tài)下是一個(gè)普通文本內(nèi)聯(lián)對(duì)象，這樣就沒有辦法使得a鏈接對(duì)象能夠像一個(gè)方塊狀按鈕一樣去運(yùn)作，使用display:block之后，a鏈接對(duì)象將能夠像div和其它元素一樣成為一個(gè)塊狀對(duì)象（block），就可以使用css外邊距、內(nèi)邊距等屬性給a鏈接標(biāo)簽加上一系列的樣式了。 通過display:block的應(yīng)用，我們讓a標(biāo)簽元素有了寬度width:97px，高度height:22px，并在每一個(gè)a之間使用margin-left:2px;形式了左側(cè)的外邊距為2px。 display屬性是css中對(duì)對(duì)象顯示模式操作的一個(gè)屬性，主要用于改變對(duì)象的顯示方式。在css中，所有對(duì)象都有自己默認(rèn)的顯

10、示方式，如a與span等對(duì)象，它們默認(rèn)為一種行間內(nèi)聯(lián)對(duì)象，顯示時(shí)它們不會(huì)影響其它任何對(duì)象的顯示，如當(dāng)應(yīng)用span之后，span之后的內(nèi)容會(huì)自動(dòng)排在span的右邊，像一段文本一樣，而div這類對(duì)象的默認(rèn)顯示為塊狀對(duì)象，它們默認(rèn)狀態(tài)下便占據(jù)了一行的空間，并像一個(gè)方塊一樣顯示在頁面中，通過display:block，將a也變成了塊狀對(duì)象。此外，display還有眾多使用方式將在以后逐步了解到。<style>#nav li float:left;#nav li a color:#000000; text-decoration:none; padding-top:4px; display:b

11、lock;width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px; </style><ul id="nav"><li><a href="/index.asp">主頁</a></li><li><a href="/Sort/List_4.html">DIV+CSS教程</a></li><li>

12、<a href="/Sort/List_5.html">常用代碼</a></li><li><a href="/Sort/List_6.html">水晶圖標(biāo)</a></li><li><a href="/Sort/List_7.html">幻燈圖片</a></li><li><a href="/Sort/List_10.html">軟件下載</a><

13、/li><li><a href="/css2/">CSS2.0實(shí)用手冊</a></li></ul>預(yù)覽一下效果，已經(jīng)像個(gè)導(dǎo)航的模樣了，不過鼠標(biāo)移上去沒有任何響應(yīng)，這樣對(duì)于用戶體驗(yàn)來說是非常不友好的，因此需要通過一些帶有交互響應(yīng)的操作來提示用戶對(duì)象是可以點(diǎn)擊的：#nav li a:hover background-color:#bbbbbb; color:#ffffff;這次預(yù)覽效果，用鼠標(biāo)移上一個(gè)頻道，響應(yīng)出現(xiàn)了，這樣我們的導(dǎo)航已經(jīng)變得友好多了。 <!DOCTYPE html PUBLIC "

14、-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>#nav width

15、:860px; margin:0 auto;background:#ccc#nav li float:left;#nav li a color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px; #nav li a:hover background-color:#bbbbbb; color:#ffffff;</style></he

16、ad><body><ul id="nav"><li><a href="/index.asp">主頁</a></li><li><a href="/Sort/List_4.html">DIV+CSS教程</a></li><li><a href="/Sort/List_5.html">常用代碼</a></li><li><a href="/Sort/List_6.html">水晶圖標(biāo)</a></li><li><a href="/Sort/List_7.html">幻燈圖片</a></li><li><a href="/Sort/List_10.html">軟件下載</a></li><li><a href="/css2/">