前端开发 – 第 5 页

UI2009年4月21日2011年10月15日

CSS文字特效

CSS文字特效 ■CSS文字特效：　文字陰影效果： Filter:Shadow(color=Value;Di […]

UI2009年4月21日2011年10月15日

css样式表的优先级别演示

&lt;!--
可以看出直接重定义标签样式的有效性是最低的, 其次是用"."定义的伪类,
再次是用重定义标签加伪类的方式(类似于H2.myclass{color:blue}的写法),级别最高的就是用id定义的css样式--&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
  H1{color:red; }
  .myclass{color:green}
  H2.myclass{color:blue}
  #myid{color:brown}
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;这是红色的一号标题。&lt;/h1&gt;
&lt;p class="myclass"&gt;使用了"myclass"伪类的P标签中的正文是绿色的。&lt;/p&gt;
&lt;h2 class="myclass"&gt;但"myclass"类中的二号标题是蓝色的,因为H2.myclass{color:blue}重写了myclass伪类。&lt;/h2&gt;
&lt;p class="myclass" id="myid"&gt;以"myid"为标识的正文则是棕色的,这个是优先级别最高的。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

<!--

可以看出直接重定义标签样式的有效性是最低的, 其次是用"."定义的伪类,

再次是用重定义标签加伪类的方式(类似于H2.myclass{color:blue}的写法),级别最高的就是用id定义的css样式-->

<html>

<head>

<style>

H1{color:red; }

.myclass{color:green}

H2.myclass{color:blue}

#myid{color:brown}

</style>

</head>

<body>

<h1>这是红色的一号标题。</h1>

<p class="myclass">使用了"myclass"伪类的P标签中的正文是绿色的。</p>

<h2 class="myclass">但"myclass"类中的二号标题是蓝色的,因为H2.myclass{color:blue}重写了myclass伪类。</h2>

<p class="myclass" id="myid">以"myid"为标识的正文则是棕色的,这个是优先级别最高的。</p>

</body>

</html>

UI2009年4月21日2011年10月15日

非常精典的表格隔行变色CSS应用

以往在我们进行网页设计制作表格隔行换色的手法通常是通过手工定义或通过代码循环行数来定义颜色，前者的方法通常应用 […]

UI2009年4月21日2011年10月15日

WEB 制作1px边框表格的几种方法

制作1px边框表格的几种方法有过网页制作经验的朋友一定知道：一般来讲，把表格的边框定义为1px时，即bord […]

UI2009年4月21日2011年10月15日

如何在网页中插入CSS

前两章我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照 […]

UI2009年4月21日2011年10月15日

CSS伪类——动态链接

伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接 […]

UI2009年4月21日2011年10月15日

css语法

1.　　基本语法 CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性 […]

UI2009年4月21日

巧用CSS的Border属性制作特效菜单

　　许多应用软件的主菜单都具有这样的效果，通常是暗色的，一旦鼠标移到菜单上，立即变明亮；鼠标不在菜单上时是平面 […]

UI2009年4月21日2011年10月15日

巧用CSS制作树状目录

索易电子杂志大多采用树状目录，当鼠标点击主目录时，展开子目录；当再次点击主目录时，则关闭子目录。显得简捷明快， […]

UI2009年4月21日2011年10月15日

CSS滤镜

1、概述好了，下面我们将进入CSS的最精彩的部分–滤镜，它将把我们带入绚丽多姿的多媒体世界。正是 […]

UI2009年4月21日

CSS属性列表

[table=95%][tr][td=1,1,32%]属性名称字体属性（Font） font-family […]

Javascript2009年4月21日2011年10月19日

事件触发列表与解说

[table=98%][tr][td=3,1]<span style=”color:#990 […]

UI2009年4月21日

CSS实用教程

　　CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的 […]

UI2009年4月21日2011年10月15日

实现页面图片阴影特效

给图片加上阴影效果可以使图片更具有立体感，下面介绍三种制作方法：第一种利用图象编辑软件最常用的图象编辑软 […]

Javascript2009年4月21日2011年10月19日

Web2.0中Ajax应用的详解

最近互联网上比较火热的话题当然是关于WEB2.0的应用，其中AJAX又是WEB2.0的核心之一。 AJAX是A […]

UI2009年4月20日

CSS中处理英文换行的Word-Break

首先需要启动这一句 word-wrap:break-word; 表示在必要的时候就自动换行 Word-Wrap […]

UI2009年4月20日2011年10月19日

fckeditor 插件开发参考

个人觉得这文章很适合初开发FCK插件的朋友~ 一：插件的目录结构插件目录的名称必须和插件的名称一样，而且目录 […]

UI2009年4月20日2011年10月19日

FCK安装说明

fckconfig.js 设置语言 FCKConfig.DefaultLanguage = ‘zh […]

UI2009年4月20日2011年10月19日

文本框内容限制

整数或者小数：^[0-9]+\.{0,1}[0-9]{0,2}$ 只能输入数字：”^[0-9]*$ […]

Javascript2009年4月20日2020年3月24日

Prototype学习

prototype解析json数据 <script type=”text/javascrip […]

Javascript2009年4月17日2011年10月19日

Javascript 压缩/混淆

Dean Edwards ‘s Packer 是个非常有名的 Javascript 压缩/混淆工具 […]

Javascript2009年4月17日2011年10月19日

半角<=>全角

UI2009年4月17日2011年10月15日

漂亮的分页样式

&lt;style&gt;ul {
	border:0;
	margin:0;
	padding:0;
}
#pagination-flickr li {
	border:0;
	margin:0;
	padding:0;
	font-size:11px;
	list-style:none;
}
#pagination-flickr a {
	border:solid 1px #DDDDDD;
	margin-right:2px;
}
#pagination-flickr .previous-off,#pagination-flickr .next-off {
	color:#666666;
	display:block;
	float:left;
	font-weight:bold;
	padding:3px 4px;
}
#pagination-flickr .next a,#pagination-flickr .previous a {
	font-weight:bold;
	border:solid 1px #FFFFFF;
}
#pagination-flickr .active {
	color:#ff0084;
	font-weight:bold;
	display:block;
	float:left;
	padding:4px 6px;
}
#pagination-flickr a:link,#pagination-flickr a:visited {
	color:#0063e3;
	display:block;
	float:left;
	padding:3px 6px;
	text-decoration:none;
}
#pagination-flickr a:hover {
	border:solid 1px #666666;
}
&lt;/style&gt;
Flickr-like pagination:
&lt;ul id="pagination-flickr"&gt;
	&lt;li class="previous-off"&gt;? Previous&lt;/li&gt;
	&lt;li class="active"&gt;1&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=2"&gt;2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=3"&gt;3&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=4"&gt;4&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=5"&gt;5&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=6"&gt;6&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=7"&gt;7&lt;/a&gt;&lt;/li&gt;
	&lt;li class="next"&gt;&lt;a href="?page=2"&gt;Next ? &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;style&gt;ul {
	border:0;
	margin:0;
	padding:0;
}
#pagination-digg li {
	border:0;
	margin:0;
	padding:0;
	font-size:11px;
	list-style:none;
	margin-right:2px;
}
#pagination-digg a {
	border:solid 1px #9aafe5margin-right:2px;
}
#pagination-digg .previous-off,#pagination-digg .next-off {
	border:solid 1px #DEDEDEcolor:#888888display:block;
	float:left;
	font-weight:bold;
	margin-right:2px;
	padding:3px 4px;
}
#pagination-digg .next a,#pagination-digg .previous a {
	font-weight:bold;
}
#pagination-digg .active {
	background:#2e6ab1;
	color:#FFFFFF;
	font-weight:bold;
	display:block;
	float:left;
	padding:4px 6px;
}
#pagination-digg a:link,#pagination-digg a:visited {
	color:#0e509edisplay:block;
	float:left;
	padding:3px 6px;
	text-decoration:none;
}
#pagination-digg a:hover {
	border:solid 1px #0e509e
}
&lt;/style&gt;
Digg-like pagination:
&lt;ul id="pagination-digg"&gt;
	&lt;li class="previous-off"&gt;? Previous&lt;/li&gt;
	&lt;li class="active"&gt;1&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=2"&gt;2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=3"&gt;3&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=4"&gt;4&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=5"&gt;5&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=6"&gt;6&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=7"&gt;7&lt;/a&gt;&lt;/li&gt;
	&lt;li class="next"&gt;&lt;a href="?page=2"&gt;Next ? &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;style&gt;ul {
	border:0;
	margin:0;
	padding:0;
}
#pagination-clean li {
	border:0;
	margin:0;
	padding:0;
	font-size:11px;
	list-style:none;
}
#pagination-clean li,#pagination-clean a {
	border:solid 1px #DEDEDEmargin-right:2px;
}
#pagination-clean .previous-off,#pagination-clean .next-off {
	color:#888888display:block;
	float:left;
	font-weight:bold;
	padding:3px 4px;
}
#pagination-clean .next a,#pagination-clean .previous a {
	font-weight:bold;
	border:solid 1px #FFFFFF;
}
#pagination-clean .active {
	color:#00000font-weight:bold;
	display:block;
	float:left;
	padding:4px 6px;
}
#pagination-clean a:link,#pagination-clean a:visited {
	color:#0033CCdisplay:block;
	float:left;
	padding:3px 6px;
	text-decoration:none;
}
#pagination-clean a:hover {
	text-decoration: none;
}
&lt;/style&gt;
Clean pagination style:
&lt;ul id="pagination-clean"&gt;
	&lt;li class="previous-off"&gt;? Previous&lt;/li&gt;
	&lt;li class="active"&gt;1&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=2"&gt;2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=3"&gt;3&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=4"&gt;4&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=5"&gt;5&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=6"&gt;6&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="?page=7"&gt;7&lt;/a&gt;&lt;/li&gt;
	&lt;li class="next"&gt;&lt;a href="?page=2"&gt;Next ? &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

