DIVCSS實(shí)例教程：去除鏈接元素的虛線框(兼容IE7、IE6、FF)_瀏覽器兼容教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
DIVCSS實(shí)例教程：去除鏈接元素的虛線框 （兼容IE7、IE6、FF）
Web的發(fā)展非常迅速，UI設(shè)計(jì)也越來越美觀，漂亮。同時(shí)也給WEB前端編碼提出了新的要求。鏈接元素在點(diǎn)擊時(shí)會出現(xiàn)虛線框，由于種種原因，您的主管可能要求你想辦法將鏈接虛線邊框出除。
鏈接元素虛線框如處圖所示：
我們采用htc文件的辦法來解決這個(gè)問題。首頁將以下代碼保存為link.htc文件。
示例代碼 [m.ghpqjb.com]
<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>
在HTML文件中寫入以下代碼，建立一個(gè)鏈接：
示例代碼 [m.ghpqjb.com]
<a href="#" title="模板無憂">mb5u.com</a>
我們開始為此鏈接定義CSS樣式：
示例代碼 [m.ghpqjb.com]
a {
display:block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
}
a:hover {
background:#ddd;
}
display:block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
}
a:hover {
background:#ddd;
}
CSS樣式確定了鏈接的外觀，具有一定寬度與高度的塊元素。文字水平左右均居中對齊。
我們在a標(biāo)簽的樣式內(nèi)，加入一條屬性。用此消除鏈接的虛線邊框：
示例代碼 [m.ghpqjb.com]
a {
display:block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
behavior:url(line.htc);
}
display:block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
behavior:url(line.htc);
}
我們運(yùn)行以下代碼查看效果：
代碼調(diào)試框 [m.ghpqjb.com][ 可先修改部分代碼 再運(yùn)行查看效果 ]
我們在IE7、IE6中預(yù)覽，已經(jīng)沒有問題了。但是在FF中虛線框依然存在。
我們新增一條樣式定義來解決此問題。
示例代碼 [m.ghpqjb.com]
a:focus { outline:0; }
查看最終的運(yùn)行效果：
代碼調(diào)試框 [m.ghpqjb.com][ 可先修改部分代碼 再運(yùn)行查看效果 ]
在IE7、IE6、FF中均成功實(shí)現(xiàn)了消除鏈接的虛線框。
/所屬分類：瀏覽器兼容教程/更新時(shí)間：2008-06-04
相關(guān)瀏覽器兼容教程：
瀏覽器兼容教程Rss訂閱Div+Css教程搜索
瀏覽器兼容教程推薦
猜你也喜歡看這些
- 從GMail來看W3C網(wǎng)頁標(biāo)準(zhǔn)和Ajax
- DreamweaverCS3體驗(yàn)1
- 網(wǎng)頁設(shè)計(jì)制作CSS實(shí)現(xiàn)隔行換色兩種方法
- word-wrap同word-break的區(qū)別
- Web標(biāo)準(zhǔn)學(xué)習(xí)：保持清晰的文檔結(jié)構(gòu)
- Web的內(nèi)容(Content)、結(jié)構(gòu)(Structure)與表現(xiàn)(Presentation)漫談
- web2.0網(wǎng)站常用可用性功能塊分析
- 學(xué)習(xí)完全掌握純CSS布局網(wǎng)頁
- Web標(biāo)準(zhǔn)建站常見錯(cuò)誤和校驗(yàn)方法
- XHTML與CSS的面向?qū)ο缶幊?/a>
- 相關(guān)鏈接：
- 教程說明：
瀏覽器兼容教程-DIVCSS實(shí)例教程：去除鏈接元素的虛線框(兼容IE7、IE6、FF)
。