文字链接技术基础

[ 来路：21kn.com    时间：2007-7-7 20:11:43    点击： ]

<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="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="#">没有最好,</a></td> <td><a href="#">只有更好!</a></td> </tr> <tr> <td height="20"><a href="#">在成为高手之</a></td> <td><a href="#">前先摆脱白痴</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="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="#">走过，路过，不要错过！</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="#">既不回头，何必不忘；</a></td><td><a href="#">既然无缘，何须誓言；</a></td></tr><tr><td><a href="#">今日种种，似水无痕；</a></td><td><a href="#">明夕何夕，君以陌路。</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=#>萧萧小雨</a> | <a href=#>金翅擘海 </a> | <a href=#><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a> | <a href=#>蓝色月光 </a> | <a href=#>西林生存 </a> | <a href=#>红色黑客 |</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="#" 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="#" 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="#">金翅擘海</a></li> <marquee behavior="alternate"><li><a href="#">我佛山人</a></li></marquee> <li><a href="#"><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="#">普通鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>2、</td> <td><a class="t2" href="#">無下劃線鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>3、</td> <td><a class="t3" href="#">雙劃線鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>4、</td> <td><a class="t4" href="#">刪除線鏈接</a></td> </tr> <tr bgColor="#cccccc"> <td>二、</td> <td>進階鏈接樣式風格</td> </tr> <tr bgColor="#ffffff"> <td>1、</td> <td><a class="t5" href="#">另類下劃線的原理</a></td> </tr> <tr bgColor="#ffffff"> <td>2、</td> <td><a class="t6" href="#">定制下劃線色彩</a></td> </tr> <tr bgColor="#ffffff"> <td>3、 </td> <td><a class="t7" href="#">定制下劃線距離</a></td> </tr> <tr bgColor="#ffffff"> <td>4、 </td> <td><a class="t8" href="#">定制下劃線長度和對齊方式</a></td> </tr> <tr bgColor="#ffffff"> <td>5、 </td> <td><a class="t9" href="#">定制雙下劃線</a></td> </tr> <tr bgColor="#ffffff"> <td>6、 </td> <td><a class="38js" href="#">按鈕式鏈接</a></td> </tr> <tr bgColor="#cccccc"> <td>三、</td> <td>高級鏈接樣式風格</td> </tr> <tr bgColor="#ffffff"> <td>1、</td> <td><a class="t10" href="#">定義塊狀鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>2、</td> <td><a class="t11" href="#">定義按鈕風格的鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>3、</td> <td><a class="t12" href="#">定義特效鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>4、</td> <td><a class="t13" href="#">靜態背景切換鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>5、</td> <td><a class="t14" href="#">動態背景切換鏈接</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="#line">去下划线</a></div> </DIV></td> <td width="125" height="30"><DIV id=link2> <div align="center"><a href="#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 全部选择 提示：你可先修改部分代码，再按运行]

上一篇：浮动菜单是如何作出来的mouse事件  下一篇：关于textarea的直观换行