<style>ul {

border:0;

margin:0;

padding:0;

}

#pagination-flickr li {

border:0;

margin:0;

padding:0;

font-size:11px;

list-style:none;

}

#pagination-flickr a {

border:solid 1px #DDDDDD;

margin-right:2px;

}

#pagination-flickr .previous-off,#pagination-flickr .next-off {

color:#666666;

display:block;

float:left;

font-weight:bold;

padding:3px 4px;

}

#pagination-flickr .next a,#pagination-flickr .previous a {

font-weight:bold;

border:solid 1px #FFFFFF;

}

#pagination-flickr .active {

color:#ff0084;

font-weight:bold;

display:block;

float:left;

padding:4px 6px;

}

#pagination-flickr a:link,#pagination-flickr a:visited {

color:#0063e3;

display:block;

float:left;

padding:3px 6px;

text-decoration:none;

}

#pagination-flickr a:hover {

border:solid 1px #666666;

}

</style>

Flickr-like pagination:

<li class="previous-off">? Previous</li>

</ul>

<p></p>

<style>ul {

border:0;

margin:0;

padding:0;

}

#pagination-digg li {

border:0;

margin:0;

padding:0;

font-size:11px;

list-style:none;

margin-right:2px;

}

#pagination-digg a {

border:solid 1px #9aafe5margin-right:2px;

}

