當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > 讓鏈接沒有下劃線CSS樣式怎么寫

讓鏈接沒有下劃線CSS樣式怎么寫

2012/10/27 17:23:11作者：佚名來源：網(wǎng)絡(luò)

移動端

【實(shí)例名稱】

讓鏈接沒有下劃線CSS樣式

【實(shí)例描述】

鏈接使用“a’’標(biāo)簽實(shí)現(xiàn)，默認(rèn)的鏈接包含下畫線，以區(qū)別普通的文本字符串。但有情況下為了保持布局的完整，不允許鏈接使用下畫線。本例學(xué)習(xí)如何去掉這些默認(rèn)的下畫線。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（wangbatian.cn）</title>
<style type="text/css"> 
        a {text-transform:none;text-decoration:none;} 
        a:hover {text-decoration:underline} 
</style>
</head>
<body>
<a href="http://www.google.com">我愛的搜索 </a>
</body>
</html>

【運(yùn)行效果】

                                                            默認(rèn)的鏈接效果

運(yùn)行效果

                                                 鼠標(biāo)移動到鏈接上時的效果

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是CSS樣式的使用。在樣式表中，使用“a’’標(biāo)簽設(shè)置鏈接的屬性，其中“text—decoration”屬性表示文本的下劃線，"none"表示禁止下劃線?！癮：hoVer”表示鼠標(biāo)移動到鏈接上的效果，“underline”表示鏈接帶下劃線。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：讓鏈接沒有下劃線 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： 鏈接  CSS