首页 业界咨询 专题中心 数字创意 技术设备 教育培训 招聘求职 博客 联盟论坛 作品展示 技术教程 书刊杂志 高级搜索
首页 >> 技术教程 >> 理论教程 >> CSS打造多彩文字链接

CSS打造多彩文字链接

 作者：未知  来源：  发布日期：2007-07-06 10:11:40 
来源：CGchina.com_【CG中国】_(http://www.cgchina.com/)
作者：哈库纳马塔塔
原文：CSS打造多彩文字链接(http://www.cgchina.com/article/2007/0706/article_10566.html)
<HTML><HEAD><TITLE>Dreamweaver打造多彩文字链接</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style>
TD {
    FONT-SIZE: 12px; FONT-FAMILY: &Euml;&Icirc;&Igrave;&aring;
}
A {
    FONT-SIZE: 9pt; FONT-FAMILY: "&Euml;&Icirc;&Igrave;&aring;"; 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
}
.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(bk3.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 6px; FONT-FAMILY: "&Euml;&Icirc;&Igrave;&aring;"; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
.t13:hover {
    PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(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(bk1.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 5px; FONT-FAMILY: "&Euml;&Icirc;&Igrave;&aring;"; HEIGHT: 25px; TEXT-DECORATION: none
}
.t14:hover {
    PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(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
}
.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>
<SCRIPT language=JavaScript>
<!--
function MM_preloadImages() { //v3.0
var d=document; 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.length; i++)
if (a[i].indexOf("#"!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ebeaf4
onload="MM_preloadImages('bk4.gif','bk3.gif','bk2.gif','bk1.gif')">
<TABLE cellSpacing=1 cellPadding=5 width=300 align=center bgColor=#cccccc
border=0>
<TBODY>
<TR align=middle bgColor=#ffffff>
<TD class=txt10 colSpan=2>Dreamweaver打造多彩文字链接</TD></TR>
<TR bgColor=#cccccc>
<TD>一、</TD>
<TD>初级链接样式</TD></TR>
<TR bgColor=#ffffff>
<TD>1、</TD>
<TD><A class=t1
href="http://www.arting365.com/myfile/text-css/text-css.html#">普通链接</A></TD></TR>
<TR bgColor=#ffffff>
<TD>2、</TD>
<TD><A class=t2
href="http://www.arting365.com/myfile/text-css/text-css.html#">无下划线链接</A></TD></TR>
<TR bgColor=#ffffff>
<TD>3、</TD>
<TD><A class=t3
href="http://www.arting365.com/myfile/text-css/text-css.html#">双划线链接</A></TD></TR>
<TR bgColor=#ffffff>
<TD>4、</TD>
<TD><A class=t4
href="http://www.arting365.com/myfile/text-css/text-css.html#">删除线链接</A></TD></TR>
<TR bgColor=#cccccc>
<TD>二、</TD>
<TD>进阶链接样式风格</TD></TR>
<TR bgColor=#ffffff>
<TD>5、</TD>
<TD><A class=t5
href="http://www.arting365.com/myfile/text-css/text-css.html#">另类下划线的原理</A></TD></TR>
<TR bgColor=#ffffff>
<TD>6、</TD>
<TD><A class=t6
href="http://www.arting365.com/myfile/text-css/text-css.html#">定制下划线色彩</A></TD></TR>
<TR bgColor=#ffffff>
<TD>7、 </TD>
<TD><A class=t7
href="http://www.arting365.com/myfile/text-css/text-css.html#">定制下划线距离</A></TD></TR>
<TR bgColor=#ffffff>
<TD>8、 </TD>
<TD><A class=t8
href="http://www.arting365.com/myfile/text-css/text-css.html#">定制下划线长度和对齐方式</A></TD></TR>
<TR bgColor=#ffffff>
<TD>9、 </TD>
<TD><A class=t9
href="http://www.arting365.com/myfile/text-css/text-css.html#">定制双下划线</A></TD></TR>
<TR bgColor=#cccccc>
<TD>三、</TD>
<TD>高级链接样式风格</TD></TR>
<TR bgColor=#ffffff>
<TD>10、</TD>
<TD><A class=t10
href="http://www.arting365.com/myfile/text-css/text-css.html#">定义块状链接</A></TD></TR>
<TR bgColor=#ffffff>
<TD>11、</TD>
<TD><A class=t11
href="http://www.arting365.com/myfile/text-css/text-css.html#">定义按钮风格的链接</A></TD></TR>
<TR bgColor=#ffffff>
<TD>12、</TD>
<TD><A class=t12
href="http://www.arting365.com/myfile/text-css/text-css.html#">定义特效链接</A></TD></TR>
<TR bgColor=#ffffff>
<TD>13、</TD>
<TD><A class=t13
href="http://www.arting365.com/myfile/text-css/text-css.html#">静态背景切换链接</A></TD></TR>
<TR bgColor=#ffffff>
<TD>14、</TD>
<TD><A class=t14
href="http://www.arting365.com/myfile/text-css/text-css.html#">动态背景切换链接</A></TD></TR>
<TR align=right bgColor=#ffffff>
<TD colSpan=2><A
href="http://www.arting365.com/http://www.arting365.com/">http://www.arting365.com/</A></TD></TR></TBODY></TABLE>
<P class=t2> </P></BODY></HTML>


本文引用地址：http://www.cgchina.com/article/2007/0706/article_10566.html

来源：CGchina.com_【CG中国】_(http://www.cgchina.com/)
作者：哈库纳马塔塔
原文：CSS打造多彩文字链接(http://www.cgchina.com/article/2007/0706/article_10566.html)

责任编辑：哈库纳马塔塔

【加入收藏】　【告诉好友】　【打印本页】　【关闭窗口】　【返回顶部】
     
     
     
     
 
© 2005-2008 | CGchina -All rights reserved Powerby Cgchina
CG中国版权所有，此站点的任何信息包括图象、视频、音频等，未经许可，严禁传载。
www.cgchina.com | 关于我们 | 版权声明 | 广告服务 | 联系我们 | 诚聘英才 | 友情链接 | 网站公告