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

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

1. البنية الأساسية

أولا وقبل كل شيء ، وعلينا تهيئة البنية الأساسية هتمل :

 > <div id = "header" > </div> <div id = "sidebar" > </div> <div id = "main" > </div> <div id = "footer" > </div> </div> <divمعرف = "page"> <divمعرف ="header"> </ شعبة> <divمعرف = "sidebar"> </ شعبة> <divمعرف ="main"> </ شعبة> <شعبة معرف = "الذيل "> <شعبة> </ شعبة> 
  بعد ذلك ، وضعنا بعض المحتويات في مختلف أقسام : 
 > <div id = "header" > <h1> Company Name </h1> <h4> Type your slogan </h4> </div> <div id = "sidebar" > <h2> Navigation </h2> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Srevices </a> </li> <li> <a href = "#" > Contact </a> </li> <li> <a href = "#" > Sitemap </a> </li> </ul> </div> <div id = "main" > <h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing  elit. <divمعرف = "page"> <divمعرف ="header"> <h1>اسم الشركة </ h1> <h4>اكتب شعار </ H4> </ شعبة> <divمعرف = "sidebar"> <h2> التنقل </ h2> <ul><li><ahref = "#"> الصفحة الرئيسية <</ لى> <li><ahref ="#"> عنا <</ لى> < لى> <ahref = "#"> Srevices <</ لى> <li><ahref ="#"> الاتصال <</ لى> <li><ahref = "#"> خريطة الموقع <</ لى> </ المقدس> </ شعبة> <divمعرف "main"=> <h2>المحتوى </ h2> <p>Lorem ipsum دولور الجلوس امات ، consectetuer dipiscing إيليت.  نائب الرئيس ديس ماخض مونتس ، nascetur ridiculus موريشيوس.  1 يناير 2002 Lorem ipsum دولور الجلوس امات ، consectetuer adipiscing إيليت.  لنائب الرئيس ديس ماخض مونتس ، nascetur ridiculus موريشيوس.  > <h2> Footer </h2> </div> </div> 1 يناير 2002 </ ع> </ شعبة> <divمعرف "footer"=> <h2>ذيل الصفحة </ h2> </ شعبة> </ شعبة> 

2. قانون المغلق

ونحن الآن في إيجاد مدونة المغلق :

  / * أسلوب تصميم العمود الثاني * / 
  ; padding : 0 ; } * (الهامش : 0 ؛ حشوة : 0 ؛) 
  جسم 
  ( 
  حجم الخط : 100 ٪ ؛ 
  الخط الوزن : عادي ؛ 
  ; عائلة الخط : Arial ، هلفتيكا ، بلا - الرقيق ؛ 
  ) 
  * هتمل ، الهيئة 
  ( 
  الطول : 100 ٪ ؛ 
  ; مين الطول : 100 ٪ / * فايرفوكس * ؛ 
  ) 


 margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } هتمل ، (# هامش الصفحة : 0 ؛ حشوة : 0 ؛ الطول : 100 ٪ ؛) (# هامش الصفحة : 0 السيارات ؛ حشوة : 0 ؛ العرض : 1009px ؛ الطول : 100 ٪ ؛) 
 ; } a :hover { text-decoration :underline } ul,ol,li { margin : 0 ; padding : 0 ; } h1,h2,h3,h4,h5,h6 { margin : 0 ; padding : 10px 0 0 20px ; } h1 { font-size : 28px ; } h2 { font-size : 24px ; } h3 { font-size : 18px ; } h4 { font-size : 12px ; } h5 { font-size : 10px ; } p { margin : 0 ; line-height : 18px ; padding : 0 0 10px 20px ; font-size : 12px ; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } #header { margin : 0 ; padding : 0 ; width : 100 %; height : 151px ; display :block ; background-color : #eeeeee ; } #sidebar { float :left ; margin : 0 ; padding : 0 ; display :inline /*internet explorer*/ ; width : 200px ; height : 100 %; background-color : #cccccc ; } #sidebar ul { list-style-type :none ; } #sidebar ul li { display : inline /*internet explore*/ ; } #sidebar ul li a { padding : 3px 4px ; display :block ; margin : 0px 0 0 16px ; text-decoration :none ; color : #0000E8 } #sidebar ul li a :hover { color : #CC0000 } #main { margin : 0 ; padding : 0 ; float :left ; display :block ; width : 809px ; height : 100 %; background : #dddddd } #footer { margin : 0 ; padding : 0 ; display :block ; width : 100 %; height : 50px ; background : #eeeeee ; overflow :hidden ; } أ (النصوص زينة : لا شيء ؛) : (النصوص تحوم الديكور : يؤكد) المقدس ، رأ لى (الهامش : 0 ؛ حشوة : 0 ؛) h1 ، h2 ، H3 ، H4 ، H5 ، h6 (الهامش : 0 ؛ التضخيم : 10px 0 0 20px ؛) h1 (حجم الخط : 28px ؛) h2 (حجم الخط : 24px ؛) h3 (حجم الخط : 18px ؛) (H4 حجم الخط : 12px ؛) (H5 حجم الخط : 10px ؛) (ع الهامش : 0 ؛ خط الطول : 18px ؛ حشوة : 0 0 10px 20px ؛ حجم الخط : 12px ؛) (# هامش الصفحة : 0 السيارات ؛ حشوة : 0 ؛ العرض : 1009px ؛ الطول : 100 ٪ ؛ () # رأس الهامش : 0 ؛ حشوة : 0 ؛ العرض : 100 ٪ ؛ الطول : 151px ؛ العرض : كتلة ؛ خلفية الالوان : # eeeeee ؛) (# الشريط الجانبي تعويم : غادر ؛ الهامش : 0 ؛ حشوة : 0 ؛ العرض : المحول / * إنترنت إكسبلورر * ؛ العرض : 200px ؛ الطول : 100 ٪ ؛ خلفية الالوان : # cccccc ؛) (# الشريط الجانبي المقدس قائمة على نمط من نوع : لا شيء ؛) # (الشريط الجانبي المقدس لى العرض : المحول / * استكشاف الإنترنت * ؛) # الشريط الجانبي المقدس لى أ (حشوة : 3px 4px ؛ العرض : كتلة ؛ الهامش : 0px 0 0 16px ؛ النصوص زينة : لا شيء ؛ لون :) # # 0000E8 لى وجود الشريط الجانبي المقدس : (اللون تحوم : # CC0000) # الرئيسية (الهامش : 0 ؛ حشوة : 0 ؛ تعويم : غادر ؛ العرض : كتلة ؛ العرض : 809px ؛ الطول : 100 ٪ ؛ الخلفية : # # dddddd) (الذيل الهامش : 0 ؛ حشوة : 0 ؛ العرض : كتلة ؛ العرض : 100 ٪ ؛ الطول : 50px ؛ الخلفية : # eeeeee ؛ الفائض : الخفي ؛) 

في النهاية نحن القيام به. أنشأنا بسيطة 2 العمود المغلق layout.Click هنا لمشاهدة مثال