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} CSS打造多彩文字链接 一、 初级链接样式 1、 普通链接 2、 无下划线链接 3、 双划线链接 4、 删除线链接 二、 进阶链接样式风格 1、 另类下划线的原理 2、 定制下划线色彩 3、 定制下划线距离 4、 定制下划线长度和对齐方式 5、 定制双下划线 三、 高级链接样式风格 1、 定义块状链接 2、 定义按钮风格的链接 3、 定义特效链接 4、 静态背景切换链接 5、 动态背景切换链接 网页教学网改编 　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　JScript中的undefined和"undefined"的区别

JScript中用于表示未定义的undefined标识符到底是表示什么未定义？它和"undefined"(包括"在内)又有什么区别和联系呢？为什么有的时候可以使用undefined来和变量做比较，而有的时候又不行呢？ underfined和"unde>>>详细阅读

本文标题：用CSS打造多彩文字链接

地址：http://www.17bianji.com/kaifa2/JS/30796.html

 1/2    1