Kommentar: Das Registrierungsformular wird unter Verwendung von HTML5+CSS3 -Layout implementiert, und der Effekt ist ziemlich gut. Interessierte Front-End-Webdesigner können darauf verweisen. Ich hoffe es kann dir helfen
Die Renderings sind wie folgt:HTML -Quellcode:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "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>
<form>
<fieldset id = Account>
<Legende> Persönliche Informationen </legend>
<label for = userername> account: </label>
<Eingabe -ID = Benutzername class = textbox type = Textname = Benutzername Erforderliche Platzhalter = "Bitte füllen Sie Ihr Konto aus" />
<Label für = Passwort1> Passwort: </label>
<input id = password1 class = textbox type = passwordname = password1 Erforderlich Platzhalter = "Bitte füllen Sie Ihr Passwort ein"/>
<Label für = password2> Wiederholen Sie das Passwort: </label>
<Eingabe id = password2 class = textbox type = passwordname = password2 Erforderlich Platzhalter = "Bitte wiederholen Sie das Passwort"/>
<Label für = E -Mail> E -Mail -Adresse: </label>
<Eingabe -ID = E -Mail -Klasse = Textbox type = E -Mail -Name = E -Mail Erforderliche Platzhalter = "www.csdn.com" />
</fieldset>
<fieldset id = Personal>
<Legende> Andere Informationen </legend>
<Label für = Website> Persönliche URL: </label>
<input id = Website class = Textbox type = url name = Website Erforderlich Platzholder = "http://www.example.com"/>
<Label für = Alter> Alter: </label>
<Eingabe-ID = Altersklasse = Textbox-Typ = Zahlenname = Alter min = 18 Schritt = 2 Muster = "[0-9] {1,3}" Placeholder = "Füllen Sie das Alter aus"> aus ">
<Label für = Gehalt> Monatliches Gehalt: </label>
<Eingabe-ID = Gehaltsklasse = Textbox-Typ = Bereichsname = Gehalt min = 0 max = 50000 STEP = 500 MUSTERE = "[0-9] {2,}" Placeholder = "Was ist das monatliche Gehalt" value = 10000 onchange = "showValue (this.value)" />
<span id = RangeValue> 10000 </span>
<Script>
Funktion showValue (value) {
document.GetElementById ("RangeValue"). Innerhtml = Wert;
}
</script>
<Label für = Beschreibung> Beschreibung: </label>
<textArea id = Beschreibung Name = Beschreibung cols = 30 Zeilen = 5 Platzhalter = "Hier ist eine detaillierte Beschreibung"> </textArea>
</fieldset>
<fieldset id = bestätigen>
<Eingabe type = Senden value = "subieren" />
<div> </div>
</fieldset>
</form>
</div>
</body>
</html>
CSS -Quellcode:
Körper{
Hintergrund: URL (BG.JPG) Wiederholung;
Schriftfamilie: Arial eng, arial, sans-serif;
Rand: 0;
Polsterung: 0;
}
Header, Abschnitt, Fußzeile {
Anzeige: Block;
}
Header {
Breite: 100%;
Hintergrundfarbe: RGB (0, 0, 0);
Hintergrundfarbe: RGBA (0, 0, 0, 0,9);
Farbe: #CCC;
Polsterung: 15px 0;
Buchstabenabteilung: 1PX;
Randboden: 20px;
Position: Relativ;
}
Header H1 {
Rand: 0 50px;
Text-Shadow: 2PX 2PX 2PX #888;
float: links;
}
#backlinks {
float: rechts;
Rand: -10px 20px;
Zeilenhöhe: 25px;
Schriftgewicht: fett;
Schriftgröße: 12px;
Text-Align: Recht;
}
#backlinks a {
Farbe: #CCC;
Textdekoration: Keine;
Rand: 3px 0 0;
Anzeige: Block;
}
#backlinks a: hover {
Farbe: #ffff;
}
Fußzeile{
Hintergrundfarbe: RGB (0, 0, 0);
Hintergrundfarbe: RGBA (0, 0, 0, 0,8);
Höhe: 25px;
Breite: 100%;
Zeilenhöhe: 25px;
Position: Relativ;
Schriftfamilie: Arial, Helvetica, Sans-Serif;
unten: 0;
links: 0;
Farbe:#888;
Schriftgröße: 11px;
}
Fußzeile {
Padding-Links: 20px;
}
Fußzeile a {
Farbe:#1FA2E1;
}
#Verpackung{
Breite: 770px;
Rand: 0 Auto;
Text-Align: Mitte;
}
#Wrapper hGroup {
Rand: 20px 0;
Text-Shadow: 1PX 1PX 1PX #CCC;
}
#Wrapper H1 {
Farbe:#146fa0;
Schriftgröße: 42px;
Rand: 0;
}
#Wrapper H2 {
Farbe:#71c1ed;
Schriftgröße: 27px;
Rand: 0;
}
#lbl {
Farbe:#777;
Schriftgröße: 17px;
Schriftgewicht: fett;
Text-Shadow: 1PX 1PX 0 #FFF;
Rand: 10px 0;
}
*:Fokus{
Umriss: Keine;
}
Beschriftung, Eingabe, TextArea, Fieldset {
Anzeige: Block;
}
Fieldset#Konto, Fieldset#Personal {
Breite: 250px;
Polsterung: 0 50px 50px;
Rand: 10px;
float: links;
Hintergrund: RGB (244.244,244);
Hintergrund: RGBA (244.244.244,0,7);
-Webkit-Border-Radius: 25px;
-moz-border-radius: 25px;
Border-Radius: 25px;
Grenze: 3px Double #999;
}
Fieldset#bestätigen {
Padding-Top: 10px;
klar: beides;
Grenze: Keine;
Zeilenhöhe: 15px;
Rand: 10px 0;
}
Fieldset#bestätigen Bezeichnung, Fieldset#Bestätigen Sie Eingabe {
Anzeige: Inline;
float: links;
Rand: 15px 5px 0;
}
Legende{
Schriftgröße: 20px;
Schriftgewicht: fett;
Buchstabenabteilung: 5px;
Farbe:#999;
Margin-Links: -20px;
Text-Align: links;
Polsterung: 0 10px;
Text-Shadow: 1PX 1PX 0 #CCC;
}
Etikett{
Schriftgröße: 17px;
Schriftgewicht: fett;
Rand: 17px 0 7px;
Text-Align: links;
Text-Shadow: 1PX 1PX 0 #FFF;
}
textarea {
Größenänderung: beides;
Max-Breite: 230px;
}
input.textbox, textArea {
Polsterung: 5px 10px;
-Webkit-Border-Radius: 15px;
-moz-border-radius: 15px;
Border-Radius: 15px;
Grenze: 1PX Solid #ffff;
Breite: 200px;
Text-Shadow: 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-Übergangs: Alle 0,5s-Einladungen;
-moz-Übergang: Alle 0,5-Leichterungen;
Übergang: Alle 0,5s.
Hintergrund: URL (erforderlich.png) No-Repeat 200px 5px #F0F0EF;
Hintergrund: -Webkit-Gradient (linear, links oben, links unten, von (#e3e3e3) bis (#fffff)); / * SAF4+, Chrome */
Hintergrund: -Webkit-linear-Gradient (Top, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Hintergrund: -moz-linear-Gradient (Top, #e3e3e3, #fffff); / * Ff3.6+ */
Hintergrund: -ms-linear-Gradient (Top, #e3e3e3, #ffffff); / * Ie10 */
Hintergrund: -o-linear-Gradient (Top, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.textbox: Fokus, textarea: fokus {
-Webkit-Transformation: Skala (1.1);
-moz-transform: Skala (1.1);
Transformation: Skala (1.1);
-moz-box-shadow: 5px 3px 1px #ccc;
-Webkit-box-shadow: 5px 3px 1px #ccc;
Box-Shadow: 7px 7px 2px #CCC;
Text-Shadow: 1PX 1PX 3PX #777;
}
input.textbox: erforderlich {
Hintergrund: URL (erforderlich.png) No-Repeat 200px 5px #F0F0EF;
Hintergrund: URL (erforderlich.png) No-Repeat 200px 5px, -Webkit-Gradient (linear, links oben, links unten, von (#e3e3e3) bis (#fffff)); / * SAF4+, Chrome */
Hintergrund: URL (erforderlich.png) No-Repeat 200px 5px, -Webkit-linear-Gradient (Top, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Hintergrund: URL (erforderlich.png) No-Repeat 200px 5px, -moz-linear-Gradient (Top, #e3e3e3, #fffff); / * Ff3.6+ */
Hintergrund: URL (erforderlich.png) No-Repeat 200px 5px, -ms-linear-Gradient (Top, #e3e3e3, #ffffff); / * Ie10 */
Hintergrund: URL (erforderlich.png) No-Repeat 200px 5px, -o-linear-Gradient (TOP, #E3E3E3, #FFFFF); / * Opera 11.10+ */
}
input.textbox: Erforderlich: gültig {
Hintergrund: URL (valid.png) No-Repeat 200px 5px #f0f0ef;
Hintergrund: URL (valid.png) No-Repeat 200px 5px, -Webkit-Gradient (linear, links oben, links unten, von (#e3e3e3) bis (#fffff)); / * SAF4+, Chrome */
Hintergrund: URL (valid.png) No-Repeat 200px 5px, -Webkit-linear-Gradient (Top, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Hintergrund: URL (valid.png) No-Repeat 200px 5px, -moz-linear-Gradient (Top, #e3e3e3, #fffff); / * Ff3.6+ */
Hintergrund: URL (valid.png) No-Repeat 200px 5px, -ms-linear-Gradient (Top, #e3e3e3, #ffffff); / * Ie10 */
Hintergrund: URL (valid.png) No-Repeat 200px 5px, -o-linear-Gradient (Top, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.textbox: fokus: ungültig, input.textbox: nicht (: erforderlich): ungültig {
Hintergrund: URL (Invalid.png) No-Repeat 200px 5px #F0F0EF;
Hintergrund: URL (Invalid.png) No-Repeat 200px 5px, -Webkit-Gradient (linear, links oben, links unten, von (#e3e3e3) bis (#fffff)); / * SAF4+, Chrome */
Hintergrund: URL (Invalid.png) No-Repeat 200px 5px, -Webkit-linear-Gradient (TOP, #E3E3E3, #FFFFF); / * Chrome 10+, SAF5.1+ */
Hintergrund: URL (Invalid.png) No-Repeat 200px 5px, -moz-linear-Gradient (TOP, #E3E3E3, #FFFFF); / * Ff3.6+ */
Hintergrund: URL (Invalid.png) No-Repeat 200px 5px, -ms-linear-Gradient (TOP, #E3E3E3, #FFFFF); / * Ie10 */
Hintergrund: URL (Invalid.png) No-Repeat 200px 5px, -o-linear-Gradient (Top, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input [type = subieren] {
Polsterung: 10px;
Rand: 0 10px! Wichtig;
Breite: 300px;
}
@media screen und (-webkit-min-device-pixel-ratio: 0) {
Eingabe [Typ = Bereich] {Padding: 0;}
}
#RangeValue {
Anzeige: Block;
Text-Align: Recht;
Rand: -25px;
}
Input ::-Webkit-Input-PlaceHolder, TextArea ::-Webkit-Input-Placeholder {
Farbe: #aaa;
Schriftstil: kursiv;
Text-Shadow: 1PX 1PX 0 #FFF;
}
Eingabe: -moz-Placeholder, TextArea: -moz-Placeholder {
Farbe: #aaa;
Schriftstil: kursiv;
Text-Shadow: 1PX 1PX 0 #FFF;
}
.ClearFix {
klar: beides;
}