هذا البرنامج التعليمي ويشرح كيفية تصميم شكل جيد باستخدام نظيفة المغلق فقط تصميم الملصق والمدخلات وجود علامات لمحاكاة هيكل هتمل الجدول. يمكنك استخدام جميع المغلق / هتمل عناصر التصميم على عهدك شكل الويب للمشاريع :

الخطوة 1 : إنشاء البنية الأساسية هتمل

 > <h1> Contact Form : </h1> <label> <span> Full name </span> <input type = "text" class = "input_text" name = "name" id = "name" / > </label> <label> <span> Email </span> <input type = "text" class = "input_text" name = "email" id = "email" / > </label> <label> <span> Subject </span> <input type = "text" class = "input_text" name = "subject" id = "subject" / > </label> <label> <span> Message </span> <textarea class = "message" name = "feedback" id = "feedback" > </textarea> <input type = "button" class = "button" value = "Submit Form" / > </label> </div> </form> <form><divالطبقة = "box"> <h1>اتصل بنا : </ h1> <label><span>الاسم الكامل </> <مدخلات النوع =" نص "الطبقة =" input_text "اسم =" اسم " معرف = "اسم" /> </ العلامة> <label><span>البريد الإلكتروني </> <inputنوع الطبقة "text"= = ="input_text" اسم "email"معرف"email" = /> </ العلامة> <label><span>الموضوعات </> <inputنوع الطبقة "text"= = ="input_text" اسم المعرف "subject"="subject" /> </ العلامة> <label><span>الرسالة </> <textareaالطبقة "message"اسم = = ="feedback" معرف "feedback"> </ textarea> <inputنوع الطبقة"button" = = = "button"قيمة"Submit Form" /> </ العلامة> </ شعبة> </ شكل> 

الخطوة : 2 قانون إنشاء المغلق

 ; padding : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; background : # 161712 ; } form,input,select,textarea { margin : 0 ; padding : 0 ; color : #ffffff ; } div .box { margin : 0 auto ; width : 500px ; background : # 222222 ; position :relative ; top : 50px ; border : 1px solid # 262626 ; } div .box h1 { color : #ffffff ; font-size : 18px ; text-transform :uppercase ; padding : 5px 0 5px 5px ; border-bottom : 1px solid # 161712 ; border-top : 1px solid # 161712 ; } div .box label { width : 100 %; display : block ; background : #1C1C1C ; border-top : 1px solid # 262626 ; border-bottom : 1px solid # 161712 ; padding : 10px 0 10px 0 ; } div .box label span { display : block ; color : #bbbbbb ; font-size : 12px ; float :left ; width : 100px ; text-align :right ; padding : 5px 20px 0 0 ; } div .box .input_text { padding : 10px 10px ; width : 200px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; } div .box .message { padding : 7px 7px ; width : 350px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; overflow :hidden ; height : 150px ; } div .box .button { margin : 0 0 10px 0 ; padding : 4px 7px ; background : #CC0000 ; border : 0px ; position : relative ; top : 10px ; left : 382px ; width : 100px ; border-bottom : 1px double # 660000 ; border-top : 1px double # 660000 ; border-left : 1px double #FF0033 ; border-right : 1px double #FF0033 ; } * (الهامش : 0 ؛ حشوة : 0 ؛) (هيئة الخط : Arial طبيعي 100 ٪ ، هلفتيكا ، بلا - الرقيق ؛ الخلفية : # 161712 ؛) شكل مساهمات ، اختر ، textarea (الهامش : 0 ؛ حشوة : 0 ؛ لون : # ffffff ؛) شعبة. المربع (الهامش : 0 السيارات ؛ العرض : 500px ؛ الخلفية : # 222222 ؛ موقف : النسبية ؛ الأعلى : 50px ؛ الحدود : 1px الصلبة # 262626 ؛) شعبة. h1 (لون الإطار : # ffffff ؛ الخط - الحجم : 18px ؛ تحويل النصوص : الأحرف الكبيرة ؛ حشوة : 5px 0 5px 5px ؛ الحدود القاع : 1px الصلبة # 161712 ؛ الحدود العليا : 1px الصلبة # 161712 ؛) شعبة. مربع العلامة (العرض : 100 ٪ ؛ العرض : الكتلة ؛ خلفية : # 1C1C1C ؛ الحدود العليا : 1px الصلبة # 262626 ؛ الحدود القاع : 1px الصلبة # 161712 ؛ التضخيم : 10px 0 10px 0 ؛) شعبة. مربع تمتد العلامة (العرض : كتلة ؛ اللون : # bbbbbb ؛ حجم الخط : 12px ؛ تعويم : غادر ؛ العرض : 100px ؛ مواءمة النصوص : الحق ؛ حشوة : 5px 20px 0 0 ؛) شعبة. مربع. input_text (حشوة : 10px 10px ؛ العرض : 200px ؛ الخلفية : # 262626 ؛ الحدود القاع : 1px المزدوج # 171717 ؛ الحدود العليا : 1px ضعف # 171717 ؛ حدود اليسار : 1px ضعف # 333333 ؛ الحدود يمين : 1px ضعف # 333333 ؛) شعبة. مربع. (رسالة حشوة : 7px 7px ؛ العرض : 350px ؛ الخلفية : # 262626 ؛ الحدود القاع : 1px ضعف # 171717 ؛ الحدود العليا : 1px ضعف # 171717 ؛ حدود اليسار : 1px ضعف # 333333 ؛ الحدود يمين : 1px ضعف # 333333 ؛ الفائض : الخفي ؛ الطول : 150px ؛) شعبة. مربع. (زر الهامش : 0 0 10px 0 ؛ حشوة : 4px 7px ؛ الخلفية : # CC0000 ؛ الحدود : 0px ؛ موقف : النسبية ؛ الأعلى : 10px ؛ اليسار : 382px ؛ العرض : 100px ؛ الحدود القاع : 1px ضعف # 660000 ؛ الحدود كبار : 1px ضعف # 660000 ؛ حدود اليسار : 1px # FF0033 مزدوجة ؛ الحدود يمين : 1px ضعف # FF0033 ؛) 

في النهاية نحن القيام به. أنشأنا جيدة من دون النظر إلى شكل مائدة عرض مثال

قدم تحت : المغلق ، والتعليمية من قبل الادارة