鄭州網(wǎng)站建設(shè)業(yè)務(wù)咨詢熱線：
0371-65349913 / 15333818157
0371-65349913 / 15333818157
在網(wǎng)頁制作時(shí)，有時(shí)候?yàn)榱诉_(dá)到好的效果，需要對網(wǎng)頁上的鏈接進(jìn)行修飾，比如當(dāng)鼠標(biāo)移動到鏈接文字或者鏈接圖片上時(shí)，可以讓鏈接顯示下陷的效果，好像鏈接會活動一樣，有一種向下陷下去的效果，本頁面就來介紹一下這個(gè)技巧的實(shí)現(xiàn)。在這里，鄭州網(wǎng)站建設(shè)公司的小編寫出了一個(gè)利用CSS技術(shù)實(shí)現(xiàn)網(wǎng)頁鏈接下陷的實(shí)例代碼，并配以實(shí)例代碼執(zhí)行后的截圖，來說明如何實(shí)現(xiàn)當(dāng)鼠標(biāo)滑動到網(wǎng)頁鏈接上時(shí)，鏈接的文字和圖片展現(xiàn)下陷的效果，本代碼在各種瀏覽器上都測試過，可兼容各種主流瀏覽器，下面是代碼執(zhí)行后的截圖：
下面列出來的是鄭州網(wǎng)站建設(shè)使用CSS技術(shù)實(shí)現(xiàn)的網(wǎng)頁代碼，當(dāng)下面的代碼執(zhí)行后，就會顯示上面的截圖，當(dāng)將鼠標(biāo)移動到文字連接和圖片鏈接上時(shí)，就可以看到文字和圖片都有一種下陷的效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用CSS技術(shù)制作出網(wǎng)頁鏈接的下陷效果</title>
<style type="text/css">
a:link,a:visited,a:active { text-decoration: none}
a:hover {text-decoration: none; position: relative; top: 1px; left: 1px}
</style>
</head>
<body>
<a href="http://www.511sj.com/">鄭州網(wǎng)站建設(shè)專家</a>----<a href="http://www.511sj.com/">鄭州凱訊公司</a>，是您的最佳合作伙伴！
<br><br>
<a href="http://www.511sj.com/"><img src="wzjs.jpg" border="0" /></a>
</body>
</html>