यह एक कि कैसे एक साधारण दो कॉलम लेआउट बनाने के लिए सीएसएस का उपयोग करने पर ट्यूटोरियल है.

इस लेआउट एक शीर्षक, एक मुख्य सामग्री कॉलम, एक साइडबार और पाद लेख हैं. एक बार तुम कैसे अपरिहार्य इंटरनेट एक्सप्लोरर कीड़े से निपटने के लिए सभी जानते मुश्किल में एक सुंदर मूल लेआउट, और नहीं सीएसएस के साथ बनाने के लिए.

1. आधारभूत संरचना

सबसे पहले, हम मूल HTML संरचना बनाने:

  > <div = "page" आईडी> 
  > </div> <div = "header"> </ div> आईडी 
  > </div> <div = "sidebar"> </ div> आईडी 
  > </div> <div = "main"> </ div> आईडी 
  > </div> <div = "footer"> </ div> आईडी 
  </ div> 


  उसके बाद, हम अलग अलग वर्गों में कुछ सामग्री डाल: 

  > <div = "page" आईडी> 
  > <div = "header" आईडी> 
  <h1> कंपनी का नाम </ h1> 
  <h4> प्रकार अपना नारा </ h4> 
  </ div> 

  > <div = "sidebar" आईडी> 
  <h2> नेवीगेशन </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> मुख पृष्ठ </ a> </ ली> 
  > About us </a> </li> <li> <a href = "#"> हमारे बारे में </ a> </ ली> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ ली> 
  > Contact </a> </li> <li> <a href = "#"> संपर्क </ a> </ ली> 
  > Sitemap </a> </li> <li> <a href = "#"> साइटमैप </ a> </ ली> 
  </ उल> 
  </ div> 

  > <div = "main" आईडी> 
  <h2> सामग्री </ h2> 
  <p> Lorem ipsum मातम, consectetuer dipiscing amet बैठो 
  Elit.  Cum आसन्न Montes, nascetur ridiculus mus dis.  1 जनवरी,  
  2002 Lorem ipsum मातम, consectetuer adipiscing elit amet बैठो.  Cum dis  
  आसन्न Montes, nascetur ridiculus mus.  1 जनवरी, 2002 </ p> 
  </ div> 
  > <div = "footer" आईडी> 
  <h2> फूटर </ h2> 
  </ div> 
  </ div> 

2. सीएसएस कोड

अब हम सीएसएस कोड बनाएँ:

  / * शैली दो कॉलम लेआउट * / 
  ; padding : 0 ; } * (मार्जिन: 0; padding: 0;) 
  शरीर 
  ( 
  font-size: 100%; 
  font-weight: सामान्य; 
  ; font-परिवार: Arial, Helvetica, बिना सेरिफ़; 
  ) 
  * HTML, शरीर 
  ( 
  ऊँचाई: 100%; 
  ; न्यूनतम-ऊँचाई: 100% / * फ़ायरफ़ॉक्स * /; 
  ) 


  html, # पृष्ठ 
  (  
  मार्जिन: 0; 
  padding: 0; 
  ऊँचाई: 100%; 
  ) 
  # पृष्ठ 
  ( 
  ; मार्जिन: 0 ऑटो; 
  Padding: 0; 
  Width: 1009px; 
  ऊँचाई: 100%; 
  ) 


  ; } एक (पाठ-सजावट: कोई नहीं;) 

   text-decoration :underline } एक: (पाठ-सजावट: रेखांकित) मंडराना 

  ; padding : 0 ; } उल, ली (मार्जिन: 0; padding: 0;) राजभाषा 


  h1, h2, h3, h4, h5, h6 
  ( 
  मार्जिन: 0; 
  20px ; 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;) 

  ; पी (मार्जिन: 0; 
  लाइन-ऊँचाई: 18px; 
  10px 20px ; padding: 0 0 10px 20px; 
  font-size: 12px;  
  ) 

  # पृष्ठ 
  ( 
  ; मार्जिन: 0 ऑटो; 
  Padding: 0; 
  Width: 1009px; 
  ऊँचाई: 100%; 
  ) 

  # शीर्षक 
  ( 
  मार्जिन: 0; 
  padding: 0; 
  width: 100%; 
  ऊँचाई: 151px; 
  प्रदर्शन: ब्लॉक; 
  ; background-color: # eeeeee; 
  ) 

  # साइडबार 
  ( 
  फ्लोट: छोड़ा; 
  मार्जिन: 0; 
  padding: 0; 
  ; प्रदर्शन: इनलाइन / * इंटरनेट एक्सप्लोरर * /; 
  चौड़ाई: 200px; 
  ऊँचाई: 100%; 
  ; background-color: # cccccc; 
  ) 

  # साइडबार उल 
  ; } (सूची शैली-प्रकार: कोई नहीं;) 

  display : inline /*internet explore*/ ; } # साइडबार उल ली (प्रदर्शन: इनलाइन / * इंटरनेट * तलाशने /;) 

  # साइडबार उल ली एक 
  (  
  ; padding: 3px 4px; 
  प्रदर्शन: ब्लॉक; 
  16px ; मार्जिन: 0px 0 0 16px; 
  पाठ-सजावट: कोई नहीं; 
  रंग: # 0000E8 
  ) 

  # साइडबार उल ली एक: मंडराना 
  : #CC0000 } (रंग: # CC0000)  

  # मुख्य 
  ( 
  मार्जिन: 0; 
  padding: 0; 
  फ्लोट: छोड़ा; 
  प्रदर्शन: ब्लॉक; 
  चौड़ाई: 809px; 
  ऊँचाई: 100%; 
  पृष्ठभूमि: # dddddd 
  ) 
  # पाद लेख 
  ( 
  मार्जिन: 0; 
  padding: 0; 
  प्रदर्शन: ब्लॉक; 
  width: 100%; 
  ऊँचाई: 50px; 
  ; पृष्ठभूमि: # eeeeee; 
  अतिप्रवाह: छुपा; 
  ) 

अंत में हम कर रहे हैं. हम एक सरल 2 कॉलम CSS यहाँ उदाहरण देखने के लिए layout.Click पैदा की है

के तहत दायर: सीएसएस, व्यवस्थापक द्वारा Tutorials