用CSS打造多彩文字链接

(编辑：jimmy 日期: 2026/5/7 浏览：3 次 )

<html> <head> <title>CSS打造多彩文字链接</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> td {     font-size : 12px;     font-family : 宋体; } a {      font-family: "宋体";     font-size: 9pt; text-decoration: none} .t1{     color: #CC0000;text-decoration: underline } .t2{     text-decoration : none;     color:#006699; } .t3 {  color: #006600; text-decoration: underline overline} .t4 {  color: #0066FF; text-decoration: line-through} .t5 {  border: 1px #FF0000 solid; height: 20px; color: #000099} .t6 {  border: #FF0000 solid; height: 0px; color: #0066FF; border-width: 0px 0px 1px} .t7 {  border: #FF0000 solid; height: 0px; color: #0066FF; border-width: 0px 0px 1px; padding-bottom: 5px} .t8 {  border: #FF0000 solid; height: 0px; color: #0066FF; border-width: 0px 0px 1px;  width: 200px; text-align: center} .t9 {  border: #FF0000 double; height: 0px; color: #0066FF; border-width: 0px 0px 3px} .t10 {  border: 1px #FFFF00 solid; color: #FFFF00; clip:  height; background-color: #990000; height: 20px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 130px: 0px} .t11 {    PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; background-color:#D9DEE8; height: 25px; width: 150px; text-align: center; ; border: #D9DEE8; border-style: outset; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px} .t12{     text-decoration : none;     color:#006699; ; height: 25px; width: 130px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px ; border: 1px #0000CC solid ; filter: Blur(Add=1, Direction=45, Strength=2) ; text-align: center } .t13 {  color: #FFFF00; text-decoration: none; height: 25px; width: 120px; font-family: "宋体"; font-size: 12px; background-image: url(http://www.webjx.com/htmldata/2005-12-12/bk3.gif); padding-top: 6px; padding-left: 5px; text-align: center} .t13:hover {  color: #FFFFFF; text-decoration: none; background-image: url(http://www.webjx.com/htmldata/2005-12-12/bk4.gif); height: 25px; width: 120px; padding-top: 6px; padding-left: 5px; text-align: center} .t14 {  color: #FFFF00; text-decoration: none; height: 25px; width: 120px; font-family: "宋体"; font-size: 12px; background-image: url(http://www.webjx.com/htmldata/2005-12-12/bk1.gif); padding-top: 5px; padding-left: 5px} .t14:hover {  color: #000000; text-decoration: none; background-image: url(http://www.webjx.com/htmldata/2005-12-12/bk2.gif); height: 25px; width: 120px; padding-top: 5px; padding-left: 5px} .t1:hover{     color: #0000FF;text-decoration: underline } .t2:hover{     text-decoration : underline;     color:#339900; } .t3:hover {  color: #9900CC; text-decoration: none} .t4:hover {  color: #FF0099; text-decoration: none} .t5:hover {  border: 1px #0000FF solid; height: 20px; color: #CCCC00} .t6:hover {  border: solid; height: 0px; color: #0066FF; border-width: 0px 0px 1px; border-color: #00FF00 #00FF00 #00FF33 #00FF33} .t7:hover {  border: #FF0000 solid; height: 0px; color: #990000; border-width: 0px 0px 1px; padding-bottom: 2px} .t8:hover {  border: #FF0000 solid; height: 0px; color: #336600; border-width: 0px 0px 1px;  width: 170px; text-align: center} .t9:hover {  border: #FF0000 double; height: 0px; color: #0066FF; border-width: 0px 0px 5px} .t10:hover {  border: 1px #0000FF solid; color: #333333; clip:  height; background-color: #C8D8F0; height: 20px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 130px: 0px} .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; PADDING-TOP: 2px; BORDER-BOTTOM: #99CCFF 1px outset;background-color:#C8D8F0; height: 25px; width: 150px; text-align: center; } .t12:hover{     text-decoration : none;     color:#006699; ; height: 25px; width: 130px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px ; border: 1px #0000CC solid ; filter: Blur(Add=1, Direction=45, Strength=1) ; text-align: center } .txt10 {  line-height: 15px} </style>  </head> <body bgcolor="#EBEAF4" text="#000000" onLoad="MM_preloadImages('bk4.gif','bk3.gif','bk2.gif','bk1.gif')">          CSS打造多彩文字链接            一、     初级链接样式            1、     普通链接            2、     无下划线链接            3、     双划线链接            4、     删除线链接            二、     进阶链接样式风格            1、     另类下划线的原理            2、     定制下划线色彩            3、      定制下划线距离            4、      定制下划线长度和对齐方式            5、      定制双下划线            三、     高级链接样式风格            1、     定义块状链接            2、     定义按钮风格的链接            3、     定义特效链接            4、     静态背景切换链接            5、     动态背景切换链接            网页教学网改编     <p>　</p> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：超链接的陷下效果
下一篇：一定时间滚动的链接菜单效果