Comentario: El formulario de registro se implementa utilizando el diseño HTML5+CSS3, y el efecto es bastante bueno. Los diseñadores web de front-end interesados pueden referirse a él. Espero que pueda ayudarte
Las representaciones son las siguientes:Código fuente de HTML:
<! Doctype html>
<html>
<Evista>
<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>
</ablo>
<Body>
<Div ID = WRAPPER>
<div id = lbl> </div>
<form>
<Fieldset ID = Cuenta>
<Legend> Información personal </legend>
<etiqueta for = username> cuenta: </selet>
<input id = username class = textbox type = text name = username requerido PLADELDERGER = "Por favor, complete su cuenta" />
<etiqueta for = contraseña1> contraseña: </selabín>
<ID de entrada = contraseña1 class = TextBox type = contraseña = contraseña1 requerido de poseholder = "Por favor, complete su contraseña"/>
<etiqueta para = contraseña2> repite contraseña: </seleting>
<input id = contraseña2 class = textbox type = contraseña = contraseña2 requerido de poseholder = "por favor repita contraseña"/>
<etiqueta para = correo electrónico> dirección de correo electrónico: </seleting>
<Input ID = correo electrónico class = textbox type = correo electrónico = correo electrónico requerido poseholder = "www.csdn.com" />
</fieldset>
<Fieldset ID = personal>
<legend> otra información </legend>
<etiqueta para = sitio web> URL personal: </seleting>
<Input id = sitio web class = textbox type = url name = sitio web requerido poseholder = "http://www.example.com"/>
<Label para = edad> edad: </selebel>
<Input id = Age class = TextBox type = number name = Age min = 18 step = 2 patrón = "[0-9] {1,3}" PlaceHolder = "Complete la edad">
<etiqueta para = salario> salario mensual: </selabel>
<input id = salary class = textbox type = range name = salary min = 0 max = 50000 step = 500 patrones = "[0-9] {2,}" PLACELATER = "¿Cuál es el salario mensual" Valor = 10000 onChange = "showValue (this.Value)" />> "
<span id = RangeValue> 10000 </span>
<script>
función showValue (valor) {
document.getElementById ("RangeValue"). InnerHtml = value;
}
</script>
<etiqueta para = descripción> Descripción: </selebel>
<TextArea ID = Descripción Name = Descripción cols = 30 filas = 5 PLATISHOTER = "Aquí hay una descripción detallada"> </textarea>
</fieldset>
<Fieldset id = confirmar>
<input type = shipt value = "enviar" />
<div> </div>
</fieldset>
</form>
</div>
</body>
</html>
Código fuente de CSS:
cuerpo{
Antecedentes: URL (bg.jpg) repetir;
Font-Family: Arial estrecho, arial, sans-serif;
margen: 0;
relleno: 0;
}
encabezado, sección, pie de página {
Pantalla: bloque;
}
encabezamiento{
Ancho: 100%;
Color de fondo: RGB (0, 0, 0);
Color de fondo: RGBA (0, 0, 0, 0.9);
Color: #ccc;
relleno: 15px 0;
Espaciado de letras: 1px;
margen-fondo: 20px;
Posición: relativo;
}
Encabezado H1 {
margen: 0 50px;
Shadow de texto: 2px 2px 2px #888;
flotante: izquierda;
}
#backlinks {
flotante: correcto;
margen: -10px 20px;
Línea de altura: 25px;
Font-Weight: Bold;
tamaño de fuente: 12px;
Text-Align: Right;
}
#backlinks a {
Color: #ccc;
Decoración de texto: ninguna;
margen: 3px 0 0;
Pantalla: bloque;
}
#backlinks A: Hover {
Color: #ffff;
}
pie de página{
Color de fondo: RGB (0, 0, 0);
Color de fondo: RGBA (0, 0, 0, 0.8);
Altura: 25px;
Ancho: 100%;
Línea de altura: 25px;
Posición: relativo;
Font-Family: Arial, Helvetica, Sans-Serif;
Abajo: 0;
Izquierda: 0;
Color:#888;
tamaño de fuente: 11px;
}
Pie de pie {
RODING-LUFE: 20px;
}
pie de página A {
Color:#1fa2e1;
}
#envoltura{
Ancho: 770px;
margen: 0 auto;
Text-Align: Center;
}
#WRAPPER HGROUP {
margen: 20px 0;
Shadow de texto: 1px 1px 1px #ccc;
}
#WRAPPER H1 {
Color:#146fa0;
tamaño de fuente: 42px;
margen: 0;
}
#WRAPPER H2 {
Color:#71C1ed;
tamaño de fuente: 27px;
margen: 0;
}
#lbl {
Color:#777;
tamaño de fuente: 17px;
Font-Weight: Bold;
Shadow de texto: 1px 1px 0 #fff;
margen: 10px 0;
}
*:enfocar{
Esquema: ninguno;
}
Etiqueta, entrada, textura, campos {
Pantalla: bloque;
}
Cuenta de#Fieldset, Fieldset#personal {
Ancho: 250px;
relleno: 0 50px 50px;
margen: 10px;
flotante: izquierda;
Antecedentes: RGB (244,244,244);
Antecedentes: RGBA (244,244,244,0.7);
-WebKit-Border-Radius: 25px;
-Moz-Border-Radius: 25px;
Border-Radius: 25px;
borde: 3px doble #999;
}
Fieldset#confirmar {
Top-top: 10px;
claro: ambos;
borde: ninguno;
Línea de altura: 15px;
margen: 10px 0;
}
Fieldset#confirmar etiqueta, Fieldset#confirmar entrada {
Pantalla: en línea;
flotante: izquierda;
margen: 15px 5px 0;
}
leyenda{
tamaño de fuente: 20px;
Font-Weight: Bold;
Espaciado de letras: 5px;
Color:#999;
margen-izquierda: -20px;
text-align: izquierda;
relleno: 0 10px;
Shadow de texto: 1px 1px 0 #ccc;
}
etiqueta{
tamaño de fuente: 17px;
Font-Weight: Bold;
margen: 17px 0 7px;
text-align: izquierda;
Shadow de texto: 1px 1px 0 #fff;
}
TextARea {
cambiar el tamaño: ambos;
MAX-A-ACUERDO: 230PX;
}
input.TextBox, TextAREA {
relleno: 5px 10px;
-WebKit-Border-Radius: 15px;
-Moz-Border-Radius: 15px;
Border-Radius: 15px;
borde: 1px sólido #ffff;
Ancho: 200px;
Shadow de texto: 1px 1px 1px #777;
-Moz-box-shadow: 0px 2px 0px #999;
-webkit-box-shadow: 0px 2px 0px #999;
Shadow de caja: 0px 2px 0px #999;
-WebKit-Transition: todos los 0.5s en facilidad;
-Moz-Transition: todos los 0.5s facilitados;
Transición: todos los 0.5s de facilidad;
Antecedentes: URL (requirir.png) No-repal 200px 5px #f0f0ef;
Antecedentes: -Webkit-gradiente (lineal, superior izquierda, fondo izquierdo, desde (#e3e3e3), a (#ffffff)); / * Saf4+, Chrome */
Antecedentes: -webkit-lineal-gradiente (arriba, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
Antecedentes: -moz-lineal-gradiente (superior, #e3e3e3, #fffff); / * Ff3.6+ */
Antecedentes: -mir-gradiente-lineal (superior, #e3e3e3, #ffffff); / * IE10 */
Antecedentes: -o-gradiente-lineal (superior, #E3E3E3, #fffff); / * Opera 11.10+ */
}
input.TextBox: Focus, TextArea: Focus {
-Webkit-transform: escala (1.1);
-Moz-Transform: escala (1.1);
transformación: escala (1.1);
-Moz-box-shadow: 5px 3px 1px #ccc;
-webkit-box-shadow: 5px 3px 1px #ccc;
Shadow de caja: 7px 7px 2px #ccc;
Shadow de texto: 1px 1px 3px #777;
}
input.TextBox: requerido {
Antecedentes: URL (requirir.png) No-repal 200px 5px #f0f0ef;
Antecedentes: URL (requerido.png) No-repal 200px 5px, -webkit-gradiente (lineal, superior izquierda, fondo izquierdo, desde (#e3e3e3), a (#fffff)); / * Saf4+, Chrome */
Antecedentes: URL (requerido.png) No-repal 200px 5px, -webkit-lineal-gradiente (arriba, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
Antecedentes: URL (requirir.png) No repate 200px 5px, -moz-lineal-gradiente (arriba, #e3e3e3, #fffff); / * Ff3.6+ */
Antecedentes: URL (requerido.png) No-repeat 200px 5px, -ms-lineal-gradiente (superior, #e3e3e3, #ffffff); / * IE10 */
Antecedentes: URL (requirir.png) No repate 200px 5px, -o-lineal-gradiente (superior, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.TextBox: requerido: válido {
Antecedentes: URL (válido.png) No-Repeat 200px 5px #F0F0EF;
Antecedentes: URL (válido.png) No-repeat 200px 5px, -webkit-gradiente (lineal, superior izquierda, fondo izquierdo, desde (#e3e3e3), a (#fffff)); / * Saf4+, Chrome */
Antecedentes: URL (válido.png) No-repal 200px 5px, -webkit-lineal-gradiente (superior, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
Antecedentes: URL (válido.png) No-repeat 200px 5px, -moz-lineal-gradiente (superior, #e3e3e3, #fffff); / * Ff3.6+ */
Antecedentes: URL (válido.png) No-repeat 200px 5px, -ms-lineal-gradiente (superior, #e3e3e3, #ffffff); / * IE10 */
Antecedentes: URL (válido.png) No-Repeat 200px 5px, -o-lineal-gradiente (superior, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.TextBox: Focus: Invalid, input.TextBox: no (: requerido): inválido {
Antecedentes: URL (Invalid.png) No Repeat 200px 5px #F0F0EF;
Antecedentes: URL (Invalid.png) No-Repeat 200px 5px, -webkit-gradiente (lineal, superior izquierda, fondo izquierdo, desde (#e3e3e3), a (#fffff)); / * Saf4+, Chrome */
Antecedentes: URL (Invalid.png) No-Repeat 200px 5px, -webkit-lineal-gradiente (superior, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
Antecedentes: URL (Invalid.png) No-Repeat 200px 5px, -moz-lineal-gradiente (superior, #e3e3e3, #fffff); / * Ff3.6+ */
Antecedentes: URL (Invalid.png) No-repeat 200px 5px, -ms-lineal-gradiente (superior, #e3e3e3, #fffff); / * IE10 */
Antecedentes: URL (Invalid.png) No-Repeat 200px 5px, -o-lineal-gradiente (superior, #e3e3e3, #fffff); / * Opera 11.10+ */
}
Entrada [type = enviar] {
relleno: 10px;
Margen: 0 10px! Importante;
Ancho: 300px;
}
@Media Screen y (-Webkit-Min-Device-Pixel-Ratio: 0) {
entrada [type = range] {Padding: 0;}
}
#RangEvalue {
Pantalla: bloque;
Text-Align: Right;
margen-top: -25px;
}
Entrada ::-WebKit-Input-PlaceHolder, TextArea ::-WebKit-Input-PlaceHolder {
Color: #AAA;
estilo de fuente: cursiva;
Shadow de texto: 1px 1px 0 #fff;
}
Entrada: -Moz-PlaceHolder, TextAREA: -Moz-PlaceHolder {
Color: #AAA;
estilo de fuente: cursiva;
Shadow de texto: 1px 1px 0 #fff;
}
.clarfix {
claro: ambos;
}