html5写个表单注册页面,html5 + css3实现一个注册表单实例

注册表单采用html5 + css3布局实现，效果相当不错，发现的前端网页设计者可以参考下哈，希望可以帮助到你

效果图如下

：

复制代码

代码如下：

head>

div>

个人信息 legend>

屏幕快照： label>

密码： label>

重复密码： label>

邮箱地址： label>

fieldset>

其他信息 legend>

个人网址： label>

年龄： label>

月薪： label>

10000 span>

函数showValue(value){

document.getElementById(” rangevalue“)。innerHTML = value;

}

script>

描述： label>

textarea>

fieldset>

div>

fieldset>

css源码：

复制代码

代码如下：

正文{

background：url(bg.jpg)重复；

字体家族：Arial Narrow，Arial，无衬线；

保证金：0;

填充：0;

}

页眉，节，页脚{

display：block;

}

标头{

width：100％;

background-color：rgb(0，0，0);

background-color：rgba(0，0，0，0.9);

颜色：#ccc;

padding：15px 0;

字母间距：1px；

底边距：20px;

位置：相对；

}

标头h1 {

margin：0 50px;

文字阴影：2px 2px 2px＃888;

向左飘浮;

}

#backlinks {

float：right;

边距：-10px 20px;

line-height：25px;

font-weight：bold;

font-size：12px;

text-align：right;

}

#backlinks a {

color：#ccc;

文字修饰：无；

边距：3px 0 0;

显示：块;

}

#backlinks a：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;

}

#wrapper hgroup {

margin：20px 0;

文字阴影：1px 1px 1px #ccc;

}

#wrapper h1 {

color：＃146FA0;

font-size：42px;

保证金：0;

}

#wrapper h2 {

color：＃71C1ED;

font-size：27px;

保证金：0;

}

#lbl {

color：＃777;

font-size：17px;

font-weight：bold;

文字阴影：1px 1px 0 #fff;

边距：10px 0;

}

*：focus {

outline：none;

}

标签，输入，文本区域，字段集{

display：block;

}

fieldset＃account，fieldset＃personal {

width：250px;

填充：0 50px 50px;

边距：10px;

向左飘浮;

背景：rgb(244,244,244);

背景：rgba(244,244,244,0.7);

-webkit-border-radius：25px;

-moz-border-radius：25px;

border-radius：25px;

border：3px double＃999;

}

fieldset＃confirm {

padding-top：10px;

清除：两者；

边框：无；

line-height：15px;

边距：10px 0;

}

fieldset＃confirm标签，fieldset＃confirm输入{

display：inline;

向左飘浮;

边距：15px 5px 0;

}

图例{

font-size：20px;

font-weight：bold;

字母间距：5px；

颜色：＃999;

左边距：-20px;

text-align：left;

填充：0 10px;

文字阴影：1px 1px 0 #ccc;

}

标签{

font-size：17px;

font-weight：bold;

边距：17px 0 7px;

text-align：left;

文字阴影：1px 1px 0 #fff;

}

textarea {

resize：both;

max-width：230px;

}