#pagination-digg .previous-off,#pagination-digg .next-off {

border:solid 1px #DEDEDEcolor:#888888display:block;

float:left;

font-weight:bold;

margin-right:2px;

padding:3px 4px;

}

#pagination-digg .next a,#pagination-digg .previous a {

font-weight:bold;

}

#pagination-digg .active {

background:#2e6ab1;

color:#FFFFFF;

font-weight:bold;

display:block;

float:left;

padding:4px 6px;

}

#pagination-digg a:link,#pagination-digg a:visited {

color:#0e509edisplay:block;

float:left;

padding:3px 6px;

text-decoration:none;

}

#pagination-digg a:hover {

border:solid 1px #0e509e

}

</style>

Digg-like pagination:

<li class="previous-off">? Previous</li>

</ul>

<p></p>

<style>ul {

border:0;

margin:0;

padding:0;

}

#pagination-clean li {

border:0;

margin:0;

padding:0;

font-size:11px;

list-style:none;

}

#pagination-clean li,#pagination-clean a {

border:solid 1px #DEDEDEmargin-right:2px;

}

#pagination-clean .previous-off,#pagination-clean .next-off {

color:#888888display:block;

float:left;

font-weight:bold;

padding:3px 4px;

}

#pagination-clean .next a,#pagination-clean .previous a {

font-weight:bold;

border:solid 1px #FFFFFF;

}

#pagination-clean .active {

color:#00000font-weight:bold;

display:block;

float:left;

padding:4px 6px;

}

#pagination-clean a:link,#pagination-clean a:visited {

color:#0033CCdisplay:block;

float:left;

padding:3px 6px;

text-decoration:none;

}

#pagination-clean a:hover {

text-decoration: none;

}

</style>

Clean pagination style:

<li class="previous-off">? Previous</li>

</ul>

UI2009年4月17日2011年10月15日

彩色CSS按钮

