創(chuàng)建一個(gè)純CSS的水平導(dǎo)航條

按照傳統(tǒng)的方法，導(dǎo)航條由放在一行表格單元里的圖形圖像構(gòu)成。由于人們不再推薦用表格來定位任何非表格的頁(yè)面內(nèi)容，所以很多制作Web的人正在尋找（新的）方法，用結(jié)構(gòu)化的XHTML標(biāo)記和CSS格式來創(chuàng)建導(dǎo)航條。

一個(gè)簡(jiǎn)單的CSS導(dǎo)航條

創(chuàng)建CSS樣式文本導(dǎo)航條的最簡(jiǎn)單解決方法也許就是把所有的鏈接都放在一行文本里，就像例A里的一樣。

這種方法看起來很合理也很直觀。但問題是，把所有的鏈接都放在一行文本里就很難控制鏈接之間以及前后的空白。所以，為了避免所有的鏈接都擠在一起，你最后通常都不得不插入管道（垂直條）和非換行的空白字符作為分隔符。

就如下面的代碼所示，結(jié)果很難是我們所要的清晰、結(jié)構(gòu)化的標(biāo)示。

<div id="navbar1">

&nbsp;&nbsp;<a href="link1a.html">Button 1</a> &nbsp;|&nbsp; <a

href="link2a.html ">Button 2</a> &nbsp;|&nbsp; <a href="link3a.html ">

Button 3</a>

</div>

如果為了應(yīng)用創(chuàng)建按鈕背景和滾動(dòng)效果所需要的額外CSS樣式，你就要加入<span>標(biāo)簽，這樣的話標(biāo)示會(huì)變得更加混亂。

基于列表的CSS導(dǎo)航條

創(chuàng)建CSS導(dǎo)航條的另一種方法是使用<ul>和<li>標(biāo)簽，把鏈接作為無(wú)序列表（unordered list）來標(biāo)示。

一眼看上去，對(duì)導(dǎo)航條使用無(wú)序列表似乎是不符合直觀感受的，因?yàn)槲覀兞?xí)慣于把無(wú)序列表作為一個(gè)豎著推起來的列表項(xiàng)目，每個(gè)前面都放著一個(gè)Bullet。這似乎不符合導(dǎo)航條水平方向的習(xí)慣。

但是，作為獨(dú)立列表項(xiàng)目集合的列表邏輯結(jié)構(gòu)能夠適用于導(dǎo)航條里的鏈接；而CSS的規(guī)則讓你能夠強(qiáng)制取代列表項(xiàng)目缺省的表現(xiàn)形式，以消除Bullet并安排列表項(xiàng)在頁(yè)面之上而不是之下浮動(dòng)。

知道了這一點(diǎn)，現(xiàn)在讓我們來看看例B，根據(jù)無(wú)序列表創(chuàng)建CSS樣式和XHTML標(biāo)示的導(dǎo)航條。

下面就是XHTML標(biāo)示：

<div id="navbar2">

<ul>

<li><a href="link1.html">Button 1</a></li>

<li><a href="link2.html ">Button 2</a></li>

<li><a href="link3.html ">Button 3</a></li>

</ul>

</div>

本專欄的固定讀者可能會(huì)認(rèn)出這個(gè)例子是我用在另一個(gè)CSS按鈕上的同一個(gè)標(biāo)示。這個(gè)技巧吸引人的一個(gè)地方是，這個(gè)標(biāo)示對(duì)所有按鈕都是一樣的，無(wú)論它們是豎著堆成一列放在主體文本的一邊，還是水平放在頁(yè)面頂端的導(dǎo)航條里。

下面是把文字鏈接列表轉(zhuǎn)換成導(dǎo)航條的CSS代碼：

div#navbar2 {

height: 30px;

width: 100%;

border-top: solid #000 1px;

border-bottom: solid #000 1px;

background-color: #336699;

}

div#navbar2 ul {

margin: 0px;

padding: 0px;

font-family: Arial, Helvetica, sans-serif;

font-size: small;

color: #FFF;

line-height: 30px;

white-space: nowrap;

}

div#navbar2 li {

list-style-type: none;

display: inline;

}

div#navbar2 li a {

text-decoration: none;

padding: 7px 10px;

color: #FFF;

}

div#navbar2 lia:link {

color: #FFF:

}

div#navbar2 lia:visited {

color: #CCC;

}

div#navbar2 lia:hover {

font-weight: bold;

color: #FFF;

background-color: #3366FF;

}

Div#navbar2樣式會(huì)設(shè)置包含有導(dǎo)航條鏈接的div的尺寸和背景。

Div#navbar2 ul樣式包含有margin和padding聲明，以強(qiáng)制取代被分配給無(wú)序列表的缺省空白，并設(shè)置文字的整體格式。White-space: nowrap聲明會(huì)保證列表顯示在一個(gè)水平的行里，即使瀏覽器的窗口太窄而無(wú)法顯示整個(gè)行。

這個(gè)技巧真正的秘密就在div#navbar2 li樣式里。List-style-type: none聲明會(huì)刪除通常用來標(biāo)記每個(gè)列表項(xiàng)目的Bullet；而display: inline聲明則能夠讓列表項(xiàng)目在頁(yè)面上從左向右浮動(dòng)，而不會(huì)讓每個(gè)項(xiàng)目顯示在單獨(dú)的行里。

這個(gè)技巧的另外一個(gè)關(guān)鍵元素是div#navbar2 li a規(guī)則。Text-decoration: none聲明會(huì)刪除鏈接常用的下劃線，而padding: 7px 10px聲明則用來控制導(dǎo)航條里鏈接（之間）的空白。左側(cè)和右側(cè)間隙用來控制水平間隔，而我們需要頂部和底部間隙，讓它們把滾動(dòng)效果（以及按鈕的可點(diǎn)擊區(qū)域）的彩色背景充滿整個(gè)導(dǎo)航條。你還可以加入左側(cè)和右側(cè)空白值，如果你想要在按鈕之間加入更多空白的話。

最后，:link, :visited和:hover偽類（pseudoclasse）的規(guī)則會(huì)設(shè)置用于滾動(dòng)效果的顏色變化。

你可以改變這個(gè)基本的技巧，以創(chuàng)建很多不同的導(dǎo)航條效果，包括流行的“目錄選項(xiàng)卡”樣式。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

文章標(biāo)題：創(chuàng)建一個(gè)純CSS的水平導(dǎo)航條
網(wǎng)站URL：http://muchs.cn/news35/316135.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、關(guān)鍵詞優(yōu)化、企業(yè)建站、企業(yè)網(wǎng)站制作、電子商務(wù)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)