作家
登录

用CSS打造多彩文字链接

作者: 来源:www.28hudong.com 2013-03-30 03:39:16 阅读 我要评论

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

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)