网页按钮使用的各种代码Word文档下载推荐.docx
- 文档编号:16061859
- 上传时间:2022-11-18
- 格式:DOCX
- 页数:10
- 大小:18.22KB
网页按钮使用的各种代码Word文档下载推荐.docx
《网页按钮使用的各种代码Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《网页按钮使用的各种代码Word文档下载推荐.docx(10页珍藏版)》请在冰豆网上搜索。
/form>
----如果只使用单独的按钮,那么可省略form标签,只使用单纯的按钮代码,将节省按钮所占的网页空间:
----二、按钮的前景与背景控制
----绝大多数的人使用按钮时,都直接使用缺省的灰白色按钮有黑色的文字说明,其实按钮的背景和前景是可以随意改变的,请看下面的代码:
formname="
highlight"
palign="
center"
inputtype=
value="
变色按钮"
style="
background-color:
rgb(255,0,0);
color:
rgb(255,2550,0)"
----其中background-color控制背景色,color按钮前景色;
----三、按钮的图片背景
----按钮不仅可以修改前景色和背景颜色,而且可以使用图片背景,下面的代码分别演示了固定的背景图片效果和动态的图片背景效果,动态的效果即在鼠标放到按钮上时,按钮的背景是另外一种图像背景,而鼠标离开时则恢复原来的图片背景,下面代码中的mainbb1.jpg和mainbb2.jpg分别为两个图像文件:
script>
!
--
if(document.images){
after=newImage()
after.src="
mainbb1.jpg"
}
functionchange2(image){
varel=event.srcElement
if(el.tagName=="
INPUT"
&
el.type=="
)
event.srcElement.style.backgroundImage=
url"
+"
('
+image+"
'
)"
//-->
/script>
formonmouseover="
change2('
mainbb1.jpg'
onmouseout="
mainbb2.jpg'
frme2"
value="
变化背景"
rgb(192,192,192);
FONT-FAMILY:
宋体;
FONT-SIZE:
12pt;
background-image:
url('
class="
initial"
onclick="
(h1.htm'
br>
submit"
name="
固定背景"
background-image:
url('
----四、按钮字号和字型控制
----按钮上显示的文字也可以随意改变风格,可以设置字体的字型和字号,请看以下代码:
变化字号"
FONT-SIZE:
9pt"
);
onclick>
12pt"
----五、按钮鼠标移动变色
----上面已经介绍了按钮的颜色控制方法,加上鼠标事件的参与即可实现鼠标移动变色,下面是完整的代码:
html>
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb_2312-80"
metaname="
GENERATOR"
content=
MicrosoftFrontPageExpress2.0"
title>
变色按钮<
/title>
style>
.bigChange{color:
blue;
font-weight:
bolder;
font-size:
175%;
letter-spacing:
4px;
text-transform:
uppercase;
background:
yellow}
.start{color:
ff0000;
c8ff4e}
.over{color:
ffff00;
0000ff}
/style>
/head>
bodybgcolor="
#83E09C"
scriptlanguage="
JAVASCRIPT"
functionhighlightButton(s){
if("
==event.srcElement.tagName)
event.srcElement.className=s}
onmouseover=
highlightButton('
start'
over'
/body>
/html>
----六、鼠标移动按钮变字号
----利用同样的方法,也可以使按钮在鼠标移动时变换字号,其实字号的变化也引起了按钮尺寸的变化,这一效果能够引起游览者的注意力,当然也可以合起来使字号和颜色同时发生变化:
变号按钮<
letter-spacing:
.start{font-size:
12pt}
.over{font-size:
9pt}
变号按钮"
----七、按钮上显示时钟
----按钮上显示的信息不仅可以事先定义成固定的字符串,而且可以随时更改,当然你也可以把一些动态的信息送到按钮上,下面是在按钮上显示走动的时钟的例子,效果非常好:
scriptLANGUAGE="
JavaScript"
day=newDate();
miVisit=day.getTime();
functionclock(){
dayTwo=newDate();
hrNow=dayTwo.getHours();
mnNow=dayTwo.getMinutes();
scNow=dayTwo.getSeconds();
miNow=dayTwo.getTime();
if(hrNow==0){hour=12;
ap="
AM"
;
}elseif(hrNow<
=11){ap="
AM"
hour=hrNow;
}elseif(hrNow==12){ap="
PM"
hour=12;
}elseif(hrNow>
=13){hour=
(hrNow-12);
if(hrNow>
=13){hour=hrNow-12;
if(mnNow<
=9){min="
0"
+mnNow;
else(min=mnNow)
if(scNow<
=9){
secs="
+scNow;
}else{secs=scNow;
time=hour+"
:
+min+"
+secs+ap;
document.form.button.value=time;
self.status=time;
setTimeout('
clock()'
1000);
document.write("
formname=\"
form\"
+"
inputtype=buttonvalue=\"
Clickforinfo!
\"
name=button>
onError=null;
clock();
----八、按钮控制显示源文件
---
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 按钮 使用 各种 代码
![提示](https://static.bdocx.com/images/bang_tan.gif)