用CSS樣式表來定義部落格上的連結樣式

來源:互聯網
上載者:User
css|部落格|連結|樣式表 <style type="text/css">
A { text-decoration: NONE; color:#51bfe0}
A:hover {font-weight: bold;color:#990099}
<style>

滑鼠放在連結字型上的時候,連結字型變粗,顏色改變,如本部落格上的樣子。其中color:#990099表示連結字型改變的顏色,可以根據個人愛好修改,其他的不需要改。

<style type="text/css">
a{text-decoration:none; color:#51bfe0}
A:hover{font-size:23; background:#ffd306; color:#990099}
</style>
 滑鼠滑鼠放在連結字型上的時候,連結字型大小改變,顏色改變,有背景顏色。font-size:23表示字型大小;background:#ffd306表示背景顏色color:#990099表示字型顏色,可以根據個人愛好修改,其他的不需要改。

<style type="text/css">
a:link{text-decoration:none}
a:hover{text-decoration:none}
a:visited{text-decoration:none}
</style>
 
去掉連結字型的底線。

<STYLE TYPE="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover {border-bottom:1px dashed #51bfe0 }
<style type="text/css">
 
滑鼠放在連結字型上的時候,連結字型加虛線。

<style type="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover { position: relative; left:10px; top:10px; }
</STYLE> 
滑鼠放在連結字型上的時候,連結字型會移動,其left:10px表示字型向上移動的距離,top:10px表示字型向上移動的距離,可以根據個人愛好修改具體數值,其他的不需要改。

<style type="text/css">
a { text-decoration: none; padding-bottom: 4px; white-space: nowrap; }
a:hover { background: url(背景圖片地址) repeat-x 100% 100%; }
</style> 
滑鼠放上在連結字型上的時候,連結字型出現圖片背景。

<style type="text/css">
a{ text-decoration: none; white-space: nowrap; padding-bottom: 10px; }
a:hover { background: url('http://blog.sina.com.cn/pic/4723cdbf020002nm') repeat-x 100% 100%; }
</style> 

滑鼠放在連結字型上的時候,出現花朵底線的效果。

<style type="text/css">
a { text-decoration: none; white-space: nowrap; padding-bottom: 5px; }
a:hover { background: url('http://blog.sina.com.cn/pic/4723cdbf020002nn') repeat-x 100% 100%; }
</style> 
滑鼠放在連結字型上的時候,出現捲動箭號底線的效果。

注意:有些代碼應該甚用,如果用不好反而會適得其反,影響頁面美觀效果!這些代碼用的時候添加空白面板就行了。還有就是這些都是CSS代碼,不能放在完全沒有東西的空白面板裡,可以把它放到已有內容的面板中。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。