a样式

原创 2012年03月23日 13:27:41
				<head> 
<style type="text/css">TD { 
    FONT-SIZE: 12px; FONT-FAMILY: 宋体 
} 
A { 
    FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none 
} 
.t1 { 
    COLOR: #cc0000; TEXT-DECORATION: underline 
} 
.t2 { 
    COLOR: #006699; TEXT-DECORATION: none 
} 
.t3 { 
    COLOR: #006600; TEXT-DECORATION: underline overline 
} 
.t4 { 
    COLOR: #0066ff; TEXT-DECORATION: line-through 
} 
.t5 { 
    BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; COLOR: #000099; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 20px 
} 
.t6 { 
    BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px 
} 
.38js { 
    FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none 
} 
.t7 { 
    BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; PADDING-BOTTOM: 5px; BORDER-LEFT: #ff0000 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px 
} 
.t8 { 
    BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; WIDTH: 200px; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px; TEXT-ALIGN: center 
} 
.t9 { 
    BORDER-RIGHT: #ff0000 0px double; BORDER-TOP: #ff0000 0px double; BORDER-LEFT: #ff0000 0px double; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 3px double; HEIGHT: 0px 
} 
.t10 { 
    BORDER-RIGHT: #ffff00 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffff00 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffff00 1px solid; COLOR: #ffff00; PADDING-TOP: 5px; BORDER-BOTTOM: #ffff00 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #990000 
} 
.t11 { 
    BORDER-RIGHT: #d9dee8 2px outset; PADDING-RIGHT: 2px; BORDER-TOP: #d9dee8 2px outset; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #d9dee8 2px outset; WIDTH: 150px; PADDING-TOP: 2px; BORDER-BOTTOM: #d9dee8 2px outset; HEIGHT: 25px; BACKGROUND-COLOR: #d9dee8; TEXT-ALIGN: center 
} 
.t12 { 
    BORDER-RIGHT: #0000cc 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #0000cc 1px solid; PADDING-LEFT: 4px; FILTER: Blur(Add=1, Direction=45, Strength=2); PADDING-BOTTOM: 4px; BORDER-LEFT: #0000cc 1px solid; WIDTH: 130px; COLOR: #006699; PADDING-TOP: 4px; BORDER-BOTTOM: #0000cc 1px solid; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none 
} 
.t13 { 
    PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(bk3.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 6px; FONT-FAMILY: "宋体"; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none 
} 
.t13:hover { 
    PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(bk4.gif); WIDTH: 120px; COLOR: #ffffff; PADDING-TOP: 6px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none 
} 
.t14 { 
    PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(bk1.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 5px; FONT-FAMILY: "宋体"; HEIGHT: 25px; TEXT-DECORATION: none 
} 
.t14:hover { 
    PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(bk2.gif); WIDTH: 120px; COLOR: #000000; PADDING-TOP: 5px; HEIGHT: 25px; TEXT-DECORATION: none 
} 
.t1:hover { 
    COLOR: #0000ff; TEXT-DECORATION: underline 
} 
.t2:hover { 
    COLOR: #339900; TEXT-DECORATION: underline 
} 
.t3:hover { 
    COLOR: #9900cc; TEXT-DECORATION: none 
} 
.t4:hover { 
    COLOR: #ff0099; TEXT-DECORATION: none 
} 
.t5:hover { 
    BORDER-RIGHT: #0000ff 1px solid; BORDER-TOP: #0000ff 1px solid; BORDER-LEFT: #0000ff 1px solid; COLOR: #cccc00; BORDER-BOTTOM: #0000ff 1px solid; HEIGHT: 20px 
} 
.t6:hover { 
    BORDER-RIGHT: #00ff00 0px solid; BORDER-TOP: #00ff00 0px solid; BORDER-LEFT: #00ff33 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #00ff33 1px solid; HEIGHT: 0px 
} 
.38js:hover { 
    FONT-SIZE: 12px; LEFT: 1px; COLOR: #009900; FONT-FAMILY: "宋体"; POSITION: relative; TOP: 1px 
} 
.t7:hover { 
    BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; PADDING-BOTTOM: 2px; BORDER-LEFT: #ff0000 0px solid; COLOR: #990000; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px 
} 
.t8:hover { 
    BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; WIDTH: 170px; COLOR: #336600; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px; TEXT-ALIGN: center 
} 
.t9:hover { 
    BORDER-RIGHT: #ff0000 0px double; BORDER-TOP: #ff0000 0px double; BORDER-LEFT: #ff0000 0px double; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 5px double; HEIGHT: 0px 
} 
.t10:hover { 
    BORDER-RIGHT: #0000ff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #0000ff 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #0000ff 1px solid; COLOR: #333333; PADDING-TOP: 5px; BORDER-BOTTOM: #0000ff 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #c8d8f0 
} 
.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; WIDTH: 150px; PADDING-TOP: 2px; BORDER-BOTTOM: #99ccff 1px outset; HEIGHT: 25px; BACKGROUND-COLOR: #c8d8f0; TEXT-ALIGN: center 
} 
.t12:hover { 
    BORDER-RIGHT: #0000cc 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #0000cc 1px solid; PADDING-LEFT: 4px; FILTER: Blur(Add=1, Direction=45, Strength=1); PADDING-BOTTOM: 4px; BORDER-LEFT: #0000cc 1px solid; WIDTH: 130px; COLOR: #006699; PADDING-TOP: 4px; BORDER-BOTTOM: #0000cc 1px solid; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none 
} 
.txt10 { 
    LINE-HEIGHT: 15px 
} 

<!-- 此特效使用网页特效制作专家编辑制作--> 
<!-- http://wd365.nease.net--> 

<!-- 使用说明:使用时将文字换成你需要的文字即可!--> 
</style> 
</head> 

<body leftMargin="0" topMargin="0"> 
<b><font color="#0099cc" size="4"> 
<p align="center">脚本特效展示</font></b><br> 
<br> 
</p> 
<div align="center"><center> 

<table borderColor="#0099cc" cellSpacing="0" borderColorDark="#0099cc" cellPadding="15" 
width="450" borderColorLight="#0099cc" border="1"> 
<TBODY> 
  <tr> 
    <td height="56"><div align="center"><center><table cellSpacing="1" cellPadding="5" 
    width="300" align="center" bgColor="#cccccc" border="0"> 
<TBODY> 
      <tr align="middle" bgColor="#ffffff"> 
        <td class="txt10" colSpan="2">CSS打造多彩文字链接</td> 
      </tr> 
      <tr bgColor="#cccccc"> 
        <td>一、</td> 
        <td>初级链接样式</td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>1、</td> 
        <td><a class="t1" href="#">普通链接</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>2、</td> 
        <td><a class="t2" href="#">无下划线链接</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>3、</td> 
        <td><a class="t3" href="#">双划线链接</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>4、</td> 
        <td><a class="t4" href="#">删除线链接</a></td> 
      </tr> 
      <tr bgColor="#cccccc"> 
        <td>二、</td> 
        <td>进阶链接样式风格</td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>1、</td> 
        <td><a class="t5" href="#">另类下划线的原理</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>2、</td> 
        <td><a class="t6" href="#">定制下划线色彩</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>3、 </td> 
        <td><a class="t7" href="#">定制下划线距离</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>4、 </td> 
        <td><a class="t8" href="#">定制下划线长度和对齐方式</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>5、 </td> 
        <td><a class="t9" href="#">定制双下划线</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>6、 </td> 
        <td><a class="38js" href="#">按钮式链接</a></td> 
      </tr> 
      <tr bgColor="#cccccc"> 
        <td>三、</td> 
        <td>高级链接样式风格</td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>1、</td> 
        <td><a class="t10" href="#">定义块状链接</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>2、</td> 
        <td><a class="t11" href="#">定义按钮风格的链接</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>3、</td> 
        <td><a class="t12" href="#">定义特效链接</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>4、</td> 
        <td><a class="t13" href="#">静态背景切换链接</a></td> 
      </tr> 
      <tr bgColor="#ffffff"> 
        <td>5、</td> 
        <td><a class="t14" href="#">动态背景切换链接</a></td> 
      </tr> 
</TBODY> 
    </table> 
    </center></div></td> 
  </tr> 
</TBODY> 
</table> 
</center></div> 
</body> 
				

A标签样式定义

CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是:     :link     :visited...
  • esonbest1234
  • esonbest1234
  • 2016年02月24日 11:20
  • 231

给超链接A添加按钮样式

在进行界面设计过程中,需要给超链接A添加按钮样式,原本以为是利用height和width分别控制高度和宽度,然后利用background来设置背景图片就可以了。没想到在实际测试过程中,根本不行。于是就...
  • yzl21061
  • yzl21061
  • 2013年12月18日 18:14
  • 2487

当前a标签保持样式,其余恢复

当前a标签样式保持,其余恢复 最近做毕设“基于SSM的购物网站”时,遇到此问题: 最终效果: 实现方法: 利用 JQuery获取当前url所需字符串,与每一个a标签的对应属性比较,当相...
  • qq_24806827
  • qq_24806827
  • 2017年05月08日 16:00
  • 217

关于a标签点击去除默认样式

我们在平时a标签里面嵌套一些字体图片,这是很常见的。但是我们并不需要点击时候a标签里面的字体变色。这个小知识点,很简单:css样式: a{ text-decoration:none; color...
  • adley_function
  • adley_function
  • 2016年08月05日 14:23
  • 16627

a标签样式

以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确。   给出我试的...
  • huwenhu2007
  • huwenhu2007
  • 2014年04月28日 21:38
  • 1934

HTML篇之CSS样式:<button></button>按钮变成超链接<a></a>的样式

注:样式实现的功能:按钮变成超链接。其他代码是可编辑table,如果不可行可能是引用的jquery.min.js版本问题...
  • qq_16769857
  • qq_16769857
  • 2016年07月28日 15:00
  • 6503

a标签的四个css伪类(link、visited、hover、active)样式理解

转自点击打开链接 伪类是CSS 用于向某些选择器添加特殊的效果,chrome和firefox中的css监控并不会显示所有的样式,有些显示会有点不全,IE下还是有点问题的,不过大体不变 ...
  • u010552788
  • u010552788
  • 2016年03月12日 21:53
  • 1711

如何去掉a标签的下划线 各种样式详解

首先来了解下标签的一些样式: 标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括:  总: a  ...
  • u013630876
  • u013630876
  • 2014年05月07日 10:05
  • 7225

a标签的css样式设计

总: a          表示所有状态下的连接 如 .mycls a{color:red} ① a:link:未访问链接 ,如 .mycls a:link {color:blue} ...
  • ygz5175526
  • ygz5175526
  • 2014年06月22日 21:17
  • 610

CSS之a链接样式

a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻这...
  • u012493556
  • u012493556
  • 2016年07月15日 16:31
  • 166
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:a样式
举报原因:
原因补充:

(最多只允许输入30个字)