當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML与CSS（图解6）：超链接

發布時間：2023/12/19 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML与CSS（图解6）：超链接小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

動態的超鏈接：

<html> <head> <title>動態超鏈接</title> <style>  </style></head> <body> <table align="center" cellpadding="1" cellspacing="0"><tr><td><img src="banner3.jpg" border="0"></td></tr> </table> <table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center"><tr><td><a href="#">首頁</a></td><td><a href="#">心情日記</a></td><td><a href="#">Free</a></td><td><a href="#">一起走到</a></td><td><a href="#">從明天起</a></td><td><a href="#">紙飛機</a></td><td><a href="#">下一站</a></td></tr> </table> </body> </html>

按鈕式超鏈接:

<html> <head> <title>按鈕超鏈接</title> <style>  </style></head> <body><a href="#">首頁</a><a href="#">心情日記</a><a href="#">學習心得</a><a href="#">工作筆記</a><a href="#">生活瑣碎</a><a href="#">其他</a> </body> </html>

浮雕超鏈接：

<html> <head> <title>浮雕超鏈接</title> <style> body{padding:0px;margin:0px;background-color:#f5eee1; } table.banner{background:url(banner1_bg.jpg) repeat-x;width:100%; } table.links{background:url(button1_bg.jpg) repeat-x;font-size:12px;width:100% } a{width:80px; height:32px;padding-top:10px;text-decoration:none;text-align:center;background:url(button1.jpg) no-repeat; /* 超鏈接背景圖片 */ } a:link{color:#654300;} a:visited{color:#654300;} a:hover{color:#FFFFFF;text-decoration:none;background:url(button2.jpg) no-repeat; /* 變換背景圖片 */ } </style> </head><body> <table cellpadding="0" cellspacing="0" class="banner"><tr><td><img src="banner1_left.jpg" border="0"></td></tr> </table> <table cellpadding="0" cellspacing="0" class="links"><tr><td><a href="#">首頁導讀</a><a href="#">在線用戶</a><a href="#">查詢網友</a><a href="#">在線好友</a><a href="#">好友名單</a><a href="#">查看訊息</a><a href="#">發送訊息</a></td></tr> </table> </body> </html>

?
變形鼠標形狀：

?參考：

來自：http://www.cnblogs.com/jian1982/archive/2011/08/03/2125873.html

cursor:hand 與 cursor:pointer 的效果是一樣，都像手形光標。但用FireFox瀏覽時才注意到使用cursor:hand在FireFox里并被支持。
cursor:hand ：IE完全支持。但是在firefox是不支持的，沒有效果。
cursor:pointer ：是CSS2.0的標準。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6開始支持。

附：cursor屬性收集

光標類型?? CSS
十字準心 cursor: crosshair;
手 cursor: pointer;
cursor: hand;
寫兩個是為了照顧IE5，它只認hand。
等待/沙漏 cursor: wait;
幫助 cursor: help;
無法釋放 cursor: no-drop;
文字/編輯 cursor: text;
可移動對象 cursor: move;
向上改變大小(North)?? cursor: n-resize;
向下改變大小(South)?? cursor: s-resize;
向右改變大小(East)?? cursor: e-resize;
向左改變大小(West)?? cursor: w-resize;
向上右改變大小(North East)?? cursor: ne-resize;
向上左改變大小(North West)?? cursor: nw-resize;
向下右改變大小(South East)?? cursor: se-resize;
向下左改變大小(South West)?? cursor: sw-resize;
自動 cursor: auto;
禁止 cursor:not-allowed;
處理中 cursor: progress;
系統默認 cursor: default;
用戶自定義（可用動畫） cursor: url(‘ # ‘);
# = 光標文件地址??? (注意文件格式必須為：.cur 或 .ani)。

例如：

<html> <head> <title>鼠標變幻超鏈接</title> <style>  </style></head> <body> <table cellpadding="0" cellspacing="0" class="banner"><tr><td><img src="banner2_left.jpg" border="0"></td></tr> </table> <table cellpadding="0" cellspacing="0" class="links"><tr><td><a href="#">首頁導讀</a><a href="#">推薦版面</a><a href="#">推薦文章</a><a href="#">收藏夾</a><a href="#">我的信箱</a><a href="#">休閑娛樂</a><a href="#" class="help">幫助</a></td></tr> </table> </body> </html>

總結

以上是生活随笔為你收集整理的HTML与CSS（图解6）：超链接的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：今天面试了家公司
下一篇：挖掘经典：几乎被人遗忘的HTML七种用法