html5 + css3实现一种注册表单实例

复制代码

代码如下：

<！DOCTYPEhtml><html><head><metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”/><linkrel=“stylesheet”href=“css/style.css“/><scriptsrc=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script></head><body><divid=wrapper><divid=lbl></div><form><fieldsetid=account><legend>个人信息</legend><labelfor=username>屏幕快照：</label><inputid=username类=文本框类型=文本名称=用户名必需的占位符=“请填写账号”/><labelfor=password1>密码：</label><inputid=password1class=textboxtype=passwordname=password1必需的占位符=“请填写密码”/><labelfor=password2>重复密码：</label>

<inputid=password2class=textboxtype=passwordname=password2必需的占位符=“请重复密码”/><labelfor=email>邮箱地址：</label><inputid=emailclass=textboxtype=emailname=电子邮件必填placeholder=“www.csdn.com”/></fieldset><fieldsetid=personal><legend>其他信息</legend><labelfor=website>个人网址：</label><inputid=websiteclass=textboxtype=urlname=网站必需的占位符=“http://www.example.com”/><labelfor=age>年龄：</label><inputid=ageclass=textboxtype=numbername=agemin=18step=2pattern=“[0-9]{1,3}”placeholder=“填充年龄”><labelfor=salary>月薪：</label>

<inputid=salaryclass=textboxtype=rangename=salarymin=0max=50000step=500pattern=“[0-9]{2，}”placeholder=“月薪几多”value=10000onchange=“showValue（this.value）“/><spanid=rangevalue>10000</span><script>函数showValue（value）{document.getElementById（”rangevalue“）。innerHTML=value;}</script><labelfor=description>描述：</label><textareaid=descriptionname=descriptioncols=30rows=5placeholder=“这里是详细描述”></textarea></fieldset><fieldsetid=confirm><inputtype=submitvalue=“提交”/><divclass=“clearfix”></div></fieldset>

css源码：

复制代码

代码如下：

正文{background：url（bg.jpg）重复；字体家族：ArialNarrow，Arial，无衬线；保证金：0;填充：0;}页眉，节，页脚{display：block;}标头{width：100％;background-color：rgb（0，0，0）;background-color：rgba（0，0，0，0.9）;颜色：#ccc;padding：15px0;字母间距：1px；底边距：20px;位置：相对；}标头h1{margin：050px;文字阴影：2px2px2px＃888;向左飘浮;}#backlinks{float：right;边距：-10px20px;line-height：25px;font-weight：bold;

font-size：12px;text-align：right;}#backlinksa{color：#ccc;文字修饰：无；边距：3px00;显示：块;}#backlinksa：hover{color：#fff;}页脚{background-color：rgb（0，0，0）;background-color：rgba（0，0，0，0.8）;高度：25像素；宽度：100％;line-height：25px;位置：相对；字体家族：Arial，Helvetica，sans-serif;底部：0;左：0;颜色：＃888;font-size：11px;}页脚跨度{padding-left：20px;}页脚a{color：＃1FA2E1;}

#wrapper{width：770px;margin：0自动;text-align：center;}#wrapperhgroup{margin：20px0;文字阴影：1px1px1px#ccc;}#wrapperh1{color：＃146FA0;font-size：42px;保证金：0;}#wrapperh2{color：＃71C1ED;font-size：27px;保证金：0;}#lbl{color：＃777;font-size：17px;font-weight：bold;text-shadow：1px1px0#fff;边距：10px0;}*：focus{outline：none;}标签，输入，文本区域，字段集{display：block;}

