Comentário: O formulário de registro é implementado usando o layout HTML5+CSS3, e o efeito é muito bom. Os designers de front-end interessados podem se referir a ele. Espero que isso possa te ajudar
As renderizações são as seguintes:Código -fonte HTML:
<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<link href = "css /style.css" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
</head>
<Body>
<div id = wrapper>
<div id = lbl> </div>
<morm>
<fieldset id = conta>
<legend> Informações pessoais </legend>
<Rótulo para = nome de usuário> Conta: </crety>
<ID de entrada = Nome de usuário Class = Tipo de caixa de texto = Nome do texto = Nome de usuário Requerido espaço local = "Por favor, preencha sua conta" />
<Label para = senha1> Senha: </crety>
<entrada de entrada = senha1 class = TextBox Type = Senha Nome = Senha1 Requerido espaço local = "Por favor, preencha sua senha"/>
<Rótulo para = senha2> Repita a senha: </belt>
<ID de entrada = senha2 class = TextBox Type = Senha Nome = Senha2 Requerido espaço local = "Repita senha"/>
<Rótulo para = E -mail> Endereço de email: </belt>
<ID de entrada = email class = TextBox Type = Nome de email = email Requerido espaço local = "www.csdn.com" />
</fieldset>
<fieldset id = pessoal>
<legend> Outras informações </legend>
<Label for = Website> URL pessoal: </elabel>
<ID de entrada = Site Class = Tipo de caixa de texto = Nome do URL = Site Necessário de espaço reservado = "http://www.example.com"/>
<Rótulo para = Age> Idade: </bels>
<ID de entrada = classe de idade = TIPO DO TEXTBOX = Nome do número = Age min = 18 Etapa = 2 Pattern = "[0-9] {1,3}" PlakeHolder = "Preencha a idade">
<Rótulo para = Salário> Salário mensal: </belt>
<ID de entrada = Salário Class = Tipo de caixa de texto = Nome do intervalo = salário min = 0 max = 50000 Etapa = 500 Pattern = "[0-9] {2,}" PlakeHolder = "Qual é o salário mensal" Valor = 10000 onchange = "ShowValue (this.value)" />
<span id = rangeValue> 10000 </span>
<Cript>
função showValue (valor) {
document.getElementById ("rangeValue"). INnerHtml = value;
}
</script>
<Rótulo para = Descrição> Descrição: </elabel>
<texttarea id = Descrição Nome = Descrição Cols = 30 linhas = 5 espaço reservado = "Aqui está uma descrição detalhada"> </sexttarea>
</fieldset>
<fieldset id = confirm>
<Tipo de entrada = submeter value = "submeter" />
<div> </div>
</fieldset>
</morm>
</div>
</body>
</html>
Código -fonte CSS:
corpo{
Antecedentes: URL (bg.jpg) Repita;
Font-Family: Arial estreito, Arial, sem serrif;
margem: 0;
preenchimento: 0;
}
cabeçalho, seção, rodapé {
exibição: bloco;
}
cabeçalho{
largura: 100%;
cor de fundo: rgb (0, 0, 0);
cor de fundo: rgba (0, 0, 0, 0.9);
Cor: #ccc;
preenchimento: 15px 0;
Espacamento de cartas: 1px;
Margin-Bottom: 20px;
Posição: relativa;
}
Cabeçalho H1 {
margem: 0 50px;
Shadow de texto: 2px 2px 2px #888;
flutuar: esquerda;
}
#backlinks {
Float: Certo;
margem: -10px 20px;
altura de linha: 25px;
Peso da fonte: negrito;
tamanho de fonte: 12px;
Alinhamento de texto: à direita;
}
#backlinks A {
Cor: #ccc;
Decoração de texto: Nenhum;
margem: 3px 0 0;
exibição: bloco;
}
#backlinks a: hover {
Cor: #ffff;
}
rodapé{
cor de fundo: rgb (0, 0, 0);
cor de fundo: rgba (0, 0, 0, 0,8);
Altura: 25px;
largura: 100%;
altura de linha: 25px;
Posição: relativa;
Font-Family: Arial, Helvetica, Sans-Serif;
Inferior: 0;
Esquerda: 0;
Cor:#888;
Size da fonte: 11px;
}
ROONS SPAN {
Potding-Left: 20px;
}
ROONO A {
Cor:#1FA2E1;
}
#wrapper {
Largura: 770px;
margem: 0 automático;
Alinhamento de texto: centro;
}
#wrapper hgroup {
margem: 20px 0;
Shadow de texto: 1px 1px 1px #ccc;
}
#wrapper h1 {
Cor:#146FA0;
Size da fonte: 42px;
margem: 0;
}
#wrapper h2 {
Cor:#71c1ed;
Size da fonte: 27px;
margem: 0;
}
#lbl {
Cor:#777;
Size da fonte: 17px;
Peso da fonte: negrito;
Shadow de texto: 1px 1px 0 #fff;
margem: 10px 0;
}
*:foco{
Esboço: Nenhum;
}
etiqueta, entrada, textarea, fieldset {
exibição: bloco;
}
Fieldset#Conta, Fieldset#Pessoal {
Largura: 250px;
preenchimento: 0 50px 50px;
margem: 10px;
flutuar: esquerda;
Antecedentes: RGB (244.244.244);
Antecedentes: RGBA (244.244,244,0.7);
-Webkit-Border-Radius: 25px;
-Moz-Border-Radius: 25px;
Radio de fronteira: 25px;
fronteira: 3px dupla #999;
}
Fieldset#Confirmar {
Top-top: 10px;
claro: ambos;
fronteira: nenhuma;
altura da linha: 15px;
margem: 10px 0;
}
Fieldset#Confirmar Rótulo, Fieldset#Confirmar entrada {
exibição: embutido;
flutuar: esquerda;
margem: 15px 5px 0;
}
lenda{
Size da fonte: 20px;
Peso da fonte: negrito;
Espacamento de cartas: 5px;
Cor:#999;
margem-esquerda: -20px;
Alinhamento de texto: esquerda;
preenchimento: 0 10px;
Shadow de texto: 1px 1px 0 #ccc;
}
rótulo{
Size da fonte: 17px;
Peso da fonte: negrito;
margem: 17px 0 7px;
Alinhamento de texto: esquerda;
Shadow de texto: 1px 1px 0 #fff;
}
Textarea {
RESIDIMENTO: Ambos;
MAX-LUDA: 230PX;
}
input.textbox, textarea {
preenchimento: 5px 10px;
-Webkit-Border-Radius: 15px;
-Moz-Border-Radius: 15px;
Radio de fronteira: 15px;
borda: 1px sólido #ffff;
Largura: 200px;
Shadow de texto: 1px 1px 1px #777;
-moz-box-shadow: 0px 2px 0px #999;
-webkit-box-shadow: 0px 2px 0px #999;
Box-Shadow: 0px 2px 0px #999;
-Webkit-transição: todos os 0.5s facilidade;
-Moz-transição: todos os 0.5s facilidade;
Transição: todos os 0.5s facilidade de saída;
Antecedentes: URL (requerir.png) No-repetir 200px 5px #f0f0ef;
Antecedentes: -Webkit gradiente (linear, superior esquerdo, inferior esquerdo, de (#e3e3e3), para (#fffff)); / * SAF4+, Chrome */
Antecedentes: -Webkit-linear-gradiente (topo, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
Antecedentes: -Moz-linear-gradiente (topo, #e3e3e3, #fffff); / * Ff3.6+ */
Antecedentes: -ms-linear-gradiente (topo, #e3e3e3, #ffffff); / * Ie10 */
Antecedentes: -o-gradiente linear (topo, #e3e3e3, #fffff); / * Opera 11.10+ */
}
Input.TextBox: Focus, Textarea: Focus {
-webkit-transform: escala (1.1);
-moz-transform: escala (1.1);
Transformar: escala (1.1);
-moz-box-shadow: 5px 3px 1px #ccc;
-webkit-box-shadow: 5px 3px 1px #ccc;
Shadow de caixa: 7px 7px 2px #ccc;
Shadow de texto: 1px 1px 3px #777;
}
input.TextBox: requerido {
Antecedentes: URL (requerir.png) No-repetir 200px 5px #f0f0ef;
Antecedentes: URL (requerir.png) No-repetir 200px 5px, -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, de (#e3e3e3), para (#fffff)); / * SAF4+, Chrome */
Antecedentes: URL (requerir.png) No-repetir 200px 5px, -webkit-linear-gradiente (topo, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
Antecedentes: URL (requerir.png) No-repetir 200px 5px, -moz-linear-gradiente (topo, #e3e3e3, #fffff); / * Ff3.6+ */
Antecedentes: URL (requerir.png) No-repetir 200px 5px, -ms-linear-gradiente (topo, #e3e3e3, #fffff); / * Ie10 */
Antecedentes: URL (requerir.png) No-repetir 200px 5px, -o-linear-gradiente (topo, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.TextBox: requerido: válido {
Antecedentes: URL (Valid.png) No-repetir 200px 5px #f0f0ef;
Antecedentes: URL (Valid.png) No-repetir 200px 5px, -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, de (#e3E3e3), para (#fffff)); / * SAF4+, Chrome */
Antecedentes: URL (Valid.png) No-repetir 200px 5px, -webkit-linear-gradiente (topo, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
Antecedentes: URL (Valid.png) No-repetir 200px 5px, -moz-linear-gradiente (topo, #e3e3e3, #fffff); / * Ff3.6+ */
Antecedentes: URL (Valid.png) No-repetir 200px 5px, -ms-linear-gradiente (topo, #e3e3e3, #fffff); / * Ie10 */
Antecedentes: URL (Valid.png) No-repetir 200px 5px, -o-linear-gradiente (topo, #e3e3e3, #fffff); / * Opera 11.10+ */
}
Input.TextBox: Focus: Inválid, Input.TextBox: não (: requerir): inválido {
Antecedentes: URL (inválido.png) No-repetir 200px 5px #f0f0ef;
Antecedentes: URL (inválido.png) No-repetir 200px 5px, -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, de (#e3e3e3), para (#fffff)); / * SAF4+, Chrome */
Antecedentes: URL (inválido.png) No-repetir 200px 5px, -webkit-linear-gradiente (topo, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
Antecedentes: URL (inválido.png) No-repetir 200px 5px, -moz-linear-gradiente (topo, #e3e3e3, #fffff); / * Ff3.6+ */
Antecedentes: URL (inválido.png) No-repetir 200px 5px, -ms-linear-gradiente (topo, #e3e3e3, #fffff); / * Ie10 */
Antecedentes: URL (inválido.png) No-repetir 200px 5px, -o-linear-gradiente (topo, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input [type = submit] {
preenchimento: 10px;
margem: 0 10px! IMPORTANTE;
Largura: 300px;
}
@media tela e (-webkit-min-device-pixel-ratio: 0) {
Input [Type = Range] {preenchimento: 0;}
}
#RangeValue {
exibição: bloco;
Alinhamento de texto: à direita;
Margin-top: -25px;
}
Input ::-WebKit-Input-PlaceLitder, textarea ::-webkit-input-placeholder {
Cor: #AAA;
estilo de fonte: itálico;
Shadow de texto: 1px 1px 0 #fff;
}
Entrada: -moz-placeholder, textarea: -moz-placeholder {
Cor: #AAA;
estilo de fonte: itálico;
Shadow de texto: 1px 1px 0 #fff;
}
.clearfix {
claro: ambos;
}