文字链接技术基础

<style type="text/css"> <!-- .font1 {text-decoration: none;font-family:华文行楷;color:orange;font-size:16px;} a { font-size: 16px; color: #999999; text-decoration: none;font-family:华文新魏;} a:hover {text-decoration: none;font-family:隶书;color:blue;font-size:14px;} --> </style> <div class="font1" style="writing-mode=tb-rl;height:250px" width=300> <p>盛夏　　　　　　尚　涛　 <p><a href=http://www.webjx.com/htmldata/2006-06-19/"index.htm">一夜露痕黄粉香　袁运甫 </a> <p>瑶池昨夜新凉　　王金岭 <p>一朵白莲随意开　吴冠南 <p>新雨迎秋欲满塘　齐辛民 <p>十里荷香　　　　齐辛民 <p>濯清莲而不妖　　卢世曙 </div><br><br>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

<style type="text/css"> <!-- a:link { color: #efefef; text-decoration: none; } a:hover { color: #000000; text-decoration: underline overline; } a:visited { color: #000000; text-decoration: none; } --> </style> <table width="388" border="1" cellpadding="3" cellspacing="0" bordercolor="#efefef" bgcolor="#efefef"> <tr> <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><a href="http://www.blueidea.com">每天有每天的事，每天有每天的麻烦。所以不用怕。</a></td> </tr> <tr> <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><a href="http://www.cnbruce.com">让自己不至于在等待回贴的过程中血气上涌</a></td> </tr> <tr> <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><a href="http://www.it365cn.com">佛曰：一切经典首句应安“如是我闻”等证信的句子</a></td> </tr> </table> <br><br><br> <table border="0" cellpadding="0" cellspacing="0"><tr><td class="doc_sign">　　　　　　<br> <style type="text/css"> <!-- a { font-size: 12px; color: #000000; text-decoration: none; } a:hover { font-size: 14px; font-weight: bold; color: #CC3300; text-decoration: none; } --> </style> <table width="234" border="0" cellspacing="3" cellpadding="0"> <tr> <td height="20"><a href=http://www.webjx.com/htmldata/2006-06-19/"#">没有最好,</a></td> <td><a href=http://www.webjx.com/htmldata/2006-06-19/"#">只有更好!</a></td> </tr> <tr> <td height="20"><a href=http://www.webjx.com/htmldata/2006-06-19/"#">在成为高手之</a></td> <td><a href=http://www.webjx.com/htmldata/2006-06-19/"#">前先摆脱白痴</a></td> </tr> </table>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

滚动公告板,文字链接下划虚线,背景变色:

<style> A { COLOR: #333333; TEXT-DECORATION: none ;border-bottom:1px dotted } A:hover { COLOR: #333333; background-color:#C0FFFF; } td { FONT-SIZE: 9pt; FONT-FAMILY: "Verdana"; color:#3333333;letter-spacing : 1pt ;line- height :14pt} </style> <table width=380 bgcolor=#f7f8f9 border=0 cellspacing=0 style="border:#cccccc 1px solid;" height="18"><tr><td><div id="icefable1" style="width:500;"> <TABLE cellSpacing=0 cellPadding=0 border=0 height="18"><TBODY><TR><TD width=201 height=18>·<A href="http://itbbs.pconline.com.cn/traditional/showVote.jsp? topic=390802&amp;forum=27&amp;voteId=642" target=_blank>是时候给家里安装无线网络啦 </A></TD><TD width=177 height=18>·<A href="http://itbbs.pconline.com.cn/traditional/showVote.jsp? topic=391065&amp;forum=26&amp;voteId=645" target=_blank>RSS：会不会革IE的命? </A></TD></TR><TR><TD height=18>·<A href="http://itbbs.pconline.com.cn/traditional/article.jsp?topic=349368&amp;forum=5%20" target=_blank>惨痛！AGP插槽烧了......</A></TD><TD height=18>·<A href="http://itbbs.pconline.com.cn/traditional/article.jsp? topic=389094&amp;forum=26&amp;voteId=0" target=_blank>PC 上演绎 MAC 神话 ！ </A></TD></TR><TR><TD height=18>·<A href="http://itbbs.pconline.com.cn/traditional/article.jsp?topic=386963&amp;forum=7" target=_blank>六种完美解决显示器问题方法</A> </TD><TD height=18><A href="http://itbbs.pconline.com.cn/traditional/article.jsp?topic=388737&amp;forum=4" target=_blank>·Free仔靓卡损失惨重!多图</A></TD></TR></TBODY></TABLE> </div><div id="icefable2" style="position:absolute;z- index:1;visibility:hidden"></div></td></tr></table> <script> marqueesHeight=18; stopscroll=false; icefable1.scrollTop=0; with(icefable1){ style.width=0; style.height=marqueesHeight; style.overflowX="visible"; style.overflowY="hidden"; noWrap=true; onmouseover=new Function("stopscroll=true"); onmouseout=new Function("stopscroll=false"); } preTop=0; currentTop=0; stoptime=0; function init_srolltext(){ icefable2.innerHTML=""; icefable2.innerHTML+=icefable1.innerHTML; icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML; setInterval("scrollUp()",50); } function scrollUp(){ if(stopscroll==true) return; currentTop+=1; if(currentTop==19) { stoptime+=1; currentTop-=1; if(stoptime==50) { currentTop=0; stoptime=0; } } else { preTop=icefable1.scrollTop; icefable1.scrollTop+=1; if(preTop==icefable1.scrollTop){ icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight; icefable1.scrollTop+=1; } } } init_srolltext(); </script> <BR><BR><BR>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

<style type="text/css"> <!-- td{width:1%;height:1%;} a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { font-size: 14px; line-height: normal; font-weight: bolder; color: #ffff00; text-decoration: none; background-color: #006699; font-family:华文行楷; } a:active { text-decoration: none; } .style1 {font-size: 12px} .aa { color: #FFFFFF; background-color: #006699; filter: Alpha(Opacity=50); } .bb { color: #666666; background-color: #99CC33; } .style2 {color: #666666; background-color: #99CC33; font-size: 12px; } --> </style> <center> <table width="700" border="0" cellpadding="1" cellspacing="1" bgcolor="#006699"> <tr bgcolor="#FFFFFF"> <td width="240" onmouseover="this.className='aa'" onmouseout="this.className='bb'" class="bb"><a href="http://www.webjx.com/htmldata/2006-06-19/jianjie.htm" target="_blank" class="style1">要为成功找方法，不为失败找借口</a></td> <td width="453" onmouseover="this.className='aa'" onmouseout="this.className='bb'" class="bb">如果可能，我愿跟他换。。。 </td> </tr> <tr bgcolor="#FFFFFF"> <td class="style2" onmouseover="this.className='aa'" onmouseout="this.className='bb'">-----------我就是邪恶的分割线----- -----</td> <td class="style2" onmouseover="this.className='aa'" onmouseout="this.className='bb'"><a href=http://www.webjx.com/htmldata/2006-06-19/"#">走过，路过，不要错过！</a></td> </tr> </table> <br><br><br> <a href="http://www.51js.coml">仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁</a>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

给链接加上一个小小的晶格化滤镜:

<style type="text/css"> <!-- a { font-family: "隶书", Arial; font-size: 12px; font-style: normal; line-height: normal; color: green; text-decoration: none; padding: 2px; } a:hover { font-family: "华文行楷", Arial; font-size: 17px; font-style: normal; line-height: normal; color: #FF0000; text-decoration: none; padding: 3px 1px 1px 3px;border-left:1 solid blue;border-right:1 solid gold; } td{text-align:center;} --> </style> <center> <table width="380" height="100" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href=http://www.webjx.com/htmldata/2006-06-19/"#">既不回头，何必不忘；</a></td> <td><a href=http://www.webjx.com/htmldata/2006-06-19/"#">既然无缘，何须誓言；</a></td> </tr> <tr> <td><a href=http://www.webjx.com/htmldata/2006-06-19/"#">今日种种，似水无痕；</a></td> <td><a href=http://www.webjx.com/htmldata/2006-06-19/"#">明夕何夕，君以陌路。</a></td> </tr> </table> <br><br><br> <Style> A { color: #0080E0; text-decoration: none; font-weight: bold; cursor: help; behavior:url(cold.htc); filter:progid:dximagetransform.microsoft.pixelate(duration=.7, maxSquare=22, enabled=false); height: 0px; clip: rect( ); } </style> <Script defer> var ar=document.getElementsByTagName('a') for (var i=0;i<ar.length;i++){ ar[i].onmouseover=function(){this.filters.item(0).apply();this.filters.item(0).play();} ar[i].onmouseout=function(){this.filters.item(0).apply();this.filters.item(0).play();} } </script> <font color=#0080e0> | <a href=http://www.webjx.com/htmldata/2006-06-19/1150679421.html#>萧萧小雨</a> | <a href=http://www.webjx.com/htmldata/2006-06-19/1150679421.html#>金翅擘海 </a> | <a href=http://www.webjx.com/htmldata/2006-06-19/1150679421.html#><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a> | <a href=http://www.webjx.com/htmldata/2006-06-19/1150679421.html#>蓝色月光 </a> | <a href=http://www.webjx.com/htmldata/2006-06-19/1150679421.html#>西林生存 </a> | <a href=http://www.webjx.com/htmldata/2006-06-19/1150679421.html#>红色黑客 |</a></font>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

用图片修饰一下文字链接：

<style> a#example2b { text-decoration: none; white-space: nowrap; padding-bottom: 5px; } a#example2b:hover { background: url('http://tech.tom.com/images/computer/2004/02/04/animarrow.gif') repeat-x 100% 100%; } </style><center> <a href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#" id="example2b">人皆可以为尧舜,一切众生皆可成佛! </a> </td></tr></table> <br><br><br><br> <style> .more:link,.more:visited{font-weight:bold;background:url(http://www.pjhome.net/images/weather/hn2_sunny.gif) no-repeat 0px -15px;}padding-left:18px;margin:5px;text-decoration:none;} .more:hover{background:url(http://www.pjhome.net/images/weather/hn2_sunny.gif) no-repeat 140px 0px;} </style> <center> <a href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#" class="more">链接后面的加个动态图标....</a>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

<style> div { width: 100px; background: #CCC; } ul { margin: 0; padding: 0; list-style: none; } li a { display: block; width: 100px; height: 30px; margin: 0; text-align: center; border-top: 1px solid #FFF; border-bottom: 1px solid #333; text-decoration: none; } li a:hover { background: #DDD; } li a:active { height: 35px; color: #ED1C24; font-weight: bold; } </style> <center> <div> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-19/"#">金翅擘海</a></li> <marquee behavior="alternate"><li><a href=http://www.webjx.com/htmldata/2006-06-19/"#">我佛山人</a></li></marquee> <li><a href=http://www.webjx.com/htmldata/2006-06-19/"#"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></li> </ul> </div>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

另外可参考css打造多彩文字链接:

<head> <style type="text/css">TD { FONT-SIZE: 12px; FONT-FAMILY: 細明體 } A { FONT-SIZE: 9pt; FONT-FAMILY: "細明體"; TEXT-DECORATION: none } .t1 { COLOR: #cc0000; TEXT-DECORATION: underline } .t2 { COLOR: #006699; TEXT-DECORATION: none } .t3 { COLOR: #006600; TEXT-DECORATION: underline overline } .t4 { COLOR: #0066ff; TEXT-DECORATION: line-through } .t5 { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; COLOR: #000099; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 20px } .t6 { BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px } .38js { FONT-SIZE: 9pt; FONT-FAMILY: "細明體"; TEXT-DECORATION: none } .t7 { BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; PADDING-BOTTOM: 5px; BORDER-LEFT: #ff0000 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px } .t8 { BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; WIDTH: 200px; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px; TEXT-ALIGN: center } .t9 { BORDER-RIGHT: #ff0000 0px double; BORDER-TOP: #ff0000 0px double; BORDER-LEFT: #ff0000 0px double; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 3px double; HEIGHT: 0px } .t10 { BORDER-RIGHT: #ffff00 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffff00 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffff00 1px solid; COLOR: #ffff00; PADDING-TOP: 5px; BORDER-BOTTOM: #ffff00 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #990000 } .t11 { BORDER-RIGHT: #d9dee8 2px outset; PADDING-RIGHT: 2px; BORDER-TOP: #d9dee8 2px outset; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #d9dee8 2px outset; WIDTH: 150px; PADDING-TOP: 2px; BORDER-BOTTOM: #d9dee8 2px outset; HEIGHT: 25px; BACKGROUND-COLOR: #d9dee8; TEXT-ALIGN: center } .t12 { BORDER-RIGHT: #0000cc 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #0000cc 1px solid; PADDING-LEFT: 4px; FILTER: Blur(Add=1, Direction=45, Strength=2); PADDING-BOTTOM: 4px; BORDER-LEFT: #0000cc 1px solid; WIDTH: 130px; COLOR: #006699; PADDING-TOP: 4px; BORDER-BOTTOM: #0000cc 1px solid; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none } .t13 { PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(http://dob.tnc.edu.tw/themes/old/bk3.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 6px; FONT-FAMILY: "細明體"; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none } .t13:hover { PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(http://dob.tnc.edu.tw/themes/old/bk4.gif); WIDTH: 120px; COLOR: #ffffff; PADDING-TOP: 6px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none } .t14 { PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(http://dob.tnc.edu.tw/bk1.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 5px; FONT-FAMILY: "細明體"; HEIGHT: 25px; TEXT-DECORATION: none } .t14:hover { PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(http://dob.tnc.edu.tw/themes/old/bk2.gif); WIDTH: 120px; COLOR: #000000; PADDING-TOP: 5px; HEIGHT: 25px; TEXT-DECORATION: none } .t1:hover { COLOR: #0000ff; TEXT-DECORATION: underline } .t2:hover { COLOR: #339900; TEXT-DECORATION: underline } .t3:hover { COLOR: #9900cc; TEXT-DECORATION: none } .t4:hover { COLOR: #ff0099; TEXT-DECORATION: none } .t5:hover { BORDER-RIGHT: #0000ff 1px solid; BORDER-TOP: #0000ff 1px solid; BORDER-LEFT: #0000ff 1px solid; COLOR: #cccc00; BORDER-BOTTOM: #0000ff 1px solid; HEIGHT: 20px } .t6:hover { BORDER-RIGHT: #00ff00 0px solid; BORDER-TOP: #00ff00 0px solid; BORDER-LEFT: #00ff33 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #00ff33 1px solid; HEIGHT: 0px } .38js:hover { FONT-SIZE: 12px; LEFT: 1px; COLOR: #009900; FONT-FAMILY: "細明體"; POSITION: relative; TOP: 1px } .t7:hover { BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; PADDING-BOTTOM: 2px; BORDER-LEFT: #ff0000 0px solid; COLOR: #990000; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px } .t8:hover { BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; WIDTH: 170px; COLOR: #336600; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px; TEXT-ALIGN: center } .t9:hover { BORDER-RIGHT: #ff0000 0px double; BORDER-TOP: #ff0000 0px double; BORDER-LEFT: #ff0000 0px double; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 5px double; HEIGHT: 0px } .t10:hover { BORDER-RIGHT: #0000ff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #0000ff 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #0000ff 1px solid; COLOR: #333333; PADDING-TOP: 5px; BORDER-BOTTOM: #0000ff 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #c8d8f0 } .t11:hover { BORDER-RIGHT: #99ccff 1px outset; PADDING-RIGHT: 2px; BORDER-TOP: #99ccff 1px outset; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #99ccff 1px outset; WIDTH: 150px; PADDING-TOP: 2px; BORDER-BOTTOM: #99ccff 1px outset; HEIGHT: 25px; BACKGROUND-COLOR: #c8d8f0; TEXT-ALIGN: center } .t12:hover { BORDER-RIGHT: #0000cc 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #0000cc 1px solid; PADDING-LEFT: 4px; FILTER: Blur(Add=1, Direction=45, Strength=1); PADDING-BOTTOM: 4px; BORDER-LEFT: #0000cc 1px solid; WIDTH: 130px; COLOR: #006699; PADDING-TOP: 4px; BORDER-BOTTOM: #0000cc 1px solid; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none } .txt10 { LINE-HEIGHT: 15px } </style> <body> <b><font color="#0099cc" size="4"> <p align="center">腳本特效展示</font></b><br> <br> </p> <div align="center"><center> <table borderColor="#0099cc" cellSpacing="0" borderColorDark="#0099cc" cellPadding="15" width="450" borderColorLight="#0099cc" border="1"> <TBODY> <tr> <td height="56"><div align="center"><center><table cellSpacing="1" cellPadding="5" width="300" align="center" bgColor="#cccccc" border="0"> <TBODY> <tr align="middle" bgColor="#ffffff"> <td class="txt10" colSpan="2">CSS打造多彩文字鏈接</td> </tr> <tr bgColor="#cccccc"> <td>一、</td> <td>初級鏈接樣式</td> </tr> <tr bgColor="#ffffff"> <td>1、</td> <td><a class="t1" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">普通鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>2、</td> <td><a class="t2" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">無下劃線鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>3、</td> <td><a class="t3" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">雙劃線鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>4、</td> <td><a class="t4" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">刪除線鏈接</a></td> </tr> <tr bgColor="#cccccc"> <td>二、</td> <td>進階鏈接樣式風格</td> </tr> <tr bgColor="#ffffff"> <td>1、</td> <td><a class="t5" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">另類下劃線的原理</a></td> </tr> <tr bgColor="#ffffff"> <td>2、</td> <td><a class="t6" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">定制下劃線色彩</a></td> </tr> <tr bgColor="#ffffff"> <td>3、 </td> <td><a class="t7" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">定制下劃線距離</a></td> </tr> <tr bgColor="#ffffff"> <td>4、 </td> <td><a class="t8" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">定制下劃線長度和對齊方式</a></td> </tr> <tr bgColor="#ffffff"> <td>5、 </td> <td><a class="t9" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">定制雙下劃線</a></td> </tr> <tr bgColor="#ffffff"> <td>6、 </td> <td><a class="38js" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">按鈕式鏈接</a></td> </tr> <tr bgColor="#cccccc"> <td>三、</td> <td>高級鏈接樣式風格</td> </tr> <tr bgColor="#ffffff"> <td>1、</td> <td><a class="t10" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">定義塊狀鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>2、</td> <td><a class="t11" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">定義按鈕風格的鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>3、</td> <td><a class="t12" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">定義特效鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>4、</td> <td><a class="t13" href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#">靜態背景切換鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>5、</td> <td><a class="t14" href=http://www.webjx.com/htmldata/2006-06-19/"#">動態背景切換鏈接</a></td> </tr> </TBODY> </table> </center></div></td> </tr> </TBODY> </table> </center></div> </head>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

文字链接效果巧制作:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>文字链接效果巧制作</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <STYLE>BODY { scrollbar-face-color: #0070CC; scrollbar-highlight-color: #70c0f8; scrollbar-shadow-color: #70c0f8; scrollbar-3dlight-color: #0070CC; scrollbar-arrow-color: #70c0f8; scrollbar-track-color: #0070CC; scrollbar-darkshadow-color: #0070CC; } </STYLE> <link href="http://www.etimestudio.com/style/border2.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- #link1 a { font-size: 9pt; color: #FFCC33; text-decoration: none; } #link1 a:hover { font-size: 9pt; color: #FFCC33; text-decoration: underline; } --> </style> <style type="text/css"> <!-- #link2 a { font-size: 9pt; color: #FFCC00; text-decoration: none; } #link2 a:hover { font-size: 9pt; color: #DFEFFF; text-decoration: blink; } --> </style> <style type="text/css"> <!-- #link3 a { font-size: 9pt; color: #FFCC00; text-decoration: none; } #link3 a:hover { font-size: 9pt; color: #003399; text-decoration: none; background-color: #DDEEFF; } --> </style> <style type="text/css"> <!-- #link4 a { font-size: 9pt; color: #FFCC00; text-decoration: none; } #link4 a:hover { font-size: 9pt; color: #FFCC66; border-bottom-width: 2px; border-bottom-style: dashed; border-bottom-color: #FFCC00; text-decoration: none; } --> </style> <style type="text/css"> <!-- #link5 a { font-size: 9pt; color: #FFCC00; text-decoration: none; } #link5 a:hover { font-size: 10pt; color: #FFCC99; text-decoration: none; font-weight: bold; } --> </style> <style type="text/css"> <!-- #link6 a { font-size: 9pt; color: #FFCC00; text-decoration: none; } #link6 a:hover { font-size: 9pt; color: #FFCC99; text-decoration: line-through; } --> </style> <style type="text/css"> <!-- #link7 a { font-size: 9pt; color: #FFCC00; text-decoration: none; } #link7 a:hover { font-size: 9pt; color: #FFCC99; text-decoration: underline overline; } --> </style> <style type="text/css"> <!-- #link8 a { font-size: 9pt; color: #FFCC00; text-decoration: none; } #link8 a:hover { font-size: 9pt; color: #FFCC66; text-decoration: none; position: relative; left: 1px; top: 1px; } --> </style> <link href="http://www.etimestudio.com/style/border2.css" rel="stylesheet" type="text/css"> <link href="http://www.etimestudio.com/style/9pt.css" rel="stylesheet" type="text/css"> <link href="http://www.etimestudio.com/style/glow.css" rel="stylesheet" type="text/css"> <meta name="keywords" content="dreamweaver，网页设计教程，文字链接效果制作，去掉链接下划线，链接变色，链接加粗，中线链接，双线链接，给链接加背景色，链接下方加虚线，会移动的链接 "> <meta name="description" content="欢迎来到e点时间，这里是织网魔法——文字链接效果巧制作，我在这里列举了八种常见的文字链接效果，都是在dreamweaver中做的，值得一看！"> </head> <body bgcolor="#0070cc" text="yellow"> <table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="border"> <tr> <td height="30" valign="middle" class="glow" ><div align="center" ><font color="#FFFFFF" size="3"><strong>文字链接效果巧制作</strong></font></div></td> </tr> <tr> <td height="25"><div align="center" class="9p"><font color="#FFFFFF">文/E点时间</font></div></td> </tr> <tr> <td valign="top" class="text"><table width="500" height="60" border="0" align="center" cellspacing="0" class="border2"> <tr> <td width="125"><DIV id=link1> <div align="center"><a href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#line">去下划线</a></div> </DIV></td> <td width="125" height="30"><DIV id=link2> <div align="center"><a href="http://www.webjx.com/htmldata/2006-06-19/1150679421.html#hover">链接变色</a></div> </DIV></td> <td width="125"><DIV id=link5> <div align="center"><a href="#hover">链接加粗</a></div> </DIV></td> <td> <DIV id=link6> <div align="center"><a href="#hover">中线链接</a></div> </div></td> </tr> <tr> <td> <DIV id=link7> <div align="center"><a href="#hover">双线链接</a></div> </div></td> <td height="30"><DIV id=link3> <div align="center"><a href="#bg">背景颜色</a></div> </DIV></td> <td><DIV id=link4> <div align="center"><a href="#dashed">虚线链接</a></div> </div></td> <td><DIV id=link8> <div align="center"><a href="#move">移动链接</a></div> </DIV></td> </tr> </table></td> </tr> <tr> <td valign="top" class="text"><table width="650" border="0" align="center" cellspacing="0" class="9p"> <tr> <td>&nbsp;</td> </tr> <tr> <td> &nbsp;&nbsp;&nbsp;&nbsp;把鼠标依次放在上面的文字上，看到了吗？这八种应该差不多可以包括目前网页上常见的超链接效果了，如果还有没写到的别忘了告诉我哦。这些效果都是通过Dreamweaver的CSS功能实现的，非常easy啦，让我们来一个一个地解决它们！<br> <br> </td> </tr> <center> <TABLE id="Table1" border="1" style="WIDTH: 264px; HEIGHT: 77px" width="264" bordercolordark=#EFEFC7 bgcolor=#C6D39C bordercolorlight=#4B6928> <tr><td>我如清泉-----清澈见底 一览无余</td></tr><tr><td>吾乃大海-----汹涌澎湃 狂热不已</td></tr></table> </table></td> </tr> </table> </td> </tr> </table> <p>&nbsp;</p> <p>&nbsp; </p>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]