創建一個純CSS的水平導航條

2020-03-24 16:16:06

字體：大中小

來源：轉載

供稿：網友

按照傳統的方法，導航條由放在一行表格單元里的圖形圖像構成。由于人們不再推薦用表格來定位任何非表格的頁面內容，所以很多制作Web的人正在尋找（新的）方法，用結構化的XHTML標記和CSS格式來創建導航條。一個簡單的CSS導航條

創建html' target='_blank'>CSS樣式文本導航條的最簡單解決方法也許就是把所有的鏈接都放在一行文本里，就像例A里的一樣。這種方法看起來很合理也很直觀。但問題是，把所有的鏈接都放在一行文本里就很難控制鏈接之間以及前后的空白。所以，為了避免所有的鏈接都擠在一起，你最后通常都不得不插入管道（垂直條）和非換行的空白字符作為分隔符。就如下面的代碼所示，結果很難是我們所要的清晰、結構化的標示。 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 如果為了應用創建按鈕背景和滾動效果所需要的額外CSS樣式，你就要加入 span 標簽，這樣的話標示會變得更加混亂。基于列表的CSS導航條
創建CSS導航條的另一種方法是使用 ul 和 li 標簽，把鏈接作為無序列表（unordered list）來標示。一眼看上去，對導航條使用無序列表似乎是不符合直觀感受的，因為我們習慣于把無序列表作為一個豎著推起來的列表項目，每個前面都放著一個Bullet。這似乎不符合導航條水平方向的習慣。但是，作為獨立列表項目集合的列表邏輯結構能夠適用于導航條里的鏈接；而CSS的規則讓你能夠強制取代列表項目缺省的表現形式，以消除Bullet并安排列表項在頁面之上而不是之下浮動。知道了這一點，現在讓我們來看看例B，根據無序列表創建CSS樣式和XHTML標示的導航條。下面就是XHTML標示： 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 本專欄的固定讀者可能會認出這個例子是我用在另一個CSS按鈕上的同一個標示。這個技巧吸引人的一個地方是，這個標示對所有按鈕都是一樣的，無論它們是豎著堆成一列放在主體文本的一邊，還是水平放在頁面頂端的導航條里。下面是把文字鏈接列表轉換成導航條的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樣式會設置包含有導航條鏈接的div的尺寸和背景。Div#navbar2 ul樣式包含有margin和padding聲明，以強制取代被分配給無序列表的缺省空白，并設置文字的整體格式。White-space: nowrap聲明會保證列表顯示在一個水平的行里，即使瀏覽器的窗口太窄而無法顯示整個行。這個技巧真正的秘密就在div#navbar2 li樣式里。List-style-type: none聲明會刪除通常用來標記每個列表項目的Bullet；而display: inline聲明則能夠讓列表項目在頁面上從左向右浮動，而不會讓每個項目顯示在單獨的行里。這個技巧的另外一個關鍵元素是div#navbar2 li a規則。Text-decoration: none聲明會刪除鏈接常用的下劃線，而padding: 7px 10px聲明則用來控制導航條里鏈接（之間）的空白。左側和右側間隙用來控制水平間隔，而我們需要頂部和底部間隙，讓它們把滾動效果（以及按鈕的可點擊區域）的彩色背景充滿整個導航條。你還可以加入左側和右側空白值，如果你想要在按鈕之間加入更多空白的話。最后，:link, :visited和:hover偽類（pseudoclasse）的規則會設置用于滾動效果的顏色變化。你可以改變這個基本的技巧，以創建很多不同的導航條效果，包括流行的“目錄選項卡”樣式。本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：css各種選擇器的詳細介紹

下一篇：對CSS類及id的規范化命名