<html>
<cabeça>
<title>CSS打造多彩文字链接</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="texto/css">
td {
tamanho da fonte: 12px;
família de fontes: 宋体;
}
a {família de fontes: "宋体";
tamanho da fonte: 9pt; decoração de texto: nenhuma}
.t1{
cor: #CC0000;decoração de texto: sublinhado
}
.t2{
decoração de texto: nenhuma;
cor:#006699;
}
.t3 { cor: #006600; decoração de texto: sublinhado sobrelinha}
.t4 {cor: #0066FF; decoração de texto: line-through}
.t5 {borda: 1px #FF0000 sólido; altura: 20px; cor: #000099}
.t6 { borda: #FF0000 sólido; altura: 0px; cor: #0066FF; largura da borda: 0px 0px 1px}
.t7 { borda: #FF0000 sólido; altura: 0px; cor: #0066FF; largura da borda: 0px 0px 1px; preenchimento inferior: 5px}
.t8 { borda: #FF0000 sólido; altura: 0px; cor: #0066FF; largura da borda: 0px 0px 1px; largura: 200px; alinhamento de texto: centro}
.t9 { borda: #FF0000 duplo; altura: 0px; cor: #0066FF; largura da borda: 0px 0px 3px}
.t10 {borda: 1px #FFFF00 sólido; cor: #FFFF00; clipe: altura; cor de fundo: #990000; altura: 20px; preenchimento superior: 5px; preenchimento à direita: 5px; preenchimento inferior: 5px; preenchimento à esquerda: 5px; largura: 130px: 0px}
.t11 { PADDING-RIGHT: 2px; PADDING-ESQUERDA: 2px; PADDING-FUND: 2px; PADDING-TOP: 2px; cor de fundo:#D9DEE8; altura: 25px; largura: 150px; alinhamento de texto: centro; ; borda: #D9DEE8; estilo de borda: início; largura da borda superior: 2px; largura da borda à direita: 2px; largura inferior da borda: 2px; largura da borda esquerda: 2px}
.t12{
decoração de texto: nenhuma;
cor:#006699;
; altura: 25px; largura: 130px; preenchimento superior: 4px; preenchimento à direita: 4px; preenchimento inferior: 4px; preenchimento à esquerda: 4px
; borda: 1px #0000CC sólido
; filtro: Desfoque (Adicionar = 1, Direção = 45, Força = 2)
; alinhamento de texto: centro
}
.t13 { cor: #FFFF00; decoração de texto: nenhuma; altura: 25px; largura: 120px; família de fontes: "宋体"; tamanho da fonte: 12px; imagem de fundo: url(bk3.gif); preenchimento superior: 6px; preenchimento à esquerda: 5px; alinhamento de texto: centro}
.t13:hover { cor: #FFFFFF; decoração de texto: nenhuma; imagem de fundo: url(bk4.gif); altura: 25px; largura: 120px; preenchimento superior: 6px; preenchimento à esquerda: 5px; alinhamento de texto: centro}
.t14 { cor: #FFFF00; decoração de texto: nenhuma; altura: 25px; largura: 120px; família de fontes: "宋体"; tamanho da fonte: 12px; imagem de fundo: url(bk1.gif); preenchimento superior: 5px; preenchimento à esquerda: 5px}
.t14:hover { cor: #000000; decoração de texto: nenhuma; imagem de fundo: url(bk2.gif); altura: 25px; largura: 120px; preenchimento superior: 5px; preenchimento à esquerda: 5px}
.t1:hover{
cor: #0000FF;decoração de texto: sublinhado
}
.t2:hover{
decoração de texto: sublinhado;
cor:#339900;
}
.t3:hover { cor: #9900CC; decoração de texto: nenhuma}
.t4:hover { cor: #FF0099; decoração de texto: nenhuma}
.t5:hover {borda: 1px #0000FF sólido; altura: 20px; cor: #CCCC00}
.t6:hover { borda: sólido; altura: 0px; cor: #0066FF; largura da borda: 0px 0px 1px; cor da borda: #00FF00 #00FF00 #00FF33 #00FF33}
.t7:hover { borda: #FF0000 sólido; altura: 0px; cor: #990000; largura da borda: 0px 0px 1px; preenchimento inferior: 2px}
.t8:hover { borda: #FF0000 sólido; altura: 0px; cor: #336600; largura da borda: 0px 0px 1px; largura: 170px; alinhamento de texto: centro}
.t9:hover { borda: #FF0000 double; altura: 0px; cor: #0066FF; largura da borda: 0px 0px 5px}
.t10:hover {borda: 1px #0000FF sólido; cor: #333333; clipe: altura; cor de fundo: #C8D8F0; altura: 20px; preenchimento superior: 5px; preenchimento à direita: 5px; preenchimento inferior: 5px; preenchimento à esquerda: 5px; largura: 130px: 0px}
.t11:hover { BORDER-RIGHT: #99CCFF 1px início; PADDING-RIGHT: 2px; BORDER-TOP: #99CCFF 1px início; PADDING-ESQUERDA: 2px; PADDING-FUND: 2px; BORDA ESQUERDA: #99CCFF início de 1px; PADDING-TOP: 2px; BORDER-BOTTOM: #99CCFF 1px início;cor de fundo:#C8D8F0; altura: 25px; largura: 150px; alinhamento de texto: centro; }
.t12:hover{
decoração de texto: nenhuma;
cor:#006699;
; altura: 25px; largura: 130px; preenchimento superior: 4px; preenchimento à direita: 4px; preenchimento inferior: 4px; preenchimento à esquerda: 4px
; borda: 1px #0000CC sólido
; filtro: Desfoque (Adicionar = 1, Direção = 45, Força = 1)
; alinhamento de texto: centro
}
.txt10 {altura da linha: 15px}
</style>
<linguagem script="JavaScript">
<!--
função MM_preloadImages() { //v3.0
var d=documento; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.comprimento; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=nova imagem; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body bgcolor="#EBEAF4" text="#000000" onLoad="MM_preloadImages('bk4.gif','bk3.gif','bk2.gif','bk1.gif')">
<table width="300" border="0" cellpacing="1" cellpadding="5" align="center" bgcolor="#CCCCCC">
<tr bgcolor="#FFFFFF" alinhamento="centro">
<td colspan="2" class="txt10">CSS打造多彩文字链接</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>一、</td>
<td>初级链接样式</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>1、</td>
<td><a href="#" class="t1">普通链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>2、</td>
<td><a href="#" class="t2">无下划线链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>3、</td>
<td><a href="#" class="t3">双划线链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>4、</td>
<td><a href="#" class="t4">删除线链接</a></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>二、</td>
<td>进阶链接样式风格</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>1、</td>
<td><a href="#" class="t5">另类下划线的原理</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>2、</td>
<td><a href="#" class="t6">定制下划线色彩</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>3, </td>
<td><a href="#" class="t7">定制下划线距离</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>4, </td>
<td><a href="#" class="t8">定制下划线长度和对齐方式</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>5, </td>
<td><a href="#" class="t9">定制双下划线</a></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>三、</td>
<td>高级链接样式风格</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>1、</td>
<td><a href="#" class="t10">定义块状链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>2、</td>
<td><a href="#" class="t11">定义按钮风格的链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>3、</td>
<td><a href="#" class="t12">定义特效链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>4、</td>
<td><a href="#" class="t13">静态背景切换链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>5、</td>
<td><a href="#" class="t14">动态背景切换链接</a></td>
</tr>
<tr bgcolor="#FFFFFF"align="direita">
<td colspan="2"> <a href=" http://www.downcodes.com ">建站学院</a>改编</td>
</tr>
</tabela>
<p class="t2"> </p>
</body>
</html>