用CSS打造多彩文字链接

发布时间：2007-03-08　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

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

<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 class="t2"></p> 
</body> 
</html>

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

上一篇：用js实现的打字效果的带链接的新闻标题

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

广告商业广告，理性选择

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

用CSS打造多彩文字链接

相关推荐

文章分类

热门关键词

热门文章

最新更新