咖啡戒斷症候群

原本的提問, 請參考:

http://tw.knowledge.yahoo.com/question/question?qid=1008052710299

詢問的是關於 http://blog.pixnet.net/standinghere 這個blog的css技巧。

因為直接在知識家的回覆的太長了, 已經拼命刪減了很多內容還是無法存檔, 只好放在這邊!

回答:

先說明取得原始碼的問題, 簡單的取得css原始碼的方法為:
1.用瀏覽器看該網頁的原始碼。
2.找到類似敘述(以提問為例)
    <link rel="stylesheet" href="http://blog.css.adm.pixnet.net/userdata/styles/blog/css/choc/29825.css" type="text/css" />

那個: href="http://blog.css.adm.pixnet.net/userdata/styles/blog/css/choc/29825.css 就是css原始檔, 用瀏覽器開啟url就可以取得。

另一個方式更簡單, 直接用瀏覽器的"另存新檔"功能, 就會連網頁檔案, css, js等檔案都存下來, 存檔模式用 "網頁, 完整"。

css的學習還是以範例學習比較快, 即使取得原始碼, 並不代表可以直接應用, 還是得配合網頁設計修改, 應無不妥, 許多css技巧最早經國外設計師做出來後, 也是公開在網站上或blog中供人學習參考。

至於那個部落格中css的作法, 因為得解析該網頁跟css, 只挑比較圖片的導覽列為例, 這個是很公開的技巧, 最早也是由國外的css設計師(名字忘了)做出來之後公開供人參考!

說明, 請自行亂外參考該網頁跟css檔:
1. 文字導覽部份, 本來在這一段:
<UL id=navigation>
  <LI id=link-album><A title="go to gallery page of this user"
......
UL>

2. 對照 css的navigation設定, 上面這一段文字導覽已經被隱藏起來了,  就是:
#navigation {
 DISPLAY: none
}

3. 看到的導覽則是用 <li>的區塊背景做出來的, 加上滑鼠滑過的背景變換技巧, 滑鼠沒經過的時候, 是使用這張大圖作為上面整面的banner:
http://p2.p.pixnet.net/albums/userpics/2/5/39825/1204966648.png
定義在css檔的這一段:
#header {
 BACKGROUND: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/1204966648.png) no-repeat left top; COLOR: #eee; HEIGHT: 190px
}
也就是用這張大圖作為整個header區塊的背景。

4. 其中導覽列的位置設定在這一段的範圍:
#banner H2 #standing
.....
那些: #banner H2 #standing A#standing01 {
 WIDTH: 61px
}
就相當於設定每個導覽按鈕的作用範圍

5.滑鼠經過的時候, 就透過css設定變換每個按鈕區塊位置的背景, 也就是, 先用這個設定
#banner H2 #standing A:hover  .....
設定http://p2.p.pixnet.net/albums/userpics/2/5/39825/1204966538.png作為導覽列滑鼠經過的時候的背景。

6. 因為上面的滑鼠經過的背景是一整列, 所以要在美個按鈕單獨設定偏移位置, 也就是:
#banner H2 #standing A#standing01:hover {
 BACKGROUND-POSITION: 0px -2px; _background-position: 1px -2px
}

7.原理簡單來說, 就是滑鼠經過那個按鈕設定的區塊的時候, 就會改用另一張圖來作為背景, 比較特別的技巧是:

(1) 因為使用<li>來定義滑鼠區塊, 而且用背景來做出圖形按鈕, 所以<li>的文字得要隱藏起來, 就是這一段:
#banner H2 #standing A {
 DISPLAY: block; FONT-SIZE: 0px; FLOAT: left; MARGIN-LEFT: 2px; TEXT-INDENT: -5000px; HEIGHT: 35px
}

那個 TEXT-INDENT: -5000px 就是用來把文字隱藏起來

(2) 另一個小技巧是把整個導覽列的滑鼠變化按鈕用一張大圖來顯示, 但是透過每個 <li> 設定的區塊不同而產生單獨的變化。

(3) 另外, 這個css確實是高手製作, 上頭提到的 BACKGROUND-POSITION: 0px -2px; _background-position: 1px -2px 應該是用來適應不同瀏覽器的微調密技, 整個css裡頭也可以看到 "! important" 這樣的指定, 是一個兼顧到不同版本瀏覽器的精細製作。

至於無名的LG音樂俱樂部blog, 不知道問的是什麼, 上方過是個大的flash檔, 跟css無關。

要解析別人的CSS牽涉到很多所謂的css密技, 如果不是已經學習css一段時間, 建議先把css基礎打好, 才不會看不懂一些看起來很奇怪的css設定。