Komentar: Formulir pendaftaran diimplementasikan menggunakan tata letak HTML5+CSS3, dan efeknya cukup baik. Desainer web front-end yang tertarik dapat merujuknya. Saya harap ini bisa membantu Anda
Rendering adalah sebagai berikut:Kode Sumber HTML:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<tautan href = "css /style.css" />
<skrip src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
</head>
<body>
<Div ID = Wrapper>
<Div ID = lbl> </div>
<sorm>
<fieldset id = Account>
<Legend> Informasi Pribadi </fegend>
<label for = username> akun: </label>
<input id = username class = TextBox type = nama teks = nama pengguna yang diperlukan placeholder = "Silakan isi akun Anda" />
<Label untuk = Kata Sandi1> Kata Sandi: </label>
<input id = password1 class = TextBox type = Name Kata Sandi = Kata Sandi1 Placeholder yang Diperlukan = "Harap Isi Kata Sandi Anda"/>
<label untuk = kata sandi2> Ulangi kata sandi: </label>
<input id = password2 class = TextBox type = Name Kata Sandi = Kata Sandi2 Diperlukan Placeholder = "Harap Ulangi Kata Sandi"/>
<Label untuk = Email> Alamat Email: </label>
<Input ID = Email Class = TextBox Type = Email Name = Email Diperlukan Placeholder = "www.csdn.com" />
</fieldset>
<fieldset id = pribadi>
<fegend> Informasi lain </fegend>
<label untuk = situs web> url pribadi: </label>
<input id = situs web class = TextBox type = URL name = situs web diperlukan placeholder = "http://www.example.com"/>
<Label untuk = Usia> Usia: </Label>
<Input ID = CLASS Usia = Teks TextBox = Nomor Nama = Usia Min = 18 Langkah = 2 Pola = "[0-9] {1,3}" Placeholder = "Isi Usia">
<Label untuk = Gaji> Gaji Bulanan: </Label>
<Input ID = kelas gaji = tipe TextBox = range name = gaji min = 0 maks = 50000 langkah = 500 pola = "[0-9] {2,}" placeholder = "Apa nilai gaji bulanan" = 10000 onchange = "showValue (this.value)" />
<span id = rangevalue> 10000 </span>
<script>
function showValue (value) {
document.geteLementById ("rangevalue"). innerHtml = nilai;
}
</script>
<Label untuk = Deskripsi> Deskripsi: </label>
<TextArea ID = Deskripsi Nama = Deskripsi COLS = 30 Baris = 5 Placeholder = "Berikut adalah deskripsi terperinci"> </pextArea>
</fieldset>
<fieldset id = konfirmasi>
<Input Type = Kirim Nilai = "Kirim" />
<div> </div>
</fieldset>
</form>
</div>
</body>
</html>
Kode Sumber CSS:
tubuh{
Latar Belakang: URL (BG.JPG) Ulangi;
Font-Family: Arial sempit, arial, sans-serif;
Margin: 0;
Padding: 0;
}
header, bagian, footer {
Tampilan: Blok;
}
header {
Lebar: 100%;
Latar Belakang: RGB (0, 0, 0);
latar belakang-warna: RGBA (0, 0, 0, 0.9);
Warna: #CCC;
Padding: 15px 0;
spasi surat: 1px;
margin-bottom: 20px;
Posisi: kerabat;
}
header h1 {
margin: 0 50px;
Teks-Shadow: 2px 2px 2px #888;
float: kiri;
}
#backLinks {
float: benar;
margin: -10px 20px;
Line-Height: 25px;
font-weight: tebal;
font-size: 12px;
Teks-Align: Benar;
}
#backLinks a {
Warna: #CCC;
Dekorasi Teks: Tidak Ada;
Margin: 3px 0 0;
Tampilan: Blok;
}
#BackLinks A: Hover {
Warna: #FFFF;
}
footer {
Latar Belakang: RGB (0, 0, 0);
latar belakang-warna: RGBA (0, 0, 0, 0.8);
Tinggi: 25px;
Lebar: 100%;
Line-Height: 25px;
Posisi: kerabat;
Font-Family: Arial, Helvetica, Sans-Serif;
Bawah: 0;
Kiri: 0;
Warna:#888;
Ukuran font: 11px;
}
Footer Span {
Padding-left: 20px;
}
footer a {
Warna:#1FA2E1;
}
#pembungkus{
Lebar: 770px;
margin: 0 otomatis;
Teks-Align: tengah;
}
#wrapper hgroup {
Margin: 20px 0;
Teks-Shadow: 1px 1px 1px #CCC;
}
#wrapper h1 {
Warna:#146FA0;
Ukuran font: 42px;
Margin: 0;
}
#wrapper h2 {
Warna:#71c1ed;
Ukuran font: 27px;
Margin: 0;
}
#lbl {
Warna:#777;
font-size: 17px;
font-weight: tebal;
Teks-Shadow: 1px 1px 0 #fff;
Margin: 10px 0;
}
*:fokus{
Garis Besar: Tidak Ada;
}
Label, Input, TexTarea, Fieldset {
Tampilan: Blok;
}
Akun Fieldset#, Fieldset#Pribadi {
Lebar: 250px;
padding: 0 50px 50px;
margin: 10px;
float: kiri;
Latar belakang: RGB (244.244.244);
Latar belakang: RGBA (244.244.244.0.7);
-webkit-border-radius: 25px;
-Moz-border-radius: 25px;
Border-Radius: 25px;
Perbatasan: 3px ganda #999;
}
Fieldset#konfirmasi {
Padding-top: 10px;
jelas: keduanya;
Perbatasan: Tidak Ada;
Line-Height: 15px;
Margin: 10px 0;
}
Label Fieldset#Konfirmasi, Fieldset#Konfirmasi Input {
Tampilan: inline;
float: kiri;
Margin: 15px 5px 0;
}
legenda{
font-size: 20px;
font-weight: tebal;
spasi surat: 5px;
Warna:#999;
margin-kiri: -20px;
Teks-Align: Kiri;
padding: 0 10px;
Teks-Shadow: 1px 1px 0 #CCC;
}
label{
font-size: 17px;
font-weight: tebal;
margin: 17px 0 7px;
Teks-Align: Kiri;
Teks-Shadow: 1px 1px 0 #fff;
}
textarea {
Ubah Ukuran: keduanya;
Max-Width: 230px;
}
input.textbox, textarea {
padding: 5px 10px;
-webkit-border-radius: 15px;
-Moz-border-Radius: 15px;
Border-Radius: 15px;
Perbatasan: 1px solid #ffff;
Lebar: 200px;
Teks-Shadow: 1px 1px 1px #777;
-Moz-box-shadow: 0px 2px 0px #999;
-webkit-box-shadow: 0px 2px 0px #999;
Kotak-Shadow: 0px 2px 0px #999;
-webkit-transisi: semua kemudahan 0,5-an;
-Moz-transisi: semua kemudahan 0,5-an;
Transisi: Semua kemudahan 0,5-an;
Latar Belakang: URL (wajib.png) No-Repeat 200px 5px #F0F0EF;
Latar belakang: -webkit-gradient (linier, atas kiri, bawah kiri, dari (#e3e3e3), ke (#fffff)); / * SAF4+, chrome */
latar belakang: -webkit-linear-gradient (atas, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Latar belakang: -Moz-linear-gradient (atas, #e3e3e3, #fffff); / * Ff3.6+ */
latar belakang: -MS-linear-gradient (atas, #e3e3e3, #FFFFFF); / * IE10 */
Latar belakang: -o-linear-gradient (atas, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.textbox: fokus, textarea: fokus {
-webkit-transform: skala (1.1);
-Moz-Transform: skala (1.1);
Transform: Skala (1.1);
-Moz-box-shadow: 5px 3px 1px #ccc;
-webkit-box-shadow: 5px 3px 1px #ccc;
Kotak-Shadow: 7px 7px 2px #CCC;
Teks-Shadow: 1px 1px 3px #777;
}
input.textbox: diperlukan {
Latar Belakang: URL (wajib.png) No-Repeat 200px 5px #F0F0EF;
Latar Belakang: URL (wajib.png) No-Repeat 200px 5px, -webkit-gradient (linear, atas kiri, bawah kiri, dari (#e3e3e3), ke (#fffff)); / * SAF4+, chrome */
Latar belakang: URL (wajib / * Chrome 10+, SAF5.1+ */
Latar belakang: URL (wajib / * Ff3.6+ */
Latar Belakang: URL (wajib.png) No-Repeat 200px 5px, -MS-linear-gradient (atas, #e3e3e3, #ffffff); / * IE10 */
Latar Belakang: URL (wajib / * Opera 11.10+ */
}
input.textbox: diperlukan: valid {
Latar Belakang: URL (Valid.png) No-Repeat 200px 5px #F0F0EF;
Latar belakang: URL (valid.png) No-Repeat 200px 5px, -webkit-gradient (linear, kiri atas, bawah kiri, dari (#e3e3e3), ke (#fffff)); / * SAF4+, chrome */
Latar belakang: url (valid.png) no-repeat 200px 5px, -webkit-linear-gradient (atas, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Latar belakang: url (valid.png) no-repeat 200px 5px, -moz-linear-gradient (atas, #e3e3e3, #fffff); / * Ff3.6+ */
Latar belakang: url (valid.png) no-repeat 200px 5px, -ms-linear-gradient (atas, #e3e3e3, #ffffff); / * IE10 */
Latar belakang: url (valid.png) no-repeat 200px 5px, -o-linear-gradient (atas, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.textbox: fokus: tidak valid, input.textbox: not (: wajib): tidak valid {
Latar Belakang: URL (tidak valid.png) No-Repeat 200px 5px #F0F0EF;
Latar Belakang: URL (tidak valid.png) No-Repeat 200px 5px, -webkit-gradient (linear, atas kiri, bawah kiri, dari (#e3e3e3), ke (#fffff)); / * SAF4+, chrome */
Latar Belakang: URL (tidak valid.png) No-Repeat 200px 5px, -webkit-linear-gradient (atas, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Latar Belakang: URL (tidak valid.png) No-Repeat 200px 5px, -Moz-linear-gradient (Top, #e3e3e3, #FFFFFF); / * Ff3.6+ */
Latar belakang: url (tidak valid.png) no-repeat 200px 5px, -MS-linear-gradient (atas, #e3e3e3, #fffff); / * IE10 */
Latar Belakang: URL (tidak valid.png) No-Repeat 200px 5px, -o-linear-gradient (Top, #e3e3e3, #FFFFF); / * Opera 11.10+ */
}
input [type = kirim] {
padding: 10px;
Margin: 0 10px! Penting;
Lebar: 300px;
}
Layar @Media dan (-webkit-min-device-pixel-ratio: 0) {
input [type = range] {padding: 0;}
}
#rangevalue {
Tampilan: Blok;
Teks-Align: Benar;
margin-top: -25px;
}
Input ::-WebKit-Input-PlaceHolder, TextArea ::-WebKit-Input-PlaceHolder {
Warna: #aaa;
Font-style: Italic;
Teks-Shadow: 1px 1px 0 #fff;
}
Input: -Moz-placeHolder, TextArea: -Moz-placeHolder {
Warna: #aaa;
Font-style: Italic;
Teks-Shadow: 1px 1px 0 #fff;
}
.clearfix {
jelas: keduanya;
}