input.textbox，textarea {

padding：5px 10px;

-webkit-border-radius：15px;

-moz-border-radius：15px;

border-radius：15px;

border：1px实心#fff;

宽度：200像素；

文字阴影：1px 1px 1px＃777;

-moz-box-shadow：0px 2px 0px＃999;

-webkit-box-shadow：0px 2px 0px＃999;

框阴影：0px 2px 0px＃999;

-webkit-transition：全部0.5s缓入；

-moz转换：全部0.5s缓入；

过渡：所有0.5s缓入缓出；

background：url(required.png)不重复200px 5px＃F0F0EF;

背景：-webkit-gradient(线性，左上，左下，从(＃E3E3E3)，到(#FFFFFF)); / * Saf4 +，Chrome * /

背景：-webkit-linear-gradient(top，＃E3E3E3，#FFFFFF); / * Chrome 10 +，Saf5.1 + * /

背景：-moz-linear-gradient(top，＃E3E3E3，#FFFFFF); / * FF3.6 + * /

背景：-ms-linear-gradient(top，＃E3E3E3，#FFFFFF); / * IE10 * /

背景：-o-linear-gradient(top，＃E3E3E3，#FFFFFF); / * Opera 11.10+ * /

}

input.textbox：focus，textarea：focus {

-webkit-transform：scale(1.1);

-moz-transform：scale(1.1);

转换：scale(1.1);

-moz-box-shadow：5像素3像素1像素#ccc;

-webkit-box-shadow：5px 3px 1px #ccc;

框阴影：7px 7px 2px #ccc;

文字阴影：1px 1px 3px＃777;

}

input.textbox：required {

background：url(required.png)不重复200px 5px＃F0F0EF;

background：url(required.png)不重复200px 5px，-webkit-gradient(linear，left top，left bottom，from(＃E3E3E3)，to(#FFFFFF)); / * Saf4 +，Chrome * /

background：url(required.png)不重复200px 5px，-webkit-linear-gradient(top，＃E3E3E3，#FFFFFF); / * Chrome 10 +，Saf5.1 + * /

background：url(required.png)不重复200px 5px，-moz-linear-gradient(top，＃E3E3E3，#FFFFFF); / * FF3.6 + * /

背景：url(required.png)不重复200px 5px，-ms-linear-gradient(top，＃E3E3E3，#FFFFFF); / * IE10 * /

background：url(required.png)不重复200px 5px，-o-linear-gradient(top，＃E3E3E3，#FFFFFF); / * Opera 11.10+ * /

}

input.textbox：required：valid {

background：url(valid.png)不重复200px 5px＃F0F0EF;

background：url(valid.png)不重复200px 5px，-webkit-gradient(linear，左上，左下，从(＃E3E3E3)，到(#FFFFFF)); / * Saf4 +，Chrome * /

background：url(valid.png)不重复200px 5px，-webkit-linear-gradient(top，＃E3E3E3，#FFFFFF); / * Chrome 10 +，Saf5.1 + * /

background：url(valid.png)不重复200px 5px，-moz-linear-gradient(top，＃E3E3E3，#FFFFFF); / * FF3.6 + * /

background：url(valid.png)不重复200px 5px，-ms-linear-gradient(top，＃E3E3E3，#FFFFFF); / * IE10 * /

background：url(valid.png)不重复200px 5px，-o-linear-gradient(top，＃E3E3E3，#FFFFFF); / * Opera 11.10+ * /

}

input.textbox：focus：invalid，input.textbox：not(：required)：invalid {

background：url(invalid.png)不重复200px 5px＃F0F0EF;

背景：url(invalid.png)不重复200px 5px，-webkit-gradient(linear，左上，左下，从(＃E3E3E3)，到(#FFFFFF)); / * Saf4 +，Chrome * /

background：url(invalid.png)不重复200px 5px，-webkit-linear-gradient(top，＃E3E3E3，#FFFFFF); / * Chrome 10 +，Saf5.1 + * /

background：url(invalid.png)不重复200px 5px，-moz-linear-gradient(top，＃E3E3E3，#FFFFFF); / * FF3.6 + * /

background：url(invalid.png)不重复200px 5px，-ms-linear-gradient(top，＃E3E3E3，#FFFFFF); / * IE10 * /

background：url(invalid.png)不重复200px 5px，-o-linear-gradient(top，＃E3E3E3，#FFFFFF); / * Opera 11.10+ * /

}

input [type = submit] {

padding：10px;

margin：0 10px！重要;

宽度：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;

字体样式：斜体；

文字阴影：1px 1px 0 #fff;

}

输入：-moz-placeholder，文本区域：-moz-placeholder {

color：#aaa;

字体样式：斜体；

文字阴影：1px 1px 0 #fff;

}

.clearfix {

clear：both;

}