网页按钮使用的各种代码.docx
- 文档编号:3150931
- 上传时间:2022-11-18
- 格式:DOCX
- 页数:10
- 大小:18.22KB
网页按钮使用的各种代码.docx
《网页按钮使用的各种代码.docx》由会员分享,可在线阅读,更多相关《网页按钮使用的各种代码.docx(10页珍藏版)》请在冰豆网上搜索。
网页按钮使用的各种代码
网页按钮使用的各种代码
---按钮总的来说是WINDOWIN中最学用的也是最基本的一种控制部件,比如在各种编程语言中及应用程序中都少不了按钮的参与,在网页设计中也是如此,通过按钮可以完成很多任务,以下将全面讲解按钮使用技巧及应用实例。
----一、按钮的基本使用
----一般的可视性网页制作工具中,都有方便的按钮填加工具,可直接在网页的合适位置填加按钮,如果你使用手工的网页制作方法,那么可用下面的源代码制作按钮,其中onclick决定按下按钮的动作:
"按钮">
onclick>
----如果只使用单独的按钮,那么可省略form标签,只使用单纯的按钮代码,将节省按钮所占的网页空间:
"按钮">
onclick>
----二、按钮的前景与背景控制
----绝大多数的人使用按钮时,都直接使用缺省的灰白色按钮有黑色的文字说明,其实按钮的背景和前景是可以随意改变的,请看下面的代码:
"button"value="变色按钮" style="background-color: rgb(255,0,0); color: rgb(255,2550,0)" onclick>
----其中background-color控制背景色,color按钮前景色;
----三、按钮的图片背景
----按钮不仅可以修改前景色和背景颜色,而且可以使用图片背景,下面的代码分别演示了固定的背景图片效果和动态的图片背景效果,动态的效果即在鼠标放到按钮上时,按钮的背景是另外一种图像背景,而鼠标离开时则恢复原来的图片背景,下面代码中的mainbb1.jpg和mainbb2.jpg分别为两个图像文件:
--
if(document.images){
after=newImage()
after.src="mainbb1.jpg"}
functionchange2(image){
varel=event.srcElement
if(el.tagName=="INPUT"&&el.type=="button")
event.srcElement.style.backgroundImage=
"url"+"('"+image+"')"}
//-->
onmouseout="change2('mainbb2.jpg')"> button"name="frme2" value="变化背景" style="background-color: rgb(192,192,192); FONT-FAMILY: 宋体; FONT-SIZE: 12pt;background-image: url('mainbb2.jpg')" class="initial"onclick="(h1.htm')" name="B1"value="固定背景" style="FONT-SIZE: 12pt;background-image: url('mainbb1.jpg')"> ----四、按钮字号和字型控制 ----按钮上显示的文字也可以随意改变风格,可以设置字体的字型和字号,请看以下代码: style="background-color: rgb(192,192,192); FONT-FAMILY: 宋体;FONT-SIZE: 9pt" color: rgb(255,2550,0)");onclick> style="background-color: rgb(192,192,192); FONT-FAMILY: 宋体;FONT-SIZE: 12pt" color: rgb(255,2550,0)");onclick> ----五、按钮鼠标移动变色 ----上面已经介绍了按钮的颜色控制方法,加上鼠标事件的参与即可实现鼠标移动变色,下面是完整的代码: content="text/html;charset=gb_2312-80"> "MicrosoftFrontPageExpress2.0"> .bigChange{color: blue;font-weight: bolder; font-size: 175%;letter-spacing: 4px; text-transform: uppercase;background: yellow} .start{color: ff0000;background: c8ff4e} .over{color: ffff00;background: 0000ff} functionhighlightButton(s){ if("INPUT"==event.srcElement.tagName) event.srcElement.className=s} "highlightButton('start')" onmouseout="highlightButton('over')"> "button"value="变色按钮");onclick>