सीएसएस लेआउट की आवश्यकता है कि आप पूरी तरह से अपनी वेबसाइट लेआउट के बारे में सोचें, और फिर टुकड़े लें और उन्हें एक साथ रखें। सीएसएस के साथ एक साधारण 3-कॉलम लेआउट बनाने का तरीका जानें।
09 का 01अपना लेआउट बनाएं
आप पेपर पर या ग्राफिक्स प्रोग्राम में अपना लेआउट खींच सकते हैं। यदि आपके पास पहले से ही वायर-फ्रेम या इससे भी अधिक व्यापक डिज़ाइन है, तो साइट को बनाने वाले मूल बॉक्स में इसे सरल बनाएं। इस आलेख के साथ इस डिज़ाइन में मुख्य सामग्री क्षेत्र के साथ-साथ शीर्षलेख और पाद लेख में तीन कॉलम हैं। यदि आप बारीकी से देखते हैं, तो आप देख सकते हैं कि तीन कॉलम चौड़ाई के बराबर नहीं हैं।
आपके लेआउट को निकालने के बाद, आप आयामों के बारे में सोचना शुरू कर सकते हैं। इस उदाहरण के डिजाइन में निम्नलिखित बुनियादी आयाम होंगे:
- 900 पिक्सेल चौड़े से अधिक नहीं
- बाईं ओर 20 पीएक्स गटर
- कॉलम और पंक्तियों के बीच 10 पीएक्स
- कॉलम जो 250px, 300px, और 300px चौड़े हैं
- शीर्ष पंक्ति 150px लंबा है
- निचली पंक्ति 100px लंबा है
मूल HTML / CSS लिखें और कंटेनर तत्व बनाएं
चूंकि यह पृष्ठ मान्य HTML दस्तावेज़ होगा, इसलिए एक खाली HTML कंटेनर से प्रारंभ करें
पेज मार्जिन, सीमाओं और पैडिंग को शून्य करने के लिए मूल सीएसएस शैलियों में जोड़ें। जबकि नए दस्तावेज़ों के लिए अन्य मानक सीएसएस शैलियों हैं, इन शैलियों को न्यूनतम लेआउट प्राप्त करने के लिए न्यूनतम आवश्यक है। उन्हें अपने दस्तावेज़ के सिर में जोड़ें:
लेआउट बनाने शुरू करने के लिए, एक कंटेनर तत्व में डाल दिया। कभी-कभी ऐसा होता है कि आप बाद में कंटेनर से छुटकारा पा सकते हैं, लेकिन अधिकांश निश्चित चौड़ाई वाले लेआउट के लिए, कंटेनर तत्व होने से विभिन्न वेब ब्राउज़र में प्रबंधन करना आसान हो जाता है। तो शरीर में यह डाल दिया: और सीएसएस स्टाइल शीट में, डाल दिया: कंटेनर परिभाषित करता है कि वेब पेज की सामग्री कितनी व्यापक होगी, साथ ही अंदर के बाहर के किसी भी मार्जिन और अंदर के पैडिंग को परिभाषित किया जाएगा। इस दस्तावेज़ के लिए, कंटेनर बाईं ओर 20 पिक्सेल गटर के साथ 870 पीएक्स चौड़ा है। गटर को मार्जिन शैली के साथ स्थापित किया जाता है, लेकिन कंटेनर पर पैडिंग किसी तत्व को कंटेनर के रूप में चौड़ा होने से रोकने के लिए शून्य हो जाती है। # कंटेनर { चौड़ाई: 870 पीएक्स; मार्जिन: 0 0 0 20 पीएक्स; / * ऊपर दाएं नीचे बाएं * / पैडिंग: 0; } यदि आप अब अपना दस्तावेज़ सहेजते हैं, तो कंटेनर देखना मुश्किल होगा क्योंकि इसमें इसमें कुछ भी नहीं है। यदि आप प्लेसहोल्डर टेक्स्ट जोड़ते हैं, तो आप कंटेनर तत्व को और अधिक स्पष्ट रूप से देख पाएंगे। आप हेडर पंक्ति को स्टाइल करने का निर्णय कैसे लेते हैं उसमें बहुत कुछ निर्भर करता है। यदि हेडर पंक्ति में लोगो ग्राफ़िक और शीर्षक होना है, तो एक शीर्षक टैग का उपयोग करना ( हेडर पंक्ति के लिए HTML कंटेनर के शीर्ष पर जाता है और ऐसा लगता है: फिर, उस पर शैलियों को सेट करने के लिए, नीचे एक लाल सीमा जोड़ा गया था ताकि आप देख सकें कि यह कहां समाप्त होता है, मार्जिन और पैडिंग शून्य हो गई थी, चौड़ाई 100% और ऊंचाई 150px तक सेट की गई थी: # कंटेनर एच 1 { मार्जिन: 0; पैडिंग: 0; चौड़ाई: 100%; ऊंचाई: 150 पीएक्स; बाईंओर तैरना; सीमा-तल: # सी 00 ठोस 3 पीएक्स; } इस तत्व को फ्लोट के साथ फ़्लोट करना न भूलें: बाएं; संपत्ति। सीएसएस लेआउट लिखने की कुंजी सबकुछ तैरना है - यहां तक कि चीजें जो कंटेनर के समान चौड़ाई हैं। इस तरह, आप हमेशा जानते हैं कि पृष्ठ पर तत्व कहां स्थित होंगे। एक सीएसएस वंशज चयनकर्ता केवल H1 तत्वों के लिए शैलियों को लागू करता है जो #container तत्व के अंदर हैं। जब आप सीएसएस के साथ तीन कॉलम लेआउट बनाते हैं, तो आपको अपने लेआउट को दो समूहों में विभाजित करने की आवश्यकता होती है। तो इस तीन कॉलम लेआउट के लिए, मध्य और दाएं कॉलम और समूहबद्ध और दो कॉलम लेआउट में बाएं कॉलम के बगल में रखा गया है जहां बाएं कॉलम 250px चौड़ा है, और दायां कॉलम 610px चौड़ा है (प्रत्येक कॉलम के लिए 300 प्रत्येक , प्लस 10px उनके बीच गटर के लिए)। एचटीएमएल इस तरह दिखता है: पूर्व और कमोडो परिणाम के रूप में। कम से कम विज्ञापन के लिए मुफ्त डाउनलोड करें, और अधिक पढ़ें। Voluptate quis nostrud अभ्यास eu fugiat nulla pariatur में reprehenderit में reprehenderit। Velit esse cillum dolore ullamco laboris nisi ut exiquip ex ea commodo परिणाम। इस साइट पर क्लिक करने के लिए, मैं अपने आप को श्रमिकों के लिए तैयार कर सकता हूं। आप और अधिक पढ़ें Magna aliqua। Velit esse cillum dolore eu fugiat nulla pariatur। कॉलम में प्लेसहोल्डर टेक्स्ट उन्हें परीक्षण करते समय अधिक दिखाई देता है। सीएसएस इस तरह दिखता है: #container # col1 { चौड़ाई: 250 पीएक्स; बाईंओर तैरना; } # कंटेनर # col2outer { चौड़ाई: 610 पीएक्स; सही नाव; मार्जिन: 0; पैडिंग: 0; } बाएं कॉलम बाईं ओर तैरता है, जबकि दूसरा दाईं ओर तैरता है। क्योंकि दोनों स्तंभों की कुल चौड़ाई 860 पीएक्स है, उनके बीच एक 10 पीएक्स गटर है। तीन कॉलम बनाने के लिए, दूसरे दूसरे कॉलम के अंदर दो 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। Itaque earum rerum hic tenetur एक sapiente delectus, और अधिक जानकारी के लिए और अधिक काम करने के लिए और अधिक पढ़ें। और सीएसएस इस तरह दिखता है: # col2outer # col2mid { चौड़ाई: 300 पीएक्स; बाईंओर तैरना; } # col2outer # col2side { चौड़ाई: 300 पीएक्स; सही नाव; } चूंकि ये दो 300 पीएक्स चौड़े बक्से 610 पीएक्स चौड़े बॉक्स के अंदर हैं, फिर भी उनके बीच एक 10 पीएक्स गटर होगा। अब बाकी पृष्ठ स्टाइल है, आप पाद लेख में जोड़ सकते हैं। "फ़ूटर" आईडी के साथ अंतिम div का उपयोग करें, और सामग्री जोड़ें ताकि आप इसे देख सकें। आप शीर्ष पर एक सीमा भी जोड़ सकते हैं, ताकि आप जान सकें कि यह कहां से शुरू होता है। एचटीएमएल: सीएसएस: # कंटेनर #footer {
बाईंओर तैरना;
चौड़ाई: 870 पीएक्स;
सीमा-शीर्ष: # सी 00 ठोस 3 पीएक्स;
} 08 का 08 अब जब आपके पास लेआउट समाप्त हो गया है, तो आप अपनी व्यक्तिगत शैलियों और सामग्री को जोड़ना शुरू कर सकते हैं। याद रखें कि हेडर और पाद लेख की सीमाएं विशेष रूप से डिज़ाइन के लिए लेआउट अनुभाग दिखाने के लिए जोड़े गए थे। यहां संपूर्ण दस्तावेज़, एचटीएमएल और सीएसएस है: कंटेनर शैली
शीर्षलेख के लिए एक शीर्षक टैग का प्रयोग करें
) एक का उपयोग करने से ज्यादा समझ में आता है
मेरा हैडर पंक्ति
तीन कॉलम प्राप्त करने के लिए, दो कॉलम बिल्डिंग से शुरू करें
वाइड दूसरे कॉलम के अंदर दो कॉलम जोड़ें
पाद लेख में जोड़ें
अपनी व्यक्तिगत शैलियों और सामग्री में जोड़ें
अंतिम एचटीएमएल / सीएसएस
