|
CSS內(nèi)容:這是被施了魔法的地方
首先將設定所有導航項目共享的規(guī)則,如此就不必為每個標簽重復相同的規(guī)則.接著為每個清單項目id分別加上獨立規(guī)則,為<li>指定專屬的background-image與width,每個標簽只有這兩個屬性不一樣.
CSS內(nèi)容大致如下:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -20px;
}
#nav a:active, #nav a.selected {
background-position: 0 -40px;
}
前面這段CSS會把清單樣式與內(nèi)補丁去掉,把清單轉(zhuǎn)成水平,同時隱藏超鏈接里的文字.留意:hover與:active規(guī)則.這在每個#nav內(nèi)的<a>都通用,不必為每一個項目分別重復這些規(guī)則.
接著為我想持續(xù)突出顯示標簽指定"selected"類,提示讀者目前在網(wǎng)站內(nèi)的位置.這些規(guī)則與:active狀態(tài)共用.
你或許也會注意到我們重復為#nav和#nav li指定了list-style:none;與display:inline;規(guī)則這是為了討IE5 for Windows歡心,在完美的世界里,只要為#nav指定一次這些規(guī)則就夠了,當然這不是現(xiàn)狀.
接著,再為每個id加上規(guī)則,指定background-image和width,以下是一個實例:
#thome a {
width: 40px;
background: url(home.gif) top left no-repeat;
}
當然,每個標簽都有一段類似的聲明.
成果
圖14-13顯示了標簽在普通狀態(tài),鼠標滑過狀態(tài),選定狀態(tài)下效果.如果你想看它實際運作的效果,可以看看SimleBits上面的示例于源代碼(http://www.simplebits.com/bits/tab_rollovers.html).
圖14-13 標簽導航效果,示范三種不同狀態(tài).
為什么要用它?
-
它非常輕量,標記源代碼里不過是個無序清單.
-
它易于使用: 利用Stuart的方法,我們確信屏幕閱讀器能夠念出文字鏈接.
-
不用JavaScript:不要預先載入圖片,或是為每個狀態(tài)分別制作圖片.也不需要額外的JavaScript控制鼠標滑過效果.謝拉!Pixy兄.
-
它很美觀:把文字放到指定的位置頗需技巧,這讓我們可以直接使用漂亮的圖片.
但是等等,文字不會變化大小!
遵照Douglas Bowman的好建議,同時回應易讀性問題,無法調(diào)整圖片大小問題,我更進一步制作了第二組文字放大的標簽圖片.然后我就能在現(xiàn)存的medium和large替換樣式表里面覆蓋這些規(guī)則.我用Paul Sowden的樣式表切換器啟用替換樣式表,先前在第十章"技巧延伸"中提到過.
覆蓋的樣式規(guī)則與先前的代碼幾乎相同,只修改了圖片位置,寬度:
#thome a {
width: 46px;
background: url(guides_lg.gif) top left no-repeat;
}
圖14-14顯示了Fast Company網(wǎng)站上放大過后的標簽效果,你能發(fā)現(xiàn)水平距離變窄了,而垂直大小與原始標簽一樣.但是,加上了放大文字,標簽圖片大小的功能之后,我們不僅幫助了視力不佳的使用者,同時仍然遵守現(xiàn)有的設計細節(jié).
圖14-14 用替換樣式表放大圖標圖片的導航條
兼容性
這個方法經(jīng)過測過,應該同時能在所有5.0版之后的瀏覽器上正常運作.
針對Fast Company的網(wǎng)站,我選擇用position:absolute指定#nav的位置,以便完美對齊所有元素,讓標題區(qū)域的背景色彩顯示出來.這個方法效果十分完美,除了Opera7 for Windows以外,它需要為絕對定位元素指定寬度.
這沒什么問題;只要為#nav指定所有圖片的寬度總和就好了:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
width: 201px;
}
這下我們能夠睡個好覺了,Opera的擁護者也高興了.
結(jié)論
現(xiàn)在你已經(jīng)跟上圖片替換技術(shù)的最新發(fā)展了,雖然還沒有完美的解決方案,我仍希望你已準備好相關(guān)知識,這些原則十分重要,值得理解,實驗一番.
除此之外,通過示范了兩個真實的圖片替換技巧使用法,我希望能使你開始前進,而你...對,就是你...會是那個發(fā)現(xiàn)下一個最佳做法的人,運氣和名望正等著你!
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2824504-1-1.html
下文：Chapter 15 為<body>指定樣式
本文鏈接：http://m.95time.cn/tech/web/2008/6115.asp 
出處：藍色理想
責任編輯：bluehearts
上一頁 標記語言——圖片替換 [7] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 8 頁 標記語言——圖片替換 [8]
