繼上次 CSS 可以放大縮小網頁的文章後, 這次再來一篇, 就是如何用一樣的方式去掉討人厭的廣告...
我最討厭的廣告就是那種會上下跑的, 或是直接跳出來 (不是 popup window) 檔在網頁正中央的.. 碰到這種網頁, 也是可以用 CSS 來對付它啦!
本來 http://www.yahoo.com.tw, http://www.pchome.com.tw 都有這種廣告, 不過突然不見了 :@, 只好換 UDN.com 來示範.
原理很簡單, 只要能找到廣告的那個 DIV element 的 ID 就好了. 接下來就可以在 CSS, 先用 selector 挑到指定的 element, 再把這個 element 的 display 樣式設定為 none 就大功告成了!
以 http://www.udn.com 為例, 右邊跟著跑的小廣告, 它的 HTML code 為:
<SPAN id=logo style="LEFT: 870px; WIDTH: 90px; POSITION: absolute; TOP: 1195px; HEIGHT: 160px"><A href="http://ad4.udn.com/RealMedia/ads/click_nx.ads/udn.com/watermark-top@Top" target=_blank><IMG alt=CLICK src="http://ad4.udn.com/RealMedia/ads/adstream_nx.ads/udn.com/watermark-top@Top" border=0></A></SPAN>
因此, 要用 bookmark 的方式除掉這個廣告就太簡單了, 只要把下面的 link 放在我的最愛, 逛到這個網頁後再點這個 link 就可以.
javascript:document.all.logo.style.display="none";void(0);
如果想要跟上篇一樣直接寫在 CSS file 裡, 不要每次逛網頁再點 link, 就可以把這段 css 內容寫到檔案:
#logo {display:none;}
哇哈哈, 真過癮, 一點下去廣告就不見了... 旁邊那條直的 flash 也一起拿掉好了... link 改成:
javascript:document.all.logo.style.display="none";document.all.banner.style.display="none";void(0);
用 CSS 方式的話, 只要加入這兩行:
#logo {display:none;}
#banner {display:none;}
就這樣簡單而以, 不要懷疑.. 其實 CSS 還有很多有趣的應用, 想到再貼上來
Subscribe