仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 605|回复: 8
打印 上一主题 下一主题

[HTML5] 给大家带来网页制造教程:input输出框技能汇总

[复制链接]
山那边是海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:09:42 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
WHATWG版和W3C版的HTML5规范虽然根源相同,在一些领域却已经产生分歧。破洛洛文章简介:input输出框的各类款式。
输出框景背景通明:
<inputstyle="background:transparent;border:1pxsolid#ffffff">
鼠标划过输出框,输出框背景致变色:
<INPUTvalue="Typehere"NAME="user_pass"TYPE="text"SIZE="29"onmou搜索引擎优化ver="this.style.borderColor=black;this.style.backgroundColor=plum"
style="width:106;height:21"
onmou搜索引擎优化ut="this.style.borderColor=black;this.style.backgroundColor=#ffffff"style="border-width:1px;border-color=black">
输出字时输出框边框闪灼(边框为小方型):
<ScriptLanguage="JavaScript">
functionborderColor(){
if(self[oText].style.borderColor==red){
self[oText].style.borderColor=yellow;
}else{
self[oText].style.borderColor=red;
}
oTime=setTimeout(borderColor(),400);
}
</Script>
<inputtype="text"id="oText"style="border:5pxdottedred;color:red"onfocus="borderColor(this);"onblur="clearTimeout(oTime);">
输出字时输出框边框闪灼(边框为虚线):
<style>
#oText{border:1pxdotted#ff0000;ryo:expression(onfocus=functionlight(){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<inputtype="text"id="oText">
主动横向廷伸的输出框:
<inputtype="text"style="huerreson:expression(this.width=this.scrollWidth)"value="abcdefghijk">
主动向下廷伸的文本框:
<textareaname="content"rows="6"cols="80"onpropertychange="if(this.scrollHeight>80)this.style.posHeight=this.scrollHeight+5">输出几个回车尝尝</textarea>
只要下划线的文本框:
<inputstyle="border:0;border-bottom:1solidblack;background:;">
软件序列号式的输出框:
<scriptfor="T"event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
</script>
<inputname="T"size="5"maxlength="3">—<inputname="T"size="5"maxlength="3">—<inputname="T"size="5"maxlength="3">—<inputname="T"size="5"maxlength="3">—<inputname="T"size="5"maxlength="3">—<inputname="T7"size="5"maxlength="3">
软件序列号式的输出框(完全版):
<scriptfor="T"event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>
<scriptfor="T"event="onfocus">select();</script>
<scriptfor="Submit"event="onclick">
varsn=newArray();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<inputname="T"size="5"maxlength="3">—<inputname="T"size="5"maxlength="3">—<inputname="T"size="5"maxlength="3">—<inputname="T"size="5"maxlength="3">—<inputname="T"size="5"maxlength="3">—<inputname="T"size="5"maxlength="3">
<inputtype="submit"name="Submit">
</p>
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。
蒙在股里 该用户已被删除
沙发
发表于 2015-1-17 20:08:52 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
不帅 该用户已被删除
板凳
发表于 2015-1-25 06:04:11 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
简单生活 该用户已被删除
地板
发表于 2015-2-2 17:51:04 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
海妖 该用户已被删除
5#
发表于 2015-2-8 04:24:49 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
admin 该用户已被删除
6#
发表于 2015-2-24 16:14:18 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
第二个灵魂 该用户已被删除
7#
发表于 2015-3-7 13:05:19 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
飘飘悠悠 该用户已被删除
8#
发表于 2015-3-15 07:30:39 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
只想知道 该用户已被删除
9#
发表于 2015-3-22 00:05:24 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-15 21:49

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表