كيف نخلق ثلاثة العمود النسق المغلق ، المغلق ، والتعليمية ، وتصميم مصادر

كيف نخلق ثلاثة العمود النسق المغلق

هذا هو البرنامج التعليمي على كيفية استخدام المغلق لإنشاء ثلاثة العمود بسيطة التصميم.
مخطط يتكون من ضربة رأس ، والمحتوى الرئيسي والعمود ، وهو الشريط الجانبي ، والذيل. جميلة التصميم الأساسي ، وليس من الصعب على الإطلاق مع خلق المغلق مرة كنت تعرف كيفية التعامل مع إنترنت إكسبلورر البق لا مفر منه.

بكتيريا الأولى : نحن تهيئة البنية الأساسية لهتمل


 > <div id = "header" > <div id = "sub-header" > </div> </div> <div id = "nevigation" > <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Products </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Contact Us </a> </li> </ul> </div> <div id = "content" > <div id = "sub-content" > <div id = "column1" > <h2> About Us </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. <divمعرف = "page"> <divمعرف ="header"> <divمعرف = "sub-header"> </ شعبة> </ شعبة> <divمعرف ="nevigation"> <ul><li><أ href = "#"> الصفحة الرئيسية <</ لى> <li><ahref = "#"> عنا <</ لى> <li><ahref ="#"> الخدمات </ > </ لى> <li><ahref = "#"> المنتجات <</ لى> <li><ahref ="#"> خريطة الموقع <</ لى> <li>< أ href = "#"> اتصل بنا <</ لى> </ المقدس> </ شعبة> <divمعرف "content"=> <divمعرف"sub-content" => <شعبة معرف = "column1" > <h2>نحن </ h2> <p>Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت.  حزب التحرير viverra اللجنة الوطنية للانتخابات risus وثيقة الهوية الوحيدة في الاتحاد الاوروبي neque أ tortor lacinia rhoncus.  في interdum placerat purus.  Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت. Suspendisse potenti.Lorem ipsum دولور الجلوس امات عضو </ ع> <p>Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت.  حزب التحرير viverra اللجنة الوطنية للانتخابات risus وثيقة الهوية الوحيدة في الاتحاد الاوروبي neque أ tortor lacinia rhoncus.  في interdum placerat purus.  > Readmore </a> </p> </div> <div id = "column2" > <h2> Services </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت. Suspendisse potenti.Lorem ipsum دولور الجلوس امات عضو <ahref = "#"> Readmore <</ ع> </ شعبة> <divمعرف ="column2"> <h2 > الخدمات </ h2> <p>Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت.  حزب التحرير viverra اللجنة الوطنية للانتخابات risus وثيقة الهوية الوحيدة في الاتحاد الاوروبي neque أ tortor lacinia rhoncus.  في interdum placerat purus.  Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت. Suspendisse potenti.Lorem ipsum دولور الجلوس امات عضو </ ع> <p>Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت.  حزب التحرير viverra اللجنة الوطنية للانتخابات risus وثيقة الهوية الوحيدة في الاتحاد الاوروبي neque أ tortor lacinia rhoncus.  في interdum placerat purus.  > Readmore </a> </p> </div> <div id = "column3" > <h2> Contact Detail </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت. Suspendisse potenti.Lorem ipsum دولور الجلوس امات عضو <ahref = "#"> Readmore <</ ع> </ شعبة> <divمعرف ="column3"> <h2 > التفاصيل الاتصال </ h2> <p>Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت.  حزب التحرير viverra اللجنة الوطنية للانتخابات risus وثيقة الهوية الوحيدة في الاتحاد الاوروبي neque أ tortor lacinia rhoncus.  في interdum placerat purus.  Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت. Suspendisse potenti.Lorem ipsum دولور الجلوس امات عضو </ ع> <p>Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت.  حزب التحرير viverra اللجنة الوطنية للانتخابات risus وثيقة الهوية الوحيدة في الاتحاد الاوروبي neque أ tortor lacinia rhoncus.  في interdum placerat purus.  > Readmore </a> </p> </div> </div> </div> <div id = "bottom" > <div id = "sub-bottom" > <span> Copyright &copy; Developer's Paradise                    Designed By Developer's Paradise </span> </div> </div> </div> Lorem ipsum دولور الجلوس امات عضو consectetur adipiscing إيليت. Suspendisse potenti.Lorem ipsum دولور الجلوس امات عضو <ahref = "#"> Readmore <</ ع> </ شعبة> </ شعبة> </ شعبة> <شعبة معرف = "القاعدة"> <divمعرف "sub-bottom"=> <span>حقوق الطبع والنشر © المطورين الجنة تصميم المطورين الجنة </> </ شعبة> </ شعبة> </ شعبة>

