<html>
<cabeza>
<title>CSS打造多彩文字链接</title>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312">
<tipo de estilo="texto/css">
td {
tamaño de fuente: 12px;
familia de fuentes: 宋体;
}
a {familia de fuentes: "宋体";
tamaño de fuente: 9 puntos; decoración de texto: ninguna}
.t1{
color: #CC0000;decoración de texto: subrayado
}
.t2{
decoración de texto: ninguna;
color:#006699;
}
.t3 { color: #006600; decoración de texto: subrayado sobre subrayado}
.t4 {color: #0066FF; decoración de texto: línea recta}
.t5 { borde: 1px #FF0000 sólido; altura: 20 píxeles; color: #000099}
.t6 { borde: #FF0000 sólido; altura: 0px; color: #0066FF; ancho de borde: 0px 0px 1px}
.t7 { borde: #FF0000 sólido; altura: 0px; color: #0066FF; ancho de borde: 0px 0px 1px; fondo de relleno: 5px}
.t8 { borde: #FF0000 sólido; altura: 0px; color: #0066FF; ancho de borde: 0px 0px 1px; ancho: 200px; alineación de texto: centro}
.t9 { borde: #FF0000 doble; altura: 0px; color: #0066FF; ancho de borde: 0px 0px 3px}
.t10 { borde: 1px #FFFF00 sólido; color: #FFFF00; clip: altura; color de fondo: #990000; altura: 20 píxeles; relleno superior: 5px; relleno-derecha: 5px; fondo de relleno: 5px; relleno-izquierda: 5px; ancho: 130px: 0px}
.t11 { PADDING-DERECHA: 2px; RELLENO IZQUIERDO: 2px; RELLENO INFERIOR: 2px; ACOLCHADO SUPERIOR: 2px; color de fondo:#D9DEE8; altura: 25 píxeles; ancho: 150 px; alineación de texto: centro; ; borde: #D9DEE8; estilo de borde: inicio; ancho superior del borde: 2px; ancho del borde derecho: 2px; ancho del borde inferior: 2px; ancho-borde-izquierdo: 2px}
.t12{
decoración de texto: ninguna;
color:#006699;
; altura: 25 píxeles; ancho: 130px; relleno superior: 4px; relleno-derecha: 4px; fondo de relleno: 4px; relleno-izquierda: 4px
; borde: 1px #0000CC sólido
; filtro: Desenfoque(Agregar=1, Dirección=45, Fuerza=2)
; alineación de texto: centro
}
.t13 {color: #FFFF00; decoración de texto: ninguna; altura: 25 píxeles; ancho: 120px; familia de fuentes: "宋体"; tamaño de fuente: 12px; imagen de fondo: url(bk3.gif); relleno superior: 6px; relleno-izquierda: 5px; alineación de texto: centro}
.t13: flotar {color: #FFFFFF; decoración de texto: ninguna; imagen de fondo: url(bk4.gif); altura: 25 píxeles; ancho: 120px; relleno superior: 6px; relleno-izquierda: 5px; alineación de texto: centro}
.t14 {color: #FFFF00; decoración de texto: ninguna; altura: 25 píxeles; ancho: 120 píxeles; familia de fuentes: "宋体"; tamaño de fuente: 12px; imagen de fondo: url(bk1.gif); relleno superior: 5px; relleno-izquierda: 5px}
.t14: flotar {color: #000000; decoración de texto: ninguna; imagen de fondo: url(bk2.gif); altura: 25 píxeles; ancho: 120 píxeles; relleno superior: 5px; relleno-izquierda: 5px}
.t1: flotar {
color: #0000FF;decoración de texto: subrayado
}
.t2: flotar {
decoración de texto: subrayado;
color:#339900;
}
.t3:hover { color: #9900CC; decoración de texto: ninguna}
.t4:hover {color: #FF0099; decoración de texto: ninguna}
.t5:hover {borde: 1px #0000FF sólido; altura: 20 píxeles; color: #CCCC00}
.t6: hover { borde: sólido; altura: 0px; color: #0066FF; ancho de borde: 0px 0px 1px; color del borde: #00FF00 #00FF00 #00FF33 #00FF33}
.t7:hover { borde: #FF0000 sólido; altura: 0px; color: #990000; ancho de borde: 0px 0px 1px; fondo de relleno: 2px}
.t8:hover { borde: #FF0000 sólido; altura: 0px; color: #336600; ancho de borde: 0px 0px 1px; ancho: 170px; alineación de texto: centro}
.t9:hover { borde: #FF0000 doble; altura: 0px; color: #0066FF; ancho de borde: 0px 0px 5px}
.t10:hover {borde: 1px #0000FF sólido; color: #333333; clip: altura; color de fondo: #C8D8F0; altura: 20 píxeles; relleno superior: 5px; relleno-derecha: 5px; fondo de relleno: 5px; relleno-izquierda: 5px; ancho: 130px: 0px}
.t11:hover { BORDE-DERECHO: #99CCFF 1px inicio; RELLENO-DERECHA: 2px; BORDE-TOP: #99CCFF 1px inicio; RELLENO IZQUIERDO: 2px; RELLENO INFERIOR: 2px; FRONTERA IZQUIERDA: #99CCFF 1px de inicio; ACOLCHADO SUPERIOR: 2px; BORDE INFERIOR: #99CCFF 1px de inicio; color de fondo: #C8D8F0; altura: 25 píxeles; ancho: 150 px; alineación de texto: centro; }
.t12: flotar {
decoración de texto: ninguna;
color:#006699;
; altura: 25 píxeles; ancho: 130px; relleno superior: 4px; relleno-derecha: 4px; fondo de relleno: 4px; relleno-izquierda: 4px
; borde: 1px #0000CC sólido
; filtro: Desenfoque(Agregar=1, Dirección=45, Fuerza=1)
; alineación de texto: centro
}
.txt10 {altura-línea: 15px}
</estilo>
<lenguaje de escritura="JavaScript">
<!--
función 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.argumentos; para(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=nueva imagen; 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" cellspace="1" cellpadding="5" align="center" bgcolor="#CCCCCC">
<tr bgcolor="#FFFFFF" align="centro">
<td colspan="2" class="txt10">CSS打造多彩文字链接</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>一、</td>
<td>初级链接样式</td>
</tr>
<trbgcolor="#FFFFFF">
<td>1、</td>
<td><a href="#" class="t1">普通链接</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>2、</td>
<td><a href="#" class="t2">无下划线链接</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>3、</td>
<td><a href="#" class="t3">双划线链接</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>4、</td>
<td><a href="#" class="t4">删除线链接</a></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>二、</td>
<td>进阶链接样式风格</td>
</tr>
<trbgcolor="#FFFFFF">
<td>1、</td>
<td><a href="#" class="t5">另类下划线的原理</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>2、</td>
<td><a href="#" class="t6">定制下划线色彩</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>3、 </td>
<td><a href="#" class="t7">定制下划线距离</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>4、 </td>
<td><a href="#" class="t8">定制下划线长度和对齐方式</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>5、 </td>
<td><a href="#" class="t9">定制双下划线</a></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>三、</td>
<td>高级链接样式风格</td>
</tr>
<trbgcolor="#FFFFFF">
<td>1、</td>
<td><a href="#" class="t10">定义块状链接</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>2、</td>
<td><a href="#" class="t11">定义按钮风格的链接</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>3、</td>
<td><a href="#" class="t12">定义特效链接</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>4、</td>
<td><a href="#" class="t13">静态背景切换链接</a></td>
</tr>
<trbgcolor="#FFFFFF">
<td>5、</td>
<td><a href="#" class="t14">动态背景切换链接</a></td>
</tr>
<tr bgcolor="#FFFFFF" align="derecha">
<td colspan="2"> <a href=" http://www.downcodes.com ">建站学院</a>改编</td>
</tr>
</tabla>
<p class="t2"></p>
</cuerpo>
</html>