DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 如何批量消除網頁連接上的“虛線框”
如何批量消除網頁連接上的“虛線框”
編輯:Dreamweaver相關     

    各位想必都知道,onfocus=“this.blur()”這條代碼能消除鏈接時的虛線框,但你有沒有想過,如果你的網頁上有幾個甚至上百個鏈接,而你又想要去掉上面那些討厭的虛線框,難道你還一個個去Ctrl+C、Ctrl+V,天哪!這對一個正常人來說絕對是個惡夢。也許你會說,用DW或其它文本編輯器裡的“查找/替換”功能就能解決,對!不可否認,這是一個好辦法,但作為一個優秀的web developer,用盡可能少的代碼實現一樣的功能才是我們應當追求的目標,下面我們就用htc來解決這問題。至於htc是什麼,全稱就是HTML Components,由微軟在IE5.0後開始提供的一種新的指令組合,它可以把某種特定功能的代碼封裝在一個組件之中,從而實現了代碼的重復使用。作為一個組件,htc裡包含了屬性、方法、事件等等各種知識,在這裡就不一一介紹了,具體內容各位可以參考微軟的msdn主頁。

    回到開始處,Onfocus=this.blur()在這裡很顯然,onfocus是一個事件,this.blur()則是被事件所觸發的對象,既然這點明確了,代碼就知道該怎麼寫了。

    <public:attach event=“onfocus” onevent=“example()” />

    <script language=“javascript”>

    function example(){

    this.blur();

    }

    </script>

    將以上代碼存為。htc為擴展名的文件,然後再編寫一個普通的html網頁

    <html>

    <head>

    <style>

    a {behavior:url(htc文件所在路徑地址)}

    </style>

    <body>

    <a href=“#”>鏈接1</a>

    <a href=“#”>鏈接2</a>

    <a href=“#”>鏈接3</a>

    點鏈接試試,沒有虛線框了吧

    </body>

    </html>

    OK,保存,預覽,怎麼樣?效果出來了吧,再看看代碼,的確精簡了不少,而且在鏈接越多時體現得越發明顯。最後我要說的是,這還僅僅是htc應用上的冰山一角而已,更多的功能還需要你們去認識,相信有點JS與CSS基礎的你一定能學有所成。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved