[問題] 這種寫法的用意在那裡?

看板Web_Design作者 (ljm71)時間16年前 (2007/12/14 16:19), 編輯推噓10(10推 0噓 16→)
留言26則, 12人參與, 最新討論串1/1
在某個國外網站看到的圖片寫法 html部分 <h1 id="style"><span>this is text</span></h1> css部分 #style{ background:url(image/top.gif) top left no-repeat; width:400px; height:20px; } #style span{ display:none; } 我才剛開始學寫網頁 我不懂的是，為什麼要把圖片寫在h1內呢? 為什麼不直接用<img src="image/top.gif" />來寫呢? 這樣寫有什麼好處或優點呢? 謝謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 59.117.199.48
推
12/14 16:32, , 1F
初步防右鍵抓圖吧，我想...
12/14 16:32, 1F
推
12/14 16:40, , 2F
哈沒錯～不過也只有一般使用者會覺得莫名其妙罷了
12/14 16:40, 2F
→
12/14 16:42, , 3F
還有文繞圖吧～
12/14 16:42, 3F
推
12/14 16:46, , 4F
就是在文字背景顯示圖片阿 很奇怪嗎?用<img>來做才奇怪吧
12/14 16:46, 4F
→
12/14 16:54, , 5F
唔~可是它又做了display:none的設定 所以讓我感到奇怪
12/14 16:54, 5F
→
12/14 16:56, , 6F
另外想請教一下 研究別人網頁的寫法 有什麼好方法嗎?
12/14 16:56, 6F
→
12/14 16:57, , 7F
每次開原始檔就落落長 頭好暈 @_@
12/14 16:57, 7F
推
12/14 17:04, , 8F
這是css技巧...FIR(圖片置換)
12/14 17:04, 8F
→
12/14 17:05, , 9F
12/14 17:05, 9F
→
12/14 18:07, , 10F
請教一下 這技巧的功用就是防右鍵和文繞圖嗎?
12/14 18:07, 10F
推
12/14 18:18, , 11F
我怎麼看不出來這跟防右鍵抓圖有什麼關係 o_oa"
12/14 18:18, 11F
→
12/14 18:19, , 12F
而且跟文繞圖又有什麼關係？跟圖片置換又有什麼關係？ 囧
12/14 18:19, 12F
→
12/14 18:21, , 13F
只是表達架構的規劃所以這樣而已吧 (￣□￣|||)a
12/14 18:21, 13F
推
12/14 18:37, , 14F
SEO的技巧 加上結構清楚
12/14 18:37, 14F
→
12/14 18:46, , 15F
上面推文說有這些用途 所以...
12/14 18:46, 15F
推
12/14 20:12, , 16F
這本來就是xhtml的正確寫法~不是嗎?
12/14 20:12, 16F
推
12/14 22:15, , 17F
會這樣做的原因為了達到XHTML結構化的緣故
12/14 22:15, 17F
→
12/14 22:17, , 18F
<h1>是結構上必須的, 可是因為視覺上美化的需求, 所以
12/14 22:17, 18F
→
12/14 22:18, , 19F
用CSS選擇器幫h1加上背景圖; 但是原有的文字(XHTML不可
12/14 22:18, 19F
→
12/14 22:18, , 20F
以省略元素的文字), 所以利用<span>包起來, 再用display
12/14 22:18, 20F
→
12/14 22:19, , 21F
:none 來隱藏文字, 避免擋到h1的圖.. 類似的手法還有
12/14 22:19, 21F
→
12/14 22:20, , 22F
text-indent: -9999px 的方式.. 大概很多人看不懂吧(汗)
12/14 22:20, 22F
推
12/15 00:51, , 23F
推樓上專業 這種作法真辛苦啊..
12/15 00:51, 23F
推
12/16 15:13, , 24F
FIR。在css zen garden的書中有非常仔細的介紹。
12/16 15:13, 24F
→
12/16 15:15, , 25F
比較重要的是，FIR有無障礙瀏覽的問題。要注意一下。
12/16 15:15, 25F
→
12/17 00:11, , 26F
用text-indent:-9999px比較好，不會有親和性的問題～
12/17 00:11, 26F
‣ 更多 ljm71 的文章
文章代碼(AID): #17OZofx7 (Web_Design)