CSS的水平導航條

1、 面內容，所以很多制作 Web 的人正在尋找(新的)方法，用結構化的 XHTML 標記和 CSS 格 導航條由放在一行表格單元里的圖形圖像構成。由于人們不再推薦用表格來定位任何非表格的頁面內容，所以很多制作 Web 的人正在尋找(新的)方法，用結構化的 XHTML 標記和 CSS 創(chuàng)建 CSS 樣式文本導航條的最簡單解決方法也許就是把所有的鏈接都放在一行文本里，就像例 間以及前后的空白。所以， 為了避免所有的鏈接都擠在一起，你最后通常都不得不插入管道(垂 直條)和非換行的空白字符作為分隔符。就如下面的代碼所示，結果很難是我們所要的清晰、結構化的標示。navbarButton 1 | ahref

2、linkahtmlButtona Button 3如果為了應用創(chuàng)建按鈕背景和滾動效果所需要的額外 CSS 樣式，你就要加入 標簽，這 一個豎著推起來的列表項目，每個前面都放著一個 Bullet。這似乎不符合導航條水平方向的習 但是，作為獨立列表項目集合的列表邏輯結構能夠適用于導航條里的鏈接；而 CSS 的規(guī)則讓你 能夠強制取代列表項目缺省的表現形式，以消除 Bullet 并安排列表項在頁面之上而不是之下浮 navbarButton 1Button 2Button 3本專欄的固定讀者可能會認出這個例子是我用在另一個 CSS 按鈕上的同一個標示。這個技巧吸 在頁面頂端的導航條里。下面是把文字鏈接列

3、表轉換成導航條的 CSS 代碼：divnavbar2 ghtpxwidth: 100%;ordertopsolidpxbackgroundcolor9;divnavbar2 ul dingpxfont-family: Arial, Helvetica, sans-serif;font-size: sm all;color: FFF;lineheight30px;white-space: nowrap;divnavbar2 li list-style-type: none;display: inline;divnavbar2 li a text-decoration: none;padding:

4、 7px 10px;color: FFF;divnavbar2 lia:link color: FFF:divnavbar2 lia:visited color: CCC;divnavbar2 lia:hover font-weight: bold;color: FFF;backgroundcolorFFDivnavbar2 樣式會設置包含有導航條鏈接的 div 的尺寸和背景。 即使瀏覽器的窗口太窄而無法顯示整個行。 來標記每個列表項目的 Bullet；而 display: inline 聲明則能夠讓列表項目在頁面上從左向右浮 每個項目顯示在單獨的行里。tionnone 除鏈接常用的下劃線，而 padding: 7px 10px 聲明則用來控制導航條里鏈接(之間)的空白。 左側和右側間隙用來控制水平間隔，而我們需要頂部和底部間隙， 讓它們把滾動效果(以及按鈕 最后， :link, :visited 和:hover 偽類( pseudo