&lt;style&gt;.btn {
	BORDER-RIGHT:#7b9ebd 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#7b9ebd 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);
	BORDER-LEFT:#7b9ebd1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#7b9ebd 1px solid
}
.btn1_mouseout {
	BORDER-RIGHT:#7EBF4F 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#7EBF4F 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#B3D997);
	BORDER-LEFT:#7EBF4F1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#7EBF4F 1px solid
}
.btn1_mouseover {
	BORDER-RIGHT:#7EBF4F 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#7EBF4F 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#CAE4B6);
	BORDER-LEFT:#7EBF4F1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#7EBF4F 1px solid
}
.btn2 {
	padding:2 4 04;
	font-size:12px;
	height:23;
	background-color:#ece9d8;
	border-width:1;
}
.btn3_mouseout {
	BORDER-RIGHT:#2C59AA 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#2C59AA 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);
	BORDER-LEFT:#2C59AA1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#2C59AA 1px solid
}
.btn3_mouseover {
	BORDER-RIGHT:#2C59AA 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#2C59AA 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#D7E7FA);
	BORDER-LEFT:#2C59AA1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#2C59AA 1px solid
}
.btn3_mousedown {
	BORDER-RIGHT:#FFE400 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#FFE400 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);
	BORDER-LEFT:#FFE4001px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#FFE400 1px solid
}
.btn3_mouseup {
	BORDER-RIGHT:#2C59AA 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#2C59AA 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);
	BORDER-LEFT:#2C59AA1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#2C59AA 1px solid
}
.btn_2k3 {
	BORDER-RIGHT:#002D96 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#002D96 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#9DBCEA);
	BORDER-LEFT:#002D961px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM: #002D96 1px solid
}
&lt;/style&gt;
&lt;body&gt;
&lt;button class='btn'&gt;Button&lt;/button&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'"&gt;Button&lt;/button&gt;
&lt;button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'" disabled&gt;Button&lt;/button&gt;
&lt;p&gt;
	&lt;button class='btn2'&gt;Button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
	&lt;button class='btn3_mouseoutonmouseover="this.className='btn3_mouseover'"onmouseout="this.className='btn3_mouseout'"onmousedown="this.className='btn3_mousedown'"onmouseup="this.className='btn3_mouseup'"' onclick="this.blur();"&gt;Button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
	&lt;button class='btn_2k3'&gt;2k3 Button&lt;/button&gt;
&lt;/p&gt;
&lt;/body&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<style>.btn {

BORDER-RIGHT:#7b9ebd 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#7b9ebd 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);

BORDER-LEFT:#7b9ebd1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#7b9ebd 1px solid

}

.btn1_mouseout {

BORDER-RIGHT:#7EBF4F 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#7EBF4F 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#B3D997);

BORDER-LEFT:#7EBF4F1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#7EBF4F 1px solid

}

.btn1_mouseover {

BORDER-RIGHT:#7EBF4F 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#7EBF4F 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#CAE4B6);

BORDER-LEFT:#7EBF4F1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#7EBF4F 1px solid

}

.btn2 {

padding:2 4 04;

font-size:12px;

height:23;

background-color:#ece9d8;

border-width:1;

}

.btn3_mouseout {

BORDER-RIGHT:#2C59AA 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#2C59AA 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);

BORDER-LEFT:#2C59AA1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#2C59AA 1px solid

}

.btn3_mouseover {

BORDER-RIGHT:#2C59AA 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#2C59AA 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#D7E7FA);

BORDER-LEFT:#2C59AA1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#2C59AA 1px solid

}

.btn3_mousedown {

BORDER-RIGHT:#FFE400 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#FFE400 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);

BORDER-LEFT:#FFE4001px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#FFE400 1px solid

}

.btn3_mouseup {

BORDER-RIGHT:#2C59AA 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#2C59AA 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);

BORDER-LEFT:#2C59AA1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#2C59AA 1px solid

}

.btn_2k3 {

BORDER-RIGHT:#002D96 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#002D96 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#9DBCEA);

BORDER-LEFT:#002D961px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM: #002D96 1px solid

}

</style>

<body>

<button class='btn'>Button</button>

<p>

</p>

<button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'">Button</button>

<button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'" disabled>Button</button>

<p>

<button class='btn2'>Button</button>

</p>

<p>

<button class='btn3_mouseoutonmouseover="this.className='btn3_mouseover'"onmouseout="this.className='btn3_mouseout'"onmousedown="this.className='btn3_mousedown'"onmouseup="this.className='btn3_mouseup'"' onclick="this.blur();">Button</button>

</p>

<p>

<button class='btn_2k3'>2k3 Button</button>

</p>

</body>

Javascript2007年10月31日2011年10月19日

禁止复制代码禁止保持禁止查看源文件的代码保护和破解

　　互联网的发展离不开资源共享，但如今的网络抄袭之风非常严重，我想这也许就是那些屏蔽右键站点出现的原因吧。其实 […]