方法D: 愉快的包裝者

• Apples


• Spaghetti


• Green Beans


• Milk

容器元素,同時每個項目都已
• 元素閉合起來.到這裡你會想問,我們花費了那麼多力氣只會來示範為了正確而正確?我們來看看這樣做能帶來的好處:
  由於我們正確的標記了我們的食品清單,每個項目都會獨佔一行(因為塊級元素
• 的關係),而且大多數瀏覽器會給每個項目的左邊增加一個小圓點符號,並且進行正確的行內縮排換行.(見圖 1 - 3)
  

  圖1 - 3
  PDA,行動電話,或其他的小螢幕設備的使用者也可以看到清楚的,關係明確的組織方式,由於我們告訴了這些設備這些資料的類型(在這個範例裡是清單),因此這些設備能夠根據自己的能力決定怎樣顯示才能達到最好的效果.
  如果因為放大字號或縮小瀏覽器視窗寬度等原因造成換行,那麼被換行的文字會行內縮進到與第一行文字對齊的位置,所以不管瀏覽器環境如何,都可以輕鬆的識別每清單項目.  

  ---

  概要
  我們已經針對每種可能的方法進行討論了,現在讓我們快速的回顧一下剛才討論過的東西: 方法A:
  無法為清單加上獨特的樣式
  在狹窄的列里或小螢幕裝置上,較長的內容可能會因為換行而造成誤解
  缺乏語意性 方法B:
  增加小圓點符號來幫助識別每個項目,但是一些瀏覽器會在缺少父級標籤

  時可能不顯示小圓點符號
  沒有放在
  中,缺少閉合標籤
意味著難於加上樣式
不標準 方法C:
加上了閉合標籤後就不需要
標籤了
省略了
元素使得我們難於為這個清單添加特定的樣式
不標準 方法D:
符合標準!
使文件語意化,結構性
大多數瀏覽器都會在每個項目左邊顯示小圓點符號
在大多數瀏覽器上都會在換行後行內縮進
很容易就可以定義特定的css樣式
正如你所見,你可以從一個看起來很簡單的問題上獲得不少知識.就算是你已經在你所有的頁面上都是用了方法D,還是可以你為什麼這樣做比較好,我們會在這本書裡一直探索"為什麼"的問題,讓你在各種情況下選用最恰當的方法.  

---

技巧延伸
讓我們利用我們建構出來的食品清單來試看看幾種用定義css樣式的方法,我們將拋開預設樣式,加入自定義的圓點符號,接著把它轉成橫向,把它變作一個導航條.
丟掉圓點
"我真的不喜歡食品清單裡的那些個小圓點,我想我還是用回
吧."
不需要回到舊習慣 — 我們仍然可以使用我們結構化的無序清單,然後使用css關閉掉小圓點符號和行內縮進,關鍵在於我們保留了清單的結構,然後以css具體的呈現出來.
首先,加上一段去掉圓點符號的css規則:
ul{
list-style:none;
}
顯示的結果見圖1 - 4


圖1 - 4 去掉小圓點符號
接著我們來去掉行內縮排,根據預設值,所有無序清單左邊都會留有一些內補丁(padding),但是不用擔心,我們可以隨心所欲的裁掉:
ul{
list-style:none;
padding-left:0;
}
顯示結果可見圖1 - 5


圖 1 - 5
雖然圖 1 - 5 看起來和使用了幾個
標籤的效果幾乎一樣,但是它還是符合標準的,結構化的無序列表 — 不管什麼瀏覽器,設備都能正常顯示,如果必要的話只需要更新幾條css規則就能換上不同的樣式了. 

---

使用自訂圓點符號來完成自己的想像
或許你想要在清單裡保留小圓點符號,但是不想用瀏覽器無趣的默認設置,更像用自己的小圓點圖案.有兩種方法可以達成你想要的— 而我更推崇第二種方法,因為它可以在各種瀏覽器之間更好的兼容.
第一種方法是用list-style-image 屬性來指定用來替代默認小圓點的圖片名稱.
ul{
list-style-image:url(i_hot.gif)
}
這是最簡單的方法,但是它會在不同瀏覽器之間的圖片垂直對齊位置上有不同,有些瀏覽器會把圖片和項目文字中線對齊,也有的會把圖片放得稍微高一點,它們之間有一點不一致.
為了避免 list-style-image 造成的幾個流行瀏覽器之間的對齊問題,我比較喜歡用一種替代方法:把圖片作為每個