fieldset＃account，fieldset＃personal{width：250px;填充：050px50px;边距：10px;向左飘浮;背景：rgb（244,244,244）;背景：rgba（244,244,244,0.7）;-webkit-border-radius：25px;-moz-border-radius：25px;border-radius：25px;border：3pxdouble＃999;}fieldset＃confirm{padding-top：10px;清除边框：无；line-height：15px;边距：10px0;}fieldset＃confirm标签，fieldset＃confirm输入{display：inline;向左飘浮;边距：15px5px0;}图例{font-size：20px;font-weight：bold;

字母间距：5px；颜色：＃999;左边距：-20px;text-align：left;填充：010px;文字阴影：1px1px0#ccc;}标签{font-size：17px;font-weight：bold;边距：17px07px;text-align：left;text-shadow：1px1px0#fff;}textarea{resize：both;max-width：230px;}input.textbox，textarea{padding：5px10px;-webkit-border-radius：15px;-moz-border-radius：15px;border-radius：15px;border：1px实心#fff;宽度：200px;文字阴影：1px1px1px＃777;-moz-box-shadow：0px2px0px＃999;

-webkit-box-shadow：0px2px0px＃999;框阴影：0px2px0px＃999;-webkit-transition：所有0.5s缓入；-moz-transition：全部0.5s缓入；过渡：所有0.5s缓入缓出；background：url（required.png）不重复200px5px＃F0F0EF;背景：-webkit-gradient（线性，左上，左下，从（＃E3E3E3）到（#FFFFFF））；/*Saf4+，Chrome*/背景：-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*Chrome10+，Saf5.1+*/背景：-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*FF3.6+*/背景：-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*IE10*/背景：-o-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*Opera11.10+*/}input.textbox：focus，textarea：focus{

-webkit-transform：scale（1.1）;-moz-transform：scale（1.1）;转换：scale（1.1）;-moz-box-shadow：5px3px1px#ccc;-webkit-box-shadow：5px3px1px#ccc;box-shadow：7px7px2px#ccc;文字阴影：1px1px3px＃777;}input.textbox：required{background：url（required.png）不重复200px5px＃F0F0EF;background：url（required.png）不重复200px5px，-webkit-gradient（linear，lefttop，leftbottom，from（＃E3E3E3），to（#FFFFFF））;/*Saf4+，Chrome*/background：url（required.png）不重复200px5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*Chrome10+，Saf5.1+*/background：url（required.png）不重复200px5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*FF3.6+*/

背景：url（required.png）不重复200px5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*IE10*/background：url（required.png）不重复200px5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*Opera11.10+*/}input.textbox：required：valid{background：url（valid.png）no-repeat200px5px＃F0F0EF;background：url（valid.png）不重复200px5px，-webkit-gradient（linear，左上，左下，从（＃E3E3E3），到（#FFFFFF））;/*Saf4+，Chrome*/background：url（valid.png）不重复200px5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*Chrome10+，Saf5.1+*/background：url（valid.png）不重复200px5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*FF3.6+*/

background：url（valid.png）不重复200px5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*IE10*/background：url（valid.png）不重复200px5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*Opera11.10+*/}input.textbox：focus：invalid，input.textbox：not（：required）：invalid{background：url（invalid.png）不重复200px5px＃F0F0EF;background：url（invalid.png）不重复200px5px，-webkit-gradient（linear，左上，左下，从（＃E3E3E3），到（#FFFFFF））;/*Saf4+，Chrome*/background：url（invalid.png）不重复200px5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*Chrome10+，Saf5.1+*/background：url（invalid.png）不重复200px5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*FF3.6+*/

background：url（invalid.png）不重复200px5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*IE10*/background：url（invalid.png）不重复200px5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）;/*Opera11.10+*/}input[type=submit]{padding：10px;margin：010px！重要;宽度：300px;}@media屏幕和（-webkit-min-device-pixel-ratio：0）{input[type=range]{padding：0;}}#rangevalue{display：block;text-align：right;margin-top：-25px;}input::-webkit-input-placeholder，textarea::-webkit-input-placeholder{color：#aaa;字体样式：斜体；text-shadow：1px1px0#fff;}

输入：-moz-placeholder，文本区域：-moz-placeholder{color：#aaa;字体样式：斜体；text-shadow：1px1px0#fff;}.clearfix{clear：both;}

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60846.shtml