注册表单采用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;
}