• 元素的背景.
  首先,我們要去掉預設的圓點,然後再加上我們自己的背景圖片:
  ul{
  list-style:none;
  }
  li{
  background -image:url(i_hot.gif) no-repeat 0 50%;
  padding-left:25px;
  }
  no-repeat 會告訴瀏覽器不把背景圖片進行平鋪操作(預設會平鋪),而0 50%會告訴瀏覽器把背景圖片放置在距離左邊 0 像素,距離上面 50% 的地方,讓背景圖片 i_hot.gif 根據中線對齊.我們也可以用精確的像素來指定位置,比如說 0 6px 會讓圖片放置在距離左邊0像素,距離上面 6 像素的位置上.
  我們還要在清單項目的左邊加上17像素的內補丁(padding),以便我們把寬20像素高11像素的圖片能夠完整顯示出來,同時又留有一點空白,而不會和文字有重疊.這些數據應該根據你所使用的圖片尺寸進行調整

  ---

  導航清單
  在我的個人網站裡我分享了幾種將無序清單轉化為水平導航條的方法,用普通的,結構化的XHTML就像我們的食品清單範例那樣創造一個類似分頁標籤(Tab)的效果.
  我們把那張食品清單轉換成一個網上超市的導航條(這個超市只賣幾種東西就是了...).
  我們想要這個導覽條以水平的方式呈現,並且能夠在滑鼠劃過,選中時有某種強調顯示,以便我們模擬分頁標籤的效果.
  首先,我們為清單加上一個id,這樣我們就可以為它單獨定義css樣式了,同時我們也將把每個食品項目轉成鏈接.
  

  
  
  • Apples
  
  
  • Spaghetti
  
  
  • Green Beans
  
  
  • Milk
  
  
  
  現在,開始加上一些輔助的css:
  #minitabs{
  margin:0;
  padding:0 0 20px 10px;
  border-bottom:1px solid #696;
  }
  #minitabs li{
  margin:0;
  padding:0;
  display:inline;
  list-style:none;
  }
  在這裡我們已經完成了去掉預設圓點符號和行內縮進的工作,我們也把 display設定成inline,往垂直清單轉換成水平清單邁出了第一步,同時我們也加上了底部邊框以便區分出整個連結組.
  把清單轉換成水平導航條的第二步,是將我們的連結全部浮動到左邊顯示,我們同樣為所有的超連結加上簡單的樣式:定義外邊距和內補丁的大小:
  #minitabs {
  margin: 0;
  padding: 0 0 20px 10px;
  border-bottom: 1px solid #696;
  }
  #minitabs li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
  }
  #minitabs a {
  float: left;
  line-height: 14px;
  font-weight: bold;
  margin: 0 10px 4px 10px;
  text-decoration: none;
  color: #9c9;
  }
  在這裡我們將清單中所有的元素都定義float:left,是為了讓他們能水平顯示排列於一行之內,同時我們也加上了一些色彩,把連結改成粗體,拿掉了連結底部的下劃線.
  然後,為滑鼠滑過或選取的連結建立一個模擬分頁標籤的邊線:
  #minitabs {
  margin: 0;
  padding: 0 0 20px 10px;
  border-bottom: 1px solid #696;
  }
  #minitabs li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
  }
  #minitabs a {
  float: left;
  line-height: 14px;
  font-weight: bold;
  margin: 0 10px 4px 10px;
  text-decoration: none;
  color: #9c9;
  }
  #minitabs a.active, #minitabs a:hover {
  border-bottom: 4px solid #696;
  padding-bottom: 2px;
  color: #363;
  }
  #minitabs a:hover {
  color: #696;
  }
  為了強調連結,我們在滑鼠劃過或選取時增加一個4像素高的底邊,我們也可以使選中的標籤保持強調效果,只要加上cla​​ss="active":
  
• spaghetti

這個 active類與 a:hover的共用相同的css樣式.(圖 1 - 7)


圖1 - 7
我在自己的網站以及2003年7月重構裡面都用到了這個技巧.如果你需要更多的示例代碼,可以自由訪問這兩個網站並查看他們的源代碼.
只需要加上一些內補丁和邊框,就可以達到各種類似分頁標籤的效果了,到目前為止,我們甚至連一張圖,一句javascript都沒有使用,而僅僅只用到了基本的xhtml結構就構成了我們的食品清單,這實在是太棒了!
迷你分頁標籤的外觀
如果你想要和平常的,方方正正的css邊框不太一樣的效果的話,只需要作出一點點小修改,我們就可以使用圖片來創建有趣的導航條了.
我們使用和之前完全一樣的無序清單,以及十分類似的css:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#minitabs a.active, #minitabs a:hover {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
這段css大概看起來和上一個範例中的幾乎一樣,最主要的區別在我們用 background-image 定義了在滑鼠劃過或選取的時候顯示在連結底部中間的圖片來取代了原本的4個像素高的底部邊框.(圖1 - 8)


圖1 - 8: 使用背景圖的迷你分頁標籤導航
這裡的技巧在於選擇一個足夠窄的圖片,必須能夠塞進最短的導航條項目下,這樣一來我們只需要一張圖片來強調導航鏈接而不必為各種不同寬度準備不同的圖片,當然,在你自己的專案中,你可以選擇各種圖片使用(圖 1 - 9):


圖 1 - 9: 使用其他圖片的範例