用CSS打造多彩文字链接

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}


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普通链接 2、 无下划线链接 3、 双划线链接 4、 删除线链接 二、 进阶链接样式风格 1、 另类下划线的原理 2、 定制下划线色彩 3、 定制下划线距离 4、 定制下划线长度和对齐方式 5、 定制双下划线 三、 高级链接样式风格 1、 定义块状链接 2、 定义按钮风格的链接 3、 定义特效链接 4、 静态背景切换链接 5、 动态背景切换链接 网页教学网改编

 

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 用CSS打造多彩文字链接

    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-decora

  • JS实现文字链接感应鼠标淡入淡出改变颜色的方法

    本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现文字链接感应鼠标淡入淡出改变颜色</TITLE> </HEAD> <BODY> <script l

  • jQuery实现行文字链接提示效果的方法

    本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

  • js实现动画特效的文字链接鼠标悬停提示的方法

    本文实例讲述了js实现动画特效的文字链接鼠标悬停提示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • js实现鼠标滑过文字链接色彩变化的效果

    本文实例讲述了js实现鼠标滑过文字链接色彩变化效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • jQuery实现鼠标经过时出现隐藏层文字链接的方法

    本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法.分享给大家供大家参考.具体如下: 这里演示Jquery显示隐藏层的方法,鼠标经过时出现文字链接,模拟评分效果,这里没有加动作,仅显示了前台效果的实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • Android实现TextView中文字链接的4种方式介绍及代码

    Android 的实现TextView中文字链接的方式有很多种. 总结起来大概有4种: 1.当文字中出现URL.E-mail.电话号码等的时候,可以将TextView的android:autoLink属性设置为相应的的值,如 果是所有的类型都出来就是android:autoLink="all".当然也可以在java代码里 做,textView01.setAutoLinkMask(Linkify.ALL); 2.将要处理的文字写到一个资源文件,如string.xml,然后的java代码里

  • 超强推荐CSS打造经典鼠标触发显示选项

    css打造鼠标触发效果 找什么 会计 网页设计 翻译 家教 更多>> 在那里 北京 上海 广州 深圳 南京 天津 杭州 成都 重庆 武汉 西安 沈阳 更多城市>> 高级搜索 分类搜索 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 利用jquery动画特效和css打造的侧边弹出垂直导航

    这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是效果截图: HTML源码: 复制代码 代码如下: <title>Jquery+CSS侧边弹出垂直导航</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outline:

  • 推荐css打造经典鼠标触发显示选项

    看到了 分享:绝对经典的滑轮新闻显示(javascript+css) 这个帖子,都是css+js的控制经典,其实单css就可以搞定了,只不过是为了兼容那垃圾的 IE 才不得做个js , 以下的代码如果去掉js部分地话,在Opear和Firrfox都能正常的,但是IE下就不行了. 大家有兴趣的可以测试一下.也希望能帮到有需要的人. css打造鼠标触发效果 找什么 会计 网页设计 翻译 家教 更多>> 在那里 北京 上海 广州 深圳 南京 天津 杭州 成都 重庆 武汉 西安 沈阳 更多城市>

随机推荐