الخطوة الثانية : أننا تهيئة البنية الأساسية المغلق


 ; padding : 0 ; } h1,h2,h3,h4 { font : 100 % "Georgia" , Times New Roman, Times, serif ; color : #fff ; text-transform :uppercase ; letter-spacing : 2px } h1 { font-size : 400 %; text-align :center ; padding : 35px 0 0 0 ; } h2 { font-size : 150 %; } h3 { font-size : 137 %; } h4 { font-size : 120 %;text-align :center ; color : # 848484 ; } ul,ol,li { list-style-type :none ; } a { text-decoration :none ; color : #00CCFF } a :hover { text-decoration :underline ; } p { color : #fff ; font-size : 12px ; font-family : "Georgia" , Times New Roman, Times, serif ; color : #fff ; padding : 0 0 10px 0 ; line-height : 22px ; } * (الهامش : 0 ؛ حشوة : 0 ؛) h1 ، h2 ، H3 ، H4 (الخط : 100 ٪ "جورجيا" ، والرومانية الجديدة تايمز ، تايمز ، شريف ؛ اللون : # الاتحاد الفرنسي ؛ تحويل النصوص : الأحرف الكبيرة ؛ المباعدة بين الرسالة : 2px) h1 (الخط الحجم : 400 ٪ ؛ مواءمة النصوص : المركز ؛ التضخيم : 35px 0 0 0 ؛) h2 (الخط الحجم : 150 ٪ ؛) h3 (الخط الحجم : 137 ٪ ؛) (H4 حجم الخط : 120 ٪ ؛ مواءمة النصوص : المركز ؛ اللون : # 848484 ؛) المقدس ، رأ لى (قائمة على نمط من نوع : لا شيء ؛) (النصوص زينة : لا شيء ؛ اللون : # 00CCFF) : (النصوص تحوم الديكور : التأكيد ؛) (ع اللون : # الاتحاد الفرنسي ؛ حجم الخط : 12px ؛ الخط بين أفراد الأسرة : "جورجيا" ، والرومانية الجديدة تايمز ، تايمز ، شريف ؛ اللون : # الاتحاد الفرنسي ؛ حشوة : 0 0 10px 0 ؛ خط الطول : 22px ؛) 
  % normal "Georgia" , Times New Roman, Times, serif ; background : # 191919 ; } الهيئة (الخط : 100 ٪ طبيعي "جورجيا" ، والرومانية الجديدة تايمز ، تايمز ، شريف ؛ الخلفية : # 191919 ؛) 
  background : # 323232 ; width : 971px ; margin : 0 auto ; height : 100 %; border-left : 1px solid # 353535 ; border-right : 1px solid # 353535 ; padding : 12px 0 12px 0 ; } (# الصفحة الخلفية : # 323232 ؛ العرض : 971px ؛ الهامش : 0 السيارات ؛ الطول : 100 ٪ ؛ حدود اليسار : 1px الصلبة # 353535 ؛ الحدود يمين : 1px الصلبة # 353535 ؛ التضخيم : 12px 0 12px 0 ؛) 
  margin : 0px auto 0 auto ; width : 943px ; background : # 222 ; border : 1px solid # 424242 ; } #sub-header { margin : 1px ; padding : 1px ; background : # 333 ; overflow :hidden ; height : 150px ; } # (رأس الهامش : 0px السيارات 0 السيارات ؛ العرض : 943px ؛ الخلفية : # 222 ؛ الحدود : 1px الصلبة # 424242 ؛) # دون رأس (الهامش : 1px ؛ حشوة : 1px ؛ الخلفية : # 333 ؛ الفائض : الخفي ؛ الطول : 150px ؛) 
 margin : 5px auto 0 auto ; width : 943px ; background : # 222 ; border : 1px solid # 424242 ; } #nevigation ul { margin : 1px ; padding : 0px ; background : # 333 ; overflow :hidden ; } #nevigation li { display : inline ; /*ie*/ } #nevigation li a { float :left ; margin : 0 ; padding : 7px 10px ; display : block ; color : #fff ; text-transform :uppercase ; letter-spacing : 2px ; } #nevigation li a :hover { background : # 424242 ; text-decoration :none ; color : #00CCFF ; } (# nevigation الهامش : 5px السيارات 0 السيارات ؛ العرض : 943px ؛ الخلفية : # 222 ؛ الحدود : 1px الصلبة # 424242 ؛) (# nevigation المقدس الهامش : 1px ؛ حشوة : 0px ؛ الخلفية : # 333 ؛ الفائض : الخفي ؛) # (عرض nevigation لي : المحول ؛ / * أي * /) # nevigation لى أ (تعويم : غادر ؛ الهامش : 0 ؛ حشوة : 7px 10px ؛ العرض : كتلة ؛ اللون : # الاتحاد الفرنسي ؛ تحويل النصوص : الأحرف الكبيرة ؛ المباعدة بين الرسالة : 2px ؛) # nevigation لى أ : (تحوم الخلفية : # 424242 ؛ النصوص زينة : لا شيء ؛ اللون : # 00CCFF ؛) 
 width : 943px ; margin : 5px auto 0 auto ; background : # 222 ; border : 1px solid # 424242 ; } #sub-content { margin : 1px ; padding : 1px ; background : # 333 ; overflow :hidden ; } (# محتوى العرض : 943px ؛ الهامش : 5px السيارات 0 السيارات ؛ الخلفية : # 222 ؛ الحدود : 1px الصلبة # 424242 ؛) # (دون محتوى الهامش : 1px ؛ حشوة : 1px ؛ الخلفية : # 333 ؛ الفائض : الخفي ؛) 
 width : 302px ; background : # 424242 ; margin : 0 1px 0 0 ; padding : 5px ; float :left ; } #column2 { width : 302px ; background : # 424242 ; margin : 0 1px 0 0 ; padding : 5px ; float :left ; } #column3 { width : 303px ; background : # 424242 ; margin : 0 ; padding : 5px ; float :left ; } (# column1 العرض : 302px ؛ الخلفية : # 424242 ؛ الهامش : 0 1px 0 0 ؛ حشوة : 5px ؛ تعويم : غادر ؛) (# column2 العرض : 302px ؛ الخلفية : # 424242 ؛ الهامش : 0 1px 0 0 ؛ حشوة : 5px ؛ تعويم : غادر ؛) (# column3 العرض : 303px ؛ الخلفية : # 424242 ؛ الهامش : 0 ؛ حشوة : 5px ؛ تعويم : غادر ؛) 
 width : 943px ; margin : 5px auto 0 auto ; background : # 222 ; border : 1px solid # 424242 ; } #sub-bottom { margin : 1px ; padding : 20px 0 0 0px ; background : # 333 ; overflow :hidden ; height : 50px ; color : #fff ; text-align :center ; text-transform :uppercase ; letter-spacing : 2px ; } (# أسفل العرض : 943px ؛ الهامش : 5px السيارات 0 السيارات ؛ الخلفية : # 222 ؛ الحدود : 1px الصلبة # 424242 ؛) # باطن (الهامش : 1px ؛ التضخيم : 20px 0 0 0px ؛ الخلفية : # 333 ؛ الفائض : خفي ؛ الطول : 50px ؛ اللون : # الاتحاد الفرنسي ؛ مواءمة النصوص : المركز ؛ تحويل النصوص : الأحرف الكبيرة ؛ المباعدة بين الرسالة : 2px ؛)