सीएसएस लेआउट की आवश्यकता है कि आप पूरी तरह से अपनी वेबसाइट लेआउट के बारे में सोचें, और फिर टुकड़े लें और उन्हें एक साथ रखें। सीएसएस के साथ एक साधारण 3-कॉलम लेआउट बनाने का तरीका जानें।
09 का 01
अपना लेआउट बनाएं
आप पेपर पर या ग्राफिक्स प्रोग्राम में अपना लेआउट खींच सकते हैं। यदि आपके पास पहले से ही वायर-फ्रेम या इससे भी अधिक व्यापक डिज़ाइन है, तो साइट को बनाने वाले मूल बॉक्स में इसे सरल बनाएं। इस आलेख के साथ इस डिज़ाइन में मुख्य सामग्री क्षेत्र के साथ-साथ शीर्षलेख और पाद लेख में तीन कॉलम हैं। यदि आप बारीकी से देखते हैं, तो आप देख सकते हैं कि तीन कॉलम चौड़ाई के बराबर नहीं हैं।
आपके लेआउट को निकालने के बाद, आप आयामों के बारे में सोचना शुरू कर सकते हैं। इस उदाहरण के डिजाइन में निम्नलिखित बुनियादी आयाम होंगे:
- 900 पिक्सेल चौड़े से अधिक नहीं
- बाईं ओर 20 पीएक्स गटर
- कॉलम और पंक्तियों के बीच 10 पीएक्स
- कॉलम जो 250px, 300px, और 300px चौड़े हैं
- शीर्ष पंक्ति 150px लंबा है
- निचली पंक्ति 100px लंबा है
02 में से 02
मूल HTML / CSS लिखें और कंटेनर तत्व बनाएं
चूंकि यह पृष्ठ मान्य HTML दस्तावेज़ होगा, इसलिए एक खाली HTML कंटेनर से प्रारंभ करें
<मेटा http-equiv =" सामग्री-प्रकार "सामग्री =" टेक्स्ट / एचटीएमएल; charset = utf-8 "/> <शीर्षक> शीर्षक रहित दस्तावेज़पेज मार्जिन, सीमाओं और पैडिंग को शून्य करने के लिए मूल सीएसएस शैलियों में जोड़ें। जबकि नए दस्तावेज़ों के लिए अन्य मानक सीएसएस शैलियों हैं , इन शैलियों को न्यूनतम लेआउट प्राप्त करने के लिए न्यूनतम आवश्यक है। उन्हें अपने दस्तावेज़ के सिर में जोड़ें:
<शैली प्रकार = "पाठ / सीएसएस"> एचटीएमएल, शरीर {मार्जिन: 0 पीएक्स; पैडिंग: 0 पीएक्स; सीमा: 0 पीएक्स; }लेआउट बनाने शुरू करने के लिए, एक कंटेनर तत्व में डाल दिया। कभी-कभी ऐसा होता है कि आप बाद में कंटेनर से छुटकारा पा सकते हैं, लेकिन अधिकांश निश्चित चौड़ाई वाले लेआउट के लिए, कंटेनर तत्व होने से विभिन्न वेब ब्राउज़र में प्रबंधन करना आसान हो जाता है। तो शरीर में यह डाल दिया:
और सीएसएस स्टाइल शीट में, डाल दिया:
# कंटेनर {}03 का 03
कंटेनर शैली
कंटेनर परिभाषित करता है कि वेब पेज की सामग्री कितनी व्यापक होगी, साथ ही अंदर के बाहर के किसी भी मार्जिन और अंदर के पैडिंग को परिभाषित किया जाएगा। इस दस्तावेज़ के लिए, कंटेनर बाईं ओर 20 पिक्सेल गटर के साथ 870 पीएक्स चौड़ा है। गटर को मार्जिन शैली के साथ स्थापित किया जाता है, लेकिन कंटेनर पर पैडिंग किसी तत्व को कंटेनर के रूप में चौड़ा होने से रोकने के लिए शून्य हो जाती है।
# कंटेनर {चौड़ाई: 870 पीएक्स; मार्जिन: 0 0 0 20 पीएक्स; / * शीर्ष दाएं नीचे बाएं * / पैडिंग: 0; }यदि आप अब अपना दस्तावेज़ सहेजते हैं, तो कंटेनर देखना मुश्किल होगा क्योंकि इसमें इसमें कुछ भी नहीं है। यदि आप प्लेसहोल्डर टेक्स्ट जोड़ते हैं, तो आप कंटेनर तत्व को और अधिक स्पष्ट रूप से देख पाएंगे।
04 का 04
शीर्षलेख के लिए एक शीर्षक टैग का प्रयोग करें
आप हेडर पंक्ति को स्टाइल करने का निर्णय कैसे लेते हैं उस पर निर्भर करता है कि इसमें क्या है। यदि हेडर पंक्ति में लोगो ग्राफ़िक और हेडलाइन होने वाला है, तो एक शीर्षक टैग (
) का उपयोग करके का उपयोग करने से अधिक समझदारी होती है। आप शीर्षक को स्टाइल कर सकते हैं वैसे ही जैसे आप एक div शैली बनाते हैं, और आप अपर्याप्त टैग से बचते हैं।
हेडर पंक्ति के लिए HTML कंटेनर के शीर्ष पर जाता है और ऐसा लगता है:
मेरा शीर्षलेख पंक्ति
फिर, उस पर शैलियों को सेट करने के लिए, नीचे एक लाल सीमा जोड़ा गया था ताकि आप देख सकें कि यह कहां समाप्त होता है, मार्जिन और पैडिंग शून्य हो गई थी, चौड़ाई 100% और ऊंचाई 150px तक सेट की गई थी:
# कंटेनर एच 1 {मार्जिन: 0; पैडिंग: 0; चौड़ाई: 100%; ऊंचाई: 150 पीएक्स; बाईंओर तैरना; सीमा-तल: # सी 00 ठोस 3 पीएक्स; } इस तत्व को फ्लोट के साथ फ़्लोट करना न भूलें: बाएं; संपत्ति। सीएसएस लेआउट लिखने की कुंजी सबकुछ तैरना है - यहां तक कि चीजें जो कंटेनर के समान चौड़ाई हैं। इस तरह, आप हमेशा जानते हैं कि पृष्ठ पर तत्व कहां स्थित होंगे।
एक सीएसएस वंशज चयनकर्ता केवल H1 तत्वों के लिए शैलियों को लागू करता है जो #container तत्व के अंदर हैं।
05 में से 05
तीन कॉलम प्राप्त करने के लिए, दो कॉलम बिल्डिंग से शुरू करें
जब आप सीएसएस के साथ तीन कॉलम लेआउट बनाते हैं, तो आपको अपने लेआउट को दो समूहों में विभाजित करने की आवश्यकता होती है। तो इस तीन कॉलम लेआउट के लिए, मध्य और दाएं कॉलम और समूहबद्ध और दो कॉलम लेआउट में बाएं कॉलम के बगल में रखा गया है जहां बाएं कॉलम 250px चौड़ा है, और दायां कॉलम 610px चौड़ा है (प्रत्येक कॉलम के लिए 300 प्रत्येक , प्लस 10px उनके बीच गटर के लिए)।
एचटीएमएल इस तरह दिखता है:
पूर्ववत करने के लिए पूर्ववत करें। कम से कम विज्ञापन के लिए मुफ्त डाउनलोड करें, और अधिक पढ़ें। Voluptate quis nostrud अभ्यास eu fugiat nulla pariatur में reprehenderit में reprehenderit। इस तरह के संस्करणों के बारे में बताएं।
विज्ञापन के बारे में जानकारी के लिए, कृपया अपने आप को श्रमिकों के लिए तैयार कर सकते हैं। आप और अधिक पढ़ें Magna aliqua। Velit esse cillum dolore eu fugiat nulla pariatur।
कॉलम में प्लेसहोल्डर टेक्स्ट उन्हें परीक्षण करते समय अधिक दिखाई देता है। सीएसएस इस तरह दिखता है:
# कंटेनर # col1 {चौड़ाई: 250 पीएक्स; बाईंओर तैरना; } # कंटेनर # col2outer {चौड़ाई: 610 पीएक्स; सही नाव; मार्जिन: 0; पैडिंग: 0; } बाएं कॉलम बाईं ओर तैरता है, जबकि दूसरा दाईं ओर तैरता है। क्योंकि दोनों स्तंभों की कुल चौड़ाई 860 पीएक्स है, उनके बीच एक 10 पीएक्स गटर है।
06 का 06
वाइड दूसरे कॉलम के अंदर दो कॉलम जोड़ें
तीन कॉलम बनाने के लिए, दूसरे दूसरे कॉलम के अंदर दो divs जोड़ें, जैसे कि आपने अंतिम चरण में कंटेनर कॉलम के अंदर 2 divs जोड़े हैं। एचटीएमएल इस तरह दिखता है:
इस साइट पर क्लिक करने के लिए, आप अपने आप को श्रमिकों के लिए तैयार कर सकते हैं। आप और अधिक पढ़ें Magna aliqua। Velit esse cillum dolore eu fugiat nulla pariatur।
Nam libero tempore, quia voluptas aspernatur dicta sunt explicabo बैठो। उलम निगमों को श्रमिकों के लिए, Magnam aliquam quaerat voluptatem। Itacque earum rerum hic tenetur एक sapiente delectus, और अधिक जानकारी के लिए और अधिक काम करने के लिए और अधिक पढ़ें।
और सीएसएस इस तरह दिखता है:
# col2outer # col2mid {width: 300px; बाईंओर तैरना; } # col2outer # col2side {width: 300px; सही नाव; } चूंकि ये दो 300 पीएक्स चौड़े बक्से 610 पीएक्स चौड़े बॉक्स के अंदर हैं, फिर भी उनके बीच एक 10 पीएक्स गटर होगा।
07 का 07
पाद लेख में जोड़ें
अब बाकी पृष्ठ स्टाइल है, आप पाद लेख में जोड़ सकते हैं। "फ़ूटर" आईडी के साथ अंतिम div का उपयोग करें, और सामग्री जोड़ें ताकि आप इसे देख सकें। आप शीर्ष पर एक सीमा भी जोड़ सकते हैं, ताकि आप जान सकें कि यह कहां से शुरू होता है।
एचटीएमएल:
हेडर पंक्ति के लिए HTML कंटेनर के शीर्ष पर जाता है और ऐसा लगता है:
मेरा शीर्षलेख पंक्ति
फिर, उस पर शैलियों को सेट करने के लिए, नीचे एक लाल सीमा जोड़ा गया था ताकि आप देख सकें कि यह कहां समाप्त होता है, मार्जिन और पैडिंग शून्य हो गई थी, चौड़ाई 100% और ऊंचाई 150px तक सेट की गई थी:
# कंटेनर एच 1 {मार्जिन: 0; पैडिंग: 0; चौड़ाई: 100%; ऊंचाई: 150 पीएक्स; बाईंओर तैरना; सीमा-तल: # सी 00 ठोस 3 पीएक्स; }इस तत्व को फ्लोट के साथ फ़्लोट करना न भूलें: बाएं; संपत्ति। सीएसएस लेआउट लिखने की कुंजी सबकुछ तैरना है - यहां तक कि चीजें जो कंटेनर के समान चौड़ाई हैं। इस तरह, आप हमेशा जानते हैं कि पृष्ठ पर तत्व कहां स्थित होंगे।
एक सीएसएस वंशज चयनकर्ता केवल H1 तत्वों के लिए शैलियों को लागू करता है जो #container तत्व के अंदर हैं।
05 में से 05
तीन कॉलम प्राप्त करने के लिए, दो कॉलम बिल्डिंग से शुरू करें
जब आप सीएसएस के साथ तीन कॉलम लेआउट बनाते हैं, तो आपको अपने लेआउट को दो समूहों में विभाजित करने की आवश्यकता होती है। तो इस तीन कॉलम लेआउट के लिए, मध्य और दाएं कॉलम और समूहबद्ध और दो कॉलम लेआउट में बाएं कॉलम के बगल में रखा गया है जहां बाएं कॉलम 250px चौड़ा है, और दायां कॉलम 610px चौड़ा है (प्रत्येक कॉलम के लिए 300 प्रत्येक , प्लस 10px उनके बीच गटर के लिए)।
एचटीएमएल इस तरह दिखता है:
पूर्ववत करने के लिए पूर्ववत करें। कम से कम विज्ञापन के लिए मुफ्त डाउनलोड करें, और अधिक पढ़ें। Voluptate quis nostrud अभ्यास eu fugiat nulla pariatur में reprehenderit में reprehenderit। इस तरह के संस्करणों के बारे में बताएं।
विज्ञापन के बारे में जानकारी के लिए, कृपया अपने आप को श्रमिकों के लिए तैयार कर सकते हैं। आप और अधिक पढ़ें Magna aliqua। Velit esse cillum dolore eu fugiat nulla pariatur।
कॉलम में प्लेसहोल्डर टेक्स्ट उन्हें परीक्षण करते समय अधिक दिखाई देता है। सीएसएस इस तरह दिखता है:
# कंटेनर # col1 {चौड़ाई: 250 पीएक्स; बाईंओर तैरना; } # कंटेनर # col2outer {चौड़ाई: 610 पीएक्स; सही नाव; मार्जिन: 0; पैडिंग: 0; }बाएं कॉलम बाईं ओर तैरता है, जबकि दूसरा दाईं ओर तैरता है। क्योंकि दोनों स्तंभों की कुल चौड़ाई 860 पीएक्स है, उनके बीच एक 10 पीएक्स गटर है।
06 का 06
वाइड दूसरे कॉलम के अंदर दो कॉलम जोड़ें
तीन कॉलम बनाने के लिए, दूसरे दूसरे कॉलम के अंदर दो divs जोड़ें, जैसे कि आपने अंतिम चरण में कंटेनर कॉलम के अंदर 2 divs जोड़े हैं। एचटीएमएल इस तरह दिखता है:
इस साइट पर क्लिक करने के लिए, आप अपने आप को श्रमिकों के लिए तैयार कर सकते हैं। आप और अधिक पढ़ें Magna aliqua। Velit esse cillum dolore eu fugiat nulla pariatur।
Nam libero tempore, quia voluptas aspernatur dicta sunt explicabo बैठो। उलम निगमों को श्रमिकों के लिए, Magnam aliquam quaerat voluptatem। Itacque earum rerum hic tenetur एक sapiente delectus, और अधिक जानकारी के लिए और अधिक काम करने के लिए और अधिक पढ़ें।
और सीएसएस इस तरह दिखता है:
# col2outer # col2mid {width: 300px; बाईंओर तैरना; } # col2outer # col2side {width: 300px; सही नाव; }चूंकि ये दो 300 पीएक्स चौड़े बक्से 610 पीएक्स चौड़े बॉक्स के अंदर हैं, फिर भी उनके बीच एक 10 पीएक्स गटर होगा।
07 का 07
पाद लेख में जोड़ें
अब बाकी पृष्ठ स्टाइल है, आप पाद लेख में जोड़ सकते हैं। "फ़ूटर" आईडी के साथ अंतिम div का उपयोग करें, और सामग्री जोड़ें ताकि आप इसे देख सकें। आप शीर्ष पर एक सीमा भी जोड़ सकते हैं, ताकि आप जान सकें कि यह कहां से शुरू होता है।
एचटीएमएल: