التعليق: يتم تنفيذ نموذج التسجيل باستخدام تخطيط HTML5+CSS3 ، والتأثير جيد جدًا. يمكن لمصممي الويب المهتمين في الواجهة الأمامية الرجوع إليها. آمل أن تساعدك
العروض كما يلي:رمز المصدر 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> </viv>
<Porm>
<fieldset id = حساب>
<Legend> المعلومات الشخصية </legend>
<label for = username> الحساب: </label>
<معرف الإدخال = فئة اسم المستخدم = textbox type = text name = username مطلوب المطلوب = "الرجاء ملء حسابك" />
<label for = password1> كلمة المرور: </label>
<معرف الإدخال = password1 class = textbox type = password name = password1 مطلوب leacholder = "الرجاء ملء كلمة المرور الخاصة بك"/>
<label for = password2> كرر كلمة المرور: </label>
<INPUT ID = Password2 class = textbox type = password name = password2 مطلوب leacholder = "الرجاء تكرار كلمة المرور"/>
<label for = email> عنوان البريد الإلكتروني: </label>
<input id = email class = textbox type = email name = email مطلوب مطلوب leacholder = "www.csdn.com" />
</fieldset>
<fieldset id = personal>
<legend> معلومات أخرى </legend>
<label for = website> عنوان URL الشخصي: </label>
<معرف الإدخال = فئة الموقع = textbox type = url name = موقع الويب المطلوب leacholder = "http://www.example.com"/>
<label for = Age> Age: </billy>
<معرف الإدخال = الفئة العمرية = textbox type = number name = age min = 18 Step = 2 pattern = "[0-9] {1،3}" placeholder = "fill in the Age">
<label for = salary> الراتب الشهري: </label>
<معرف الإدخال = فئة الراتب = نوع textbox = اسم المدى = الراتب min = 0 max = 50000 خطوة = 500 نمط = "[0-9] {2 ،}
<span id = rangevalue> 10000 </span>
<script>
وظيفة showvalue (القيمة) {
document.getElementById ("RangeValue"). innerhtml = value ؛
}
</script>
<label for = description> الوصف: </label>
<textarea id = description name = description cols = 30 rows = 5 placeholder = "هنا وصف مفصل"> </textarea>
</fieldset>
<fieldset id = تأكيد>
<نوع الإدخال = إرسال القيمة = "إرسال" />
<viv> </viv>
</fieldset>
</form>
</div>
</body>
</html>
رمز المصدر CSS:
جسم{
الخلفية: URL (BG.JPG) كرر ؛
Font-Family: Arial Narrow ، Arial ، Sans-Serif ؛
الهامش: 0 ؛
الحشو: 0 ؛
}
رأس ، قسم ، تذييل {
العرض: كتلة ؛
}
رأس {
العرض: 100 ٪ ؛
خلفية اللون: RGB (0 ، 0 ، 0) ؛
خلفية اللون: RGBA (0 ، 0 ، 0 ، 0.9) ؛
اللون: #CCC ؛
الحشو: 15px 0 ؛
تباعد الرسائل: 1 بكسل ؛
القاع الهامش: 20 بكسل ؛
الموقف: قريب
}
رأس H1 {
الهامش: 0 50px ؛
النص الشادو: 2px 2px 2px #888 ؛
تعويم: اليسار.
}
#BackLinks {
تعويم: صحيح.
الهامش: -10px 20px ؛
رفع الخط: 25 بكسل ؛
خط الرصيف: جريئة ؛
حجم الخط: 12 بكسل ؛
محاذاة النص: صحيح ؛
}
#BackLinks A {
اللون: #CCC ؛
تدمير النص: لا شيء ؛
الهامش: 3px 0 0 ؛
العرض: كتلة ؛
}
#BackLinks A: Hover {
اللون: #ffff ؛
}
تذييل {
خلفية اللون: RGB (0 ، 0 ، 0) ؛
خلفية اللون: RGBA (0 ، 0 ، 0 ، 0.8) ؛
الارتفاع: 25 بكسل ؛
العرض: 100 ٪ ؛
رفع الخط: 25 بكسل ؛
الموقف: قريب
Font-Family: Arial ، Helvetica ، Sans-Serif ؛
أسفل: 0 ؛
اليسار: 0 ؛
اللون:#888 ؛
حجم الخط: 11px ؛
}
تذييل سبعة {
حشو اليسار: 20 بكسل ؛
}
تذييل {
اللون:#1fa2e1 ؛
}
#إزار{
العرض: 770 بكسل ؛
الهامش: 0 Auto ؛
محاذاة النص: المركز ؛
}
#wrapper hgroup {
الهامش: 20px 0 ؛
نص Shadow: 1px 1px 1px #ccc ؛
}
#wrapper H1 {
اللون:#146FA0 ؛
حجم الخط: 42 بكسل ؛
الهامش: 0 ؛
}
#wrapper H2 {
اللون:#71C1ED ؛
حجم الخط: 27 بكسل ؛
الهامش: 0 ؛
}
#LBL {
اللون:#777 ؛
حجم الخط: 17px ؛
خط الرصيف: جريئة ؛
النص الشادو: 1px 1px 0 #fff ؛
الهامش: 10px 0 ؛
}
*:ركز{
الخطوط العريضة: لا شيء ؛
}
التسمية ، الإدخال ، textarea ، Fieldset {
العرض: كتلة ؛
}
حساب Fieldset#، Fieldset#Personal {
العرض: 250 بكسل ؛
Padding: 0 50px 50px ؛
الهامش: 10px ؛
تعويم: اليسار.
الخلفية: RGB (244،244،244) ؛
الخلفية: RGBA (244،244،244،0.7) ؛
-webkit-border-Radius: 25px ؛
-Moz-Border-Radius: 25px ؛
الحدود الحدودية: 25 بكسل ؛
الحدود: 3px Double #999 ؛
}
Fieldset#تأكيد {
الحشو أعلى: 10 بكسل ؛
واضح: كلاهما ؛
الحدود: لا شيء ؛
ارتفاع الخط: 15 بكسل ؛
الهامش: 10px 0 ؛
}
Fieldset#تأكيد التسمية ، Fieldset#تأكيد الإدخال {
العرض: مضمّن ؛
تعويم: اليسار.
الهامش: 15px 5px 0 ؛
}
أسطورة{
حجم الخط: 20 بكسل ؛
خط الرصيف: جريئة ؛
تباعد الرسائل: 5 بكسل ؛
اللون:#999 ؛
الهامش اليساري: -20px ؛
محاذاة النص: اليسار ؛
الحشو: 0 10px ؛
نص Shadow: 1px 1px 0 #ccc ؛
}
ملصق{
حجم الخط: 17px ؛
خط الرصيف: جريئة ؛
الهامش: 17px 0 7px ؛
محاذاة النص: اليسار ؛
النص الشادو: 1px 1px 0 #fff ؛
}
textarea {
تغيير الحجم: كلاهما ؛
Max-Width: 230px ؛
}
input.textbox ، textarea {
الحشو: 5px 10px ؛
-webkit-border-radius: 15px ؛
-Moz-Border-Radius: 15px ؛
الحدود الحدودية: 15 بكسل ؛
الحدود: 1px الصلبة #ffff ؛
العرض: 200 بكسل ؛
النص الشادو: 1px 1px 1px #777 ؛
-moz-box-shadow: 0px 2px 0px #999 ؛
-webkit-box-shadow: 0px 2px 0px #999 ؛
box-shadow: 0px 2px 0px #999 ؛
-الويبكيت ترانس: كل 0.5s سهلة ؛
-انتقال الأوز: كل 0.5s سهولة في الخارج ؛
الانتقال: جميع 0.5s سهولة في الخارج.
الخلفية: url (مطلوب.
الخلفية: -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، من (#e3e3e3) ، إلى (#fffff)) ؛ / * SAF4+، Chrome */
الخلفية: -webkit-linar-radient (Top ، #e3e3e3 ، #fffff) ؛ / * Chrome 10+ ، SAF5.1+ */
الخلفية: -moz-liner-regient (Top ، #e3e3e3 ، #fffff) ؛ / * ff3.6+ */
الخلفية: -MS-Linar-Radient (Top ، #e3e3e3 ، #ffffff) ؛ / * ie10 */
الخلفية: -o-linar-tradient (Top ، #e3e3e3 ، #fffff) ؛ / * Opera 11.10+ */
}
input.textbox: Focus ، Textarea: Focus {
-webkit-transform: Scale (1.1) ؛
-moz-transform: Scale (1.1) ؛
التحويل: مقياس (1.1) ؛
-moz-box-shadow: 5px 3px 1px #ccc ؛
-webkit-box-shadow: 5px 3px 1px #ccc ؛
Box-shadow: 7px 7px 2px #ccc ؛
النص الشادو: 1px 1px 3px #777 ؛
}
input.textbox: مطلوب {
الخلفية: url (مطلوب.
الخلفية: url (مطلوب. / * SAF4+، Chrome */
الخلفية: url (مطلوب. / * Chrome 10+ ، SAF5.1+ */
الخلفية: url (مطلوب. / * ff3.6+ */
الخلفية: url (مطلوب. / * ie10 */
الخلفية: url (مطلوب. / * Opera 11.10+ */
}
input.textbox: مطلوب: صالح {
الخلفية: url (appal.png) no-repeat 200px 5px #f0f0ef ؛
الخلفية: url (appal.png) no-repeat 200px 5px ، -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، من (#e3e3e3) ، إلى (#ffffff)) ؛ / * SAF4+، Chrome */
الخلفية: url (appal.png) no-repeat 200px 5px ، -webkit-linar-radient (top ، #e3e3e3 ، #fffff) ؛ / * Chrome 10+ ، SAF5.1+ */
الخلفية: url (appal.png) no-repeat 200px 5px ، -moz-linar-radient (top ، #e3e3e3 ، #fffff) ؛ / * ff3.6+ */
الخلفية: url (appal.png) no-repeat 200px 5px ، -Ms-Linar-Radient (Top ، #e3e3e3 ، #ffffff) ؛ / * ie10 */
الخلفية: url (appal.png) no-repeat 200px 5px ، -o-linar-radient (top ، #e3e3e3 ، #fffff) ؛ / * Opera 11.10+ */
}
input.textbox: التركيز: غير صالح ، input.textbox: not (: مطلوب): invalid {
الخلفية: url (invalid.png) no-repeat 200px 5px #f0f0ef ؛
الخلفية: url (invalid.png) no-repeat 200px 5px ، -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، من (#e3e3e3) ، إلى (#ffffff)) ؛ / * SAF4+، Chrome */
الخلفية: url (invalid.png) no-repeat 200px 5px ، -webkit-linar-radient (top ، #e3e3e3 ، #fffff) ؛ / * Chrome 10+ ، SAF5.1+ */
الخلفية: url (invalid.png) no-repeat 200px 5px ، -moz-linar-radient (top ، #e3e3e3 ، #fffff) ؛ / * ff3.6+ */
الخلفية: url (invalid.png) no-repeat 200px 5px ، -Ms-Linar-Radient (top ، #e3e3e3 ، #fffff) ؛ / * ie10 */
الخلفية: url (invalid.png) no-repeat 200px 5px ، -o-linar-radient (top ، #e3e3e3 ، #fffff) ؛ / * Opera 11.10+ */
}
إدخال [type = submit] {
الحشو: 10 بكسل ؛
الهامش: 0 10px! مهم ؛
العرض: 300 بكسل ؛
}
شاشة Media و (-webkit-min-device-pixel-ratio: 0) {
إدخال [type = range] {padding: 0 ؛}
}
#RangeValue {
العرض: كتلة ؛
محاذاة النص: صحيح ؛
الهامش: -25 بكسل ؛
}
إدخال ::-WebKit-Input-placeholder ، TextArea ::-WebKit-Input-placeholder {
اللون: #AAA ؛
على غرار الخط: مائل ؛
النص الشادو: 1px 1px 0 #fff ؛
}
المدخلات: -moz-placeholder ، textarea: -moz-placeholder {
اللون: #AAA ؛
على غرار الخط: مائل ؛
النص الشادو: 1px 1px 0 #fff ؛
}
.clearfix {
واضح: كلاهما ؛
}