作者：marvellous 时间： 2006-06-17 文档类型：原创 来自：蓝色理想
第 1 页 文字链接技术基础 [1] 第 2 页 文字链接技术基础 [2]
给链接加上一个小小的晶格化滤镜:
运行代码框 <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> </td> </tr> <tr> <td> 把鼠标依次放在上面的文字上，看到了吗？这八种应该差不多可以包括目前网页上常见的超链接效果了，如果还有没写到的别忘了告诉我哦。这些效果都是通过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> </p> <p> </p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
出处：蓝色理想 责任编辑：moby
上一页 文字链接技术基础 [1] 下一页
◎进入论坛网页制作、网站综合版块参加讨论
蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们联系，我们将立即删除修改。
第 1 页 
第 2 页 文字链接技术基础 [2]
