वेबसाइट लेआउट दो मुख्य तरीकों का उपयोग करके किया जाता है: सारणीबद्ध और ब्लॉक डिवलेआउट सीएसएस के उपयोग के कारण ब्लॉक लेआउट अधिक कार्यात्मक है और अधिक सुविधाएँ प्रदान करता है।
ब्लॉक कैसे काम करता है?
इस प्रकार के लेआउट को निष्पादित करने के लिए, दो फ़ाइलों का उपयोग किया जाता है ( Index.html और style.css) कोड युक्त एचटीएमएलऔर तदनुसार वेबसाइट स्टाइलिंग।
पहली फ़ाइल में वे सीधे लिखे गए हैं डिव-कंटेनर, जो लेआउट के लिए एक प्रकार की नींव हैं, और दूसरा हमारी शैली की विशेषताओं और स्थिति का वर्णन करता है डिव-कंटेनर.
वास्तविक समय में किए गए हेरफेर के परिणाम देखने के लिए, आपको अपने ब्राउज़र के एड्रेस बार में प्रवेश करना होगा: http://URL/परीक्षण.
लेआउट की मूल बातें
हम जिस दो-स्तंभ वाले लेआउट को बनाने का प्रयास करेंगे, उसका आरेख इस प्रकार बनाया जा सकता है:
संपूर्ण लेआउट के लिए पैरामीटर सेट करने में सक्षम होने के लिए हमारे लेआउट के सभी तत्वों को एक सामान्य तत्व में रखा जाना चाहिए। साझा कंटेनर की सामग्री होगी डिव-s जो अलग-अलग ब्लॉक बनाते हैं। का उपयोग करके सीएसएसहम निम्नलिखित मापदंडों को अनुकूलित कर सकते हैं: आकार, पृष्ठ पर स्थिति, शैलियाँ और रंग।
वेबसाइट लेआउट को ब्लॉक करें
प्रत्येक लेआउट तत्व को टैग का उपयोग करके एक अलग "कंटेनर" में रखा जाना चाहिए डिव. फाइल मैं सीएसएसआपको तत्वों की उपस्थिति और स्थान (चौड़ाई, ऊंचाई, फ़ॉन्ट, आकार, और इसी तरह) के मापदंडों को परिभाषित करते हुए, तत्व गुणों को जोड़ने की आवश्यकता है।
भ्रमित न होने के लिए, आपको प्रत्येक कंटेनर में इस ब्लॉक का नाम दर्ज करना होगा, यह कुछ इस तरह दिखेगा:
"http://www.w3.org/TR/html4/loose.dtd">ब्लॉक लेआउट - 2 लें एक टोपीबायां स्तंभपृष्ठ सामग्री
जोड़तोड़ पूरा करने के बाद, आपको फ़ाइल खोलनी होगी स्टाइल.सीएसएसऔर इन कंटेनरों की शैलियों का वर्णन करें। सबसे पहले, मुख्य टैग के लिए शैलियों का वर्णन करना आवश्यक है बॉडी और HTML, क्रॉस-ब्राउज़र संगतता सुनिश्चित करने के लिए पृष्ठ मार्जिन को शून्य करना:
बॉडी, एचटीएमएल (
मार्जिन:0px;
पैडिंग:0px;
}
बॉडी, एचटीएमएल (
मार्जिन:0px;
पैडिंग:0px;
}
#मेकेट (
चौड़ाई:800px;
मार्जिन:0 ऑटो;
}
#हेडर(
पृष्ठभूमि-रंग:#C0C000;
}
#बाएं(
पृष्ठभूमि-रंग:#00C0C0;
चौड़ाई:200px;
नाव छोड़ी;
}
#सामग्री(
पृष्ठभूमि-रंग:#8080एफएफ;
मार्जिन-बाएँ:202px;
}
#फुटर(
पृष्ठभूमि-रंग:#FFC0FF;
}
किसी वेबसाइट को डिज़ाइन करने के तरीके के आधार पर अधिक विस्तृत मास्टर क्लास प्राप्त करने के लिए डिव, आप निम्नलिखित वीडियो देख सकते हैं:
https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI
पाठ का उद्देश्य:ब्लॉक-आधारित सीएसएस लेआउट का परिचय। ब्लॉक-आधारित वेबसाइट लेआउट का उपयोग करने में कौशल प्राप्त करना
- परतों या, दूसरे शब्दों में, ब्लॉक और डिव तत्वों के साथ काम करते समय, मुख्य बोझ सीएसएस पर पड़ता है, क्योंकि गुणों के बिना, परतें व्यावहारिक रूप से कुछ भी नहीं हैं।
- दुर्भाग्य से, ब्लॉक के साथ काम करते समय क्रॉस-ब्राउज़र संगतता में अभी भी समस्या है। वे। समान गुण अलग-अलग ब्राउज़र में अलग-अलग परिणाम देते हैं। ऐसी समस्याओं से निपटने के लिए तथाकथित हैक मौजूद हैं। किराये का- यह तकनीकों का एक सेट है जब अलग-अलग ब्राउज़रों को कोड प्रदान किया जाता है जिसे केवल इस ब्राउज़र द्वारा समझा जाता है और दूसरों द्वारा अनदेखा किया जाता है।
टेबल लेआउट से विशिष्ट विशेषताएं
मान लीजिए कि आपको हेडर, फ़ूटर और दो कॉलम के साथ एक पेज टेम्पलेट बनाने की आवश्यकता है।
अंतर:
निश्चित डिज़ाइन या
कठोर ब्लॉक लेआउट (दो कॉलम)
- निश्चित लेआउट में दी गई चौड़ाई की परतों का उपयोग करना शामिल है, जो उपयोगकर्ता के मॉनिटर के रिज़ॉल्यूशन द्वारा निर्धारित किया जाता है।
- चूंकि नेटवर्क उपयोगकर्ताओं के बीच सबसे लोकप्रिय मॉनिटर रिज़ॉल्यूशन 1024×768 है, इसलिए इस पर ध्यान केंद्रित करने की सलाह दी जाती है। इस मामले में ब्लॉक की कुल चौड़ाई 900-1000 पिक्सेल है (स्क्रॉल बार और ब्राउज़र विंडो बॉर्डर के लिए पिक्सेल का एक छोटा सा हिस्सा आवश्यक है)।
- सामग्री वाला मुख्य ब्लॉक केंद्र में रखा गया है, तो किनारों के आसपास "मुक्त" मार्जिन उच्च मॉनिटर रिज़ॉल्यूशन के साथ भी अच्छा दिखता है।
चित्र .1। निश्चित डिज़ाइन उदाहरण
उदाहरण:उपरोक्त छवि के आधार पर एक निश्चित वेबसाइट डिज़ाइन बनाएं
प्रदर्शन:
- हम पृष्ठ के सभी मुख्य तत्वों को निम्नानुसार ब्लॉक में "विभाजित" करते हैं:
- ब्लॉक 1- परत एक (आईडी = "शापका"),
- ब्लॉक 2 और 3एक ही ब्लॉक (id='कंटेनर') में समाहित हैं,
- ब्लॉक 2- मेनू के साथ परत (आईडी = "मेनू"),
- ब्लॉक 3- सामग्री के साथ परत (आईडी = "सामग्री"),
- ब्लॉक 4- आईडी = "नीचे" के साथ परत।
आइए हम ब्लॉकों की व्यवस्था को योजनाबद्ध रूप से चित्रित करें: 
| <शरीर > <डिव आईडी = "शापका" > 1</div> <div आईडी = "कंटेनर" > <डिव आईडी = "मेनू" > 2</div> <div आईडी = "सामग्री" > 3</div> </div> <div आईडी = "नीचे" > 4</div> </शरीर> |
1. "हेडर" के गुण सेट करें (ब्लॉक 1)
- हम परतों की कुल चौड़ाई "आंख से" चुनते हैं - 750 पिक्सेल।
- या इंडेंटेशन का उपयोग करके ऊंचाई निर्धारित करें
- कंटेनर की चौड़ाई निर्धारित करें: यह 750px + 20px (कुल लेआउट चौड़ाई + कुल लेआउट चौड़ाई में पैडिंग) होनी चाहिए। वे। कंटेनर में कोई पैडिंग नहीं है, इसलिए इसकी चौड़ाई बाईं ओर 10 पिक्सेल और दाईं ओर 10 पिक्सेल बढ़ाएँ
- यदि लेआउट को स्क्रीन के बाईं ओर फिट करने की आवश्यकता है, तो ब्राउज़र स्वचालित रूप से ऐसा करेगा। हमारे मामले में, हम कंटेनर ब्लॉक को केन्द्रित करेंगे
- 200 पिक्सेल की चौड़ाई के साथ परत संख्या 2 (चौड़ाई)
- उसी परत (मेनू) के लिए हम निकटवर्ती ब्लॉक के चारों ओर प्रवाह निर्धारित करते हैं, अर्थात। संपत्ति फ्लोट: बाएँ
- हम आंतरिक मार्जिन सेट करते हैं ताकि टेक्स्ट परत के किनारे पर "चिपक" न जाए (पैडिंग प्रॉपर्टी)
- टेक्स्ट और पृष्ठभूमि का रंग सेट करें (पृष्ठभूमि, रंग)
- परत की चौड़ाई 770px - 200px = 570px की दर से सेट करें, लेकिन!चूंकि हम दोनों ब्लॉक 2 और 3 में पैडिंग सेट करते हैं, इसलिए हमें अन्य 40 पिक्सेल घटाना होगा: मेनू ब्लॉक की पैडिंग के लिए 20 और सामग्री ब्लॉक की पैडिंग के लिए 20। आइए परत की चौड़ाई 770px - 200px - 40px = 530px प्राप्त करें
- हमने इंटरनेट एक्सप्लोरर ब्राउज़र में एक बग को छोड़कर, रैपिंग को फ्लोट: लेफ्ट पर सेट किया है: यदि आप प्रॉपर्टी सेट नहीं करते हैं, तो परतों के बीच एक अंतर होगा। इसके अलावा, यदि आप इस प्रॉपर्टी को सेट नहीं करते हैं, तो ब्लॉक मेनू ब्लॉक के पीछे दिखाई देगा, और केवल इसकी सामग्री (पाठ) मेनू ब्लॉक के चारों ओर दाईं ओर प्रवाहित होगी।
- पृष्ठभूमि का रंग (पृष्ठभूमि) और आंतरिक मार्जिन (पैडिंग) सेट करें
- परत की चौड़ाई 750 पिक्सेल पर सेट करें
- इस ब्लॉक के लिए, आपको रैपिंग को हटाना होगा, यानी। स्पष्ट संपत्ति सेट करें
- आंतरिक पैडिंग मार्जिन सेट करना
- पृष्ठभूमि (पृष्ठभूमि) और पाठ (रंग) के लिए रंग सेट करें
- ब्लॉक को केंद्र में रखें (मार्जिन-दाएं और मार्जिन-बाएं)
मार्जिन-दाएं: ऑटो; मार्जिन-बाएं: ऑटो;
उदाहरण के लिए:
| पैडिंग-टॉप: 15px; पैडिंग-बॉटम: 15px; |
पैडिंग-टॉप: 15px; पैडिंग-बॉटम: 15px;
हेडर के लिए सभी कोड:
#शापका (पाठ-संरेखण: बाएं; / * आंतरिक सामग्री को बाईं ओर संरेखित करें */ चौड़ाई: 750px; /* ब्लॉक चौड़ाई और कुल चौड़ाई */ पृष्ठभूमि: #900000; /* पृष्ठभूमि रंग */ ऊंचाई: 50px; /* ऊंचाई ब्लॉक */ मार्जिन-राइट: ऑटो; /* ऑटो-इंडेंट राइट */ मार्जिन-लेफ्ट: ऑटो; /* ऑटो-इंडेंट लेफ्ट */ पैडिंग: 10px)
2. कंटेनर गुण बनाएं
#कंटेनर (चौड़ाई: 770पीएक्स; /* परत की चौड़ाई या (लेआउट चौड़ाई+20) */ मार्जिन-दाएं: ऑटो; /* ऑटो-इंडेंट दाएं */ मार्जिन-बाएं: ऑटो; /* ऑटो-इंडेंट बाएं */ )
3. ब्लॉक 2 के लिए गुण बनाएं - मेनू
#मेनू (चौड़ाई: 200px; /* परत की चौड़ाई */ फ्लोट: बाएँ; रंग: सफ़ेद; /* टेक्स्ट का रंग */ पृष्ठभूमि: #008080; /* पृष्ठभूमि का रंग */ पैडिंग: 10px; /* सामग्री के चारों ओर आंतरिक मार्जिन */ )
4. ब्लॉक 3 - सामग्री के लिए गुण बनाएं
#सामग्री ( /* दायां कॉलम */ चौड़ाई: 550px; /* परत की चौड़ाई */ फ्लोट: बायां; /* आसन्न परत के साथ लपेटें */ पैडिंग: 10px; /* सामग्री के चारों ओर आंतरिक मार्जिन */ पृष्ठभूमि: #e0e0e0; /* पृष्ठभूमि का रंग */ )
5. ब्लॉक 4 के लिए संपत्तियां बनाएं - "तहखाने"
#बॉटम (चौड़ाई:750px; /* परत की चौड़ाई */ साफ़:बाएं; /* ब्लॉकिंग लौटाएं और परत को बाईं ओर रखें */ पैडिंग: 10px; /* सामग्री के चारों ओर आंतरिक मार्जिन */ पृष्ठभूमि:#444; /* पृष्ठभूमि */ रंग :#fff; /* पाठ का रंग */ मार्जिन-दाएं: ऑटो; /* ऑटो-इंडेंट दाएं */ मार्जिन-बाएं: ऑटो /* ऑटो-इंडेंट बाएं */ )
अंतिम कोड: सभी एक साथ
| <शैली प्रकार = "टेक्स्ट/सीएसएस" > |
परिणाम:
अंक 2। दो स्तंभों वाला कठोर ब्लॉक लेआउट
तीन स्तंभों के लिए निश्चित डिज़ाइन
तीन-स्तंभ लेआउट के लिए एक निश्चित डिज़ाइन के साथ, मॉड्यूलर ग्रिड के निर्माण के लिए दो मुख्य दृष्टिकोण हैं:
- स्तंभों को एक साथ रखने के लिए संपत्ति का उपयोग करना।
- उन सीएसएस गुणों के एक सेट का उपयोग करना जो परतों की स्थिति के लिए अभिप्रेत हैं।
आइए पहले मामले पर विचार करें।
तीन-कॉलम लेआउट के लिए फ्लोट प्रॉपर्टी का उपयोग करना
पर चावल। 3- तीन-स्तंभ लेआउट के लिए संपत्ति का उपयोग करने का परिणाम। वास्तव में, 6 परतों का उपयोग किया जाता है - कॉलम हेडर के लिए अलग से और कॉलम के लिए अलग से।
चावल। 3. निश्चित तीन कॉलम डिज़ाइन
उदाहरण:दिखाए गए तीन-कॉलम लेआउट के साथ एक वेब पेज बनाएं चावल। 3. निश्चित ब्लॉक लेआउट तकनीकों का उपयोग करें
प्रदर्शन:
- आइए हेडर के लिए तीन परतें (#header...) और कॉलम (#col...) के लिए तीन परतें परिभाषित करें।
- चूंकि कॉलम और उनके हेडर दो अलग-अलग लाइनों पर स्थित हैं, हम उन्हें कंटेनर (वर्ग = "कंटेनर") में जोड़ देंगे।
- हमें ब्लॉकों की व्यवस्था का एक योजनाबद्ध प्रतिनिधित्व मिलता है:
हमें निम्नलिखित HTML संरचना मिलती है:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <शरीर > <div वर्ग = "कंटेनर" > <डिव आईडी = "हेडर1" >एवगेनी येव्तुशेंको</div> <डिव आईडी = "हेडर2" >वालेरी ब्रायसोव</div> <डिव आईडी = "हेडर3" >एडुआर्ड असदोव</div> </div> <div वर्ग = "कंटेनर" > <डिव आईडी = "col1" >मैं एक पुराने दोस्त के बारे में सपना देखता हूं<ब्र/>जो दुश्मन बन गया<ब्र/>लेकिन मैं किसी दुश्मन का सपना नहीं देखता,<ब्र/>लेकिन उसी दोस्त द्वारा.<ब्र/>वह मेरे साथ नहीं है<ब्र/>लेकिन अब वह चारों ओर है<ब्र/>और सिर चला जाता है<ब्र/>चारों ओर के सपनों से.</div> <डिव आईडी = "col2" >महान निकट मायावी है,<ब्र/>केवल दूर से ही यह गंभीर है,<ब्र/><ब्र/> </div> <डिव आईडी = "col3" ><ब्र/><ब्र/><ब्र/> </div> </div> </शरीर> |
जो दुश्मन बन गया
लेकिन मैं किसी दुश्मन का सपना नहीं देखता,
लेकिन उसी दोस्त द्वारा.
वह मेरे साथ नहीं है
लेकिन अब वह चारों ओर है
और सिर चला जाता है
चारों ओर के सपनों से.
केवल दूर से ही यह गंभीर है,
हम सब महान के सामने से गुजरते हैं
और हम केवल एक यादृच्छिक लिंक देखते हैं।
समस्या के प्रति अभी भी एक दृष्टिकोण है:
इच्छा अनेक संभावनाओं का नाम है,
और अनिच्छा के कई कारण हैं.
2. हेडर (हेडर... चयनकर्ता) और कॉलम (कॉल... चयनकर्ता) के लिए शैलियाँ जोड़ना
- हम कॉलम और शीर्षकों की चौड़ाई सभी के लिए समान कर देंगे। चूँकि 3 कॉलम हैं, और औसत पेज की चौड़ाई लगभग 700-900 पिक्सेल होनी चाहिए, हम कॉलम की चौड़ाई 250 पिक्सेल पर सेट करेंगे।
- आइए कॉलम के बीच जगह प्रदान करने के लिए आंतरिक मार्जिन (पाठ सामग्री से इंडेंट) - पैडिंग और बाहरी इंडेंट जोड़ें। चूँकि गुण सभी स्तंभों के लिए एक ही बार में सेट किए गए हैं, और संपूर्ण लेआउट स्वयं केंद्रित नहीं है, बल्कि बाईं ओर संरेखित है, हम एक ही समय में सभी स्तंभों के लिए केवल एक तरफ - बाईं ओर - इंडेंटेशन सेट करेंगे (मार्जिन-बाएं) ).
- हम शीर्ष पर एक बाहरी मार्जिन भी जोड़ेंगे, जिससे शीर्षकों और स्तंभों के बीच एक ऊर्ध्वाधर अंतर सुनिश्चित होगा, साथ ही पृष्ठ के शीर्ष (मार्जिन-टॉप) से शीर्षकों के लिए एक मार्जिन भी होगा।
- ब्लॉक के लिए बॉर्डर जोड़ें और फ़ॉन्ट पैरामीटर (फ़ॉन्ट-परिवार, फ़ॉन्ट-वजन, फ़ॉन्ट-आकार, रंग) सेट करें।
- आइए प्रत्येक चयनकर्ता के लिए अलग से पृष्ठभूमि सेट करें।
#हेडर1, #हेडर2, #हेडर3, #कॉल1, #कॉल2, #कॉल3 (चौड़ाई: 250px; /* कॉलम चौड़ाई */)
#header1, #header2, #header3, #col1, #col2, #col3 (चौड़ाई: 250px; /* कॉलम चौड़ाई */ पैडिंग: 5px; /* टेक्स्ट के चारों ओर मार्जिन */ मार्जिन-लेफ्ट: 5px; /* लेफ्ट मार्जिन * / )
#हेडर1, #हेडर2, #हेडर3, #कॉल1, #कॉल2, #कॉल3 (...फ्लोट: बाएँ;)
#हेडर1, #हेडर2, #हेडर3, #कॉल1, #कॉल2, #कॉल3 (... बॉर्डर: 1px ठोस काला; /* परत के चारों ओर बॉर्डर */ फ़ॉन्ट-परिवार: वर्दाना, एरियल, सैन्स-सेरिफ़; /* नहीं सेरिफ़ या कटा हुआ फ़ॉन्ट */ फ़ॉन्ट-वजन: बोल्ड; 80%; /* फ़ॉन्ट आकार */ रंग: सफेद /* शीर्षक पाठ का रंग */)
हमें कोड मिलता है:
| #header1 , #header2 , #header3 , #col1 , #col2 , #col3 (चौड़ाई: 250px ; /* स्तंभ की चौड़ाई */पैडिंग: 5px; /*पाठ के चारों ओर हाशिये*/ /* शीर्ष पैडिंग*/नाव छोड़ी; /*स्तंभों को क्षैतिज रूप से जोड़ें*/ /* परत के चारों ओर बॉर्डर */ /* गैर-धारावाहिक या बिना सेरिफ़ फ़ॉन्ट */फोंट की मोटाई: बोल्ड; /* बोल्ड शीर्षक पाठ */फ़ॉन्ट-आकार: 80%; /* फ़ॉन्ट आकार */रंग सफेद ; /* शीर्षक पाठ का रंग */ } |
#header1, #header2, #header3, #col1, #col2, #col3 (चौड़ाई: 250px; /* कॉलम चौड़ाई */ पैडिंग: 5px; /* टेक्स्ट के चारों ओर मार्जिन */ मार्जिन-लेफ्ट: 5px; /* लेफ्ट मार्जिन * / मार्जिन-शीर्ष: 2px; /* शीर्ष मार्जिन */ फ्लोट: बाएँ; /* स्तंभों को क्षैतिज रूप से जोड़ना */ सीमा: 1px ठोस काला /* परत के चारों ओर फ्रेम */ फ़ॉन्ट-परिवार: वर्दाना, एरियल, सेन्स-सेरिफ़; /* कोई सेरिफ़ या सेन्स सेरिफ़ फ़ॉन्ट नहीं */ फ़ॉन्ट-वजन: बोल्ड; /* बोल्ड शीर्षक टेक्स्ट */ फ़ॉन्ट-आकार: 80%; /* फ़ॉन्ट आकार */ रंग: सफेद /* शीर्षक टेक्स्ट रंग */)
| #हेडर1 (पृष्ठभूमि: #बी38541; ) #हेडर2 (पृष्ठभूमि: #008159; ) #हेडर3 (पृष्ठभूमि: #006077; ) #कॉल1 (पृष्ठभूमि: #ईबीई0सी5; ) #कॉल2 (पृष्ठभूमि: #बीबीई1सी4; ) #कॉल3 (पृष्ठभूमि: #ADD0D9 ) |
#हेडर1 (पृष्ठभूमि: #बी38541; ) #हेडर2 (पृष्ठभूमि: #008159; ) #हेडर3 (पृष्ठभूमि: #006077; ) #कॉल1 (पृष्ठभूमि: #ईबीई0सी5; ) #कॉल2 (पृष्ठभूमि: #बीबीई1सी4; ) #कॉल3 (पृष्ठभूमि: #ADD0D9;
आइए मध्यवर्ती परिणाम देखें:
चावल। 4. इंटरमीडिएट का रिजल्ट
3. कंटेनरों के लिए शैली निर्धारित करना
- अब आपको हेडर और कॉलम को अलग-अलग कंटेनर परतों में संयोजित करने और उन्हें उचित शैली सेट करने की आवश्यकता है - रैपिंग रद्द करें (स्पष्ट करें)
- अब केवल कॉलम में टेक्स्ट फ़ॉन्ट को उसके आकार, शैली और रंग को बदलकर संशोधित करना बाकी है।
| .कंटेनर (स्पष्ट: दोनों; /* फ्लोट रैपिंग रद्द करता है */ } |
कंटेनर (स्पष्ट: दोनों; /* फ्लोट रैपिंग रद्द करता है */)
#col1, #col2, #col3 (फ़ॉन्ट-फ़ैमिली: "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़; /* सेरिफ़ या सेरिफ़ फ़ॉन्ट */ फ़ॉन्ट-आकार: 100%; /* फ़ॉन्ट आकार */ फ़ॉन्ट-वजन: सामान्य; /* सामान्य शैली */ रंग: काला /* पाठ का रंग */ )
अंतिम कोड: सभी एक साथ
| <शैली प्रकार = "टेक्स्ट/सीएसएस" > |
जो दुश्मन बन गया
लेकिन मैं किसी दुश्मन का सपना नहीं देखता,
लेकिन उसी दोस्त द्वारा.
वह मेरे साथ नहीं है
लेकिन अब वह चारों ओर है
और सिर चला जाता है
चारों ओर के सपनों से.
केवल दूर से ही यह गंभीर है,
हम सब महान के सामने से गुजरते हैं
और हम केवल एक यादृच्छिक लिंक देखते हैं।
समस्या के प्रति अभी भी एक दृष्टिकोण है:
इच्छा अनेक संभावनाओं का नाम है,
और अनिच्छा के कई कारण हैं.
परिणाम:
चावल। 5. परिणाम
तीन-स्तंभ लेआउट के लिए परत स्थिति का उपयोग करना
आइए एक उदाहरण के रूप में एक लेआउट लें जिसमें एक विभाजन रेखा द्वारा सीमांकित तीन स्तंभ हों (चित्र 6)।
चावल। 6. विभाजक के साथ तीन-स्तंभ लेआउट के लिए परतों की स्थिति निर्धारण
उदाहरण:एक विभाजन रेखा के साथ तीन-स्तंभ लेआउट के साथ एक वेब पेज बनाएं, जैसा कि इसमें दिखाया गया है चावल। 6. परत स्थिति निर्धारण के साथ निश्चित लेआउट तकनीकों का उपयोग करें
प्रदर्शन:
1. HTML कोड संरचना बनाना
- इस लेआउट के लिए, प्रत्येक कॉलम के लिए divs की तीन परतें बनाना पर्याप्त है।
इसलिए संरचना सरल होगी:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <शरीर> <डिव पहचान= "col1"> इवान बुनिन </ बीआर></ बीआर> </ बीआर> </ बीआर> </ बीआर> </ डिव> <डिव पहचान= "col2"> </ बीआर> खिड़की सुनहरी चमकती है. </ बीआर> </ बीआर> सब कुछ सफेद बर्फ से ढका हुआ है। </ डिव> <डिव पहचान= "col3"> और सभी सुबहें उज्ज्वल और स्वच्छ होती हैं </ बीआर> </ बीआर> </ बीआर> मेरी खिड़की पर गुलदाउदी। </ बीआर></ बीआर> 1903 </ डिव> </ शरीर> |
2. स्तंभों के लिए शैलियाँ जोड़ना
- आइए स्तंभों की समान चौड़ाई (चौड़ाई) और आंतरिक मार्जिन को लंबवत और क्षैतिज रूप से (पैडिंग) सेट करें।
- परतों की रुकावट को दूर करने के लिए, अर्थात्। उन्हें क्षैतिज रूप से एक साथ रखने के लिए, आपको सीएसएस फ्लोट प्रॉपर्टी सेट करने की आवश्यकता है।
- चूँकि विभाजक सीमा केवल परतों के अंदरूनी किनारों पर मौजूद होनी चाहिए, एक फ्रेम को केवल एक तरफ (सीमा) पर दो परतों में जोड़ने की आवश्यकता होती है।
#col1, #col2, #col3 (चौड़ाई: 250px; /* कॉलम चौड़ाई */ पैडिंग: 0 6px;)
| #col1, #col2, #col3 { चौड़ाई: 250px; /* स्तंभ की चौड़ाई */ गद्दी: 0 6px; /* लंबवत और क्षैतिज रूप से हाशिये */ तैरना: बाएं; /*परतें लपेटें*/ } |
#col1, #col2, #col3 (चौड़ाई: 250px; /* कॉलम चौड़ाई */ पैडिंग: 0 6px; /* लंबवत और क्षैतिज मार्जिन */ फ्लोट: बाएं; /* लेयर रैपिंग */ )
| #col1, #col2 { बॉर्डर-दायां: 1px ठोस #000 ; /* लंबवत और क्षैतिज रूप से हाशिये */ तैरना: बाएं; /*परतें लपेटें*/ } #col1, #col2 { बॉर्डर-दायां: 1px ठोस #000 ; /* पाठ के दाईं ओर पंक्ति पैरामीटर */ } |
#col1, #col2, #col3 (चौड़ाई: 250px; /* कॉलम चौड़ाई */ पैडिंग: 0 6px; /* लंबवत और क्षैतिज मार्जिन */ फ्लोट: बाएं; /* लेयर रैपिंग */ ) #col1, #col2 ( बॉर्डर -दाएँ: 1px ठोस #000 /* पाठ के दाईं ओर पंक्ति विकल्प */ )
| </ शैली> </ सिर> <शरीर> <डिव पहचान= "col1"> इवान बुनिन </ बीआर></ बीआर> खिड़की पर ठंढ के साथ चांदी, </ बीआर> रात के समय गुलदाउदी खिल गई। </ बीआर> ऊपरी खिड़कियों में - आकाश चमकीला नीला है </ बीआर> और बर्फ की धूल में फंस गया। </ डिव> <डिव पहचान= "col2"> सूरज उगता है, ठंड से प्रसन्न होकर, </ बीआर> खिड़की सुनहरी चमकती है. </ बीआर> सुबह शांत, आनंदमय और युवा होती है। </ बीआर> सब कुछ सफेद बर्फ से ढका हुआ है। </ डिव> <डिव पहचान= "col3"> और सभी सुबहें उज्ज्वल और स्वच्छ होती हैं </ बीआर> मैं ऊपर रंग देखूंगा, </ बीआर> और दोपहर तक वे चाँदी के हो जायेंगे </ बीआर> मेरी खिड़की पर गुलदाउदी। </ बीआर></ बीआर> 1903 </ डिव> </ शरीर> |
तीन कॉलम डिजाइन तैयार है!
नमस्कार दोस्तों!
हम लेआउट का अध्ययन करना जारी रखते हैं और आज हम सबसे दिलचस्प भाग की ओर बढ़ रहे हैं।
निश्चित रूप से आप इस अवधारणा को पहले ही सुन चुके हैं "ब्लॉक लेआउट". लेकिन एक अज्ञानी व्यक्ति के लिए इस अवधारणा का कोई मतलब नहीं है। इसलिए: कौन जानता है - शाबाश! जो नहीं जानते, वे और ध्यान से पढ़ें।
ब्लॉक लेआउट यूनिवर्सल कंटेनर टैग का उपयोग करके एक वेब पेज कोड का लेआउट है
मैंने लेख "" में इसके बारे में थोड़ा लिखा है। यहां हम अधिक विस्तार से और विशेष रूप से बात करेंगे।
1. लेआउट को ब्लॉक क्यों करें?
एक समय की बात है, प्राचीन काल में, हमारे दूर के पूर्वजों ने तालिकाओं का उपयोग करके वेबसाइटें बनाईं। सभी पृष्ठ तत्व अलग-अलग कक्षों में स्थित थे, कक्षों को अन्य, बड़े कक्षों में क्लस्टर किया गया था, और वे, बदले में, सबसे महत्वपूर्ण कक्ष - साइट पृष्ठ में ही स्थित थे।
यह बहुत असुविधाजनक था क्योंकि कोड बहुत अधिक भरा हुआ था और इसे समझना मुश्किल था, क्योंकि प्रत्येक सेल का वर्णन करने के लिए कई टैग का उपयोग करना पड़ता था।
आजकल, लगभग कोई भी टेबल लेआउट का उपयोग नहीं करता है, हालाँकि कुछ पृष्ठ तत्व तालिकाओं का उपयोग करके बनाए जाते हैं।
आइए पुरानी बातें न लाएँ। आइए ब्लॉक लेआउट पर आगे बढ़ें।
ब्लॉक लेआउट आपको अलग-अलग ब्लॉक (कंटेनर) का उपयोग करके एक पृष्ठ संरचना बनाने की अनुमति देता है
सारणीबद्ध लेआउट की तुलना में ब्लॉक लेआउट के लाभ:
- प्रत्येक ब्लॉक को एक टैग द्वारा वर्णित किया गया है;
- कंटेनरों की नेस्टिंग संरचना को आसानी से ट्रैक किया जाता है;
- कंटेनरों आप न केवल माता-पिता के अंदर, बल्कि अन्य तरीकों से भी स्थिति बना सकते हैं (उदाहरण के लिए, पूर्ण स्थिति) - हम इस बारे में बाद में बात करेंगे;
- वेबसाइट पेजों की लोडिंग स्पीड काफी बढ़ जाती है। कुछ अनुमानों के अनुसार, तालिका की तुलना में गति लगभग तीन से चार गुना बढ़ जाती है;
- सारणीबद्ध लेआउट की तुलना में ब्लॉक लेआउट में कोड की मात्रा काफी कम होती है। इसका मतलब है कि सर्वर पर लोड भी कम हो गया है;
- ब्लॉक लेआउट वाली वेबसाइटें किसी भी स्क्रीन रिज़ॉल्यूशन पर सभी ब्राउज़रों में बिल्कुल सही ढंग से प्रदर्शित होती हैं;
- बिना किसी समस्या के आसानी से किसी भी सीएमएस में एकीकृत हो जाता है।
2. ब्लॉक लेआउट का आधार कंटेनर है
ब्लॉक लेआउट के साथ, सभी पृष्ठ तत्वों में ब्लॉक होते हैं (तार्किक, है ना?)।
अवरोध पैदा करना
एक आयताकार क्षेत्र है. डिफ़ॉल्ट रूप से, एक ब्लॉक मूल तत्व की पूरी चौड़ाई पर कब्जा कर लेता है; ब्लॉक की ऊंचाई उसकी सामग्री पर निर्भर करती है। ब्लॉकों को लंबवत रूप से व्यवस्थित किया जाता है, अर्थात, यदि एक पंक्ति में कई ब्लॉक पेज कोड में लिखे गए हैं, तो वे ब्राउज़र में एक के नीचे एक प्रदर्शित होंगे।यदि हमें कई ब्लॉकों को क्षैतिज रूप से व्यवस्थित करने की आवश्यकता है, तो हम उनके गुणों में पैरामीटर सेट करते हैं " चारों ओर बहो" (तैरना)। लेकिन उस पर बाद में।
किसी भी ब्लॉक के मुख्य गुण हैं:पैडिंग, बॉर्डर और मार्जिन।
मैं कामना करता हूँ कि आप एक वेबमास्टर के कौशल में महारत हासिल करने में सफल हों!
डिव ब्लॉक के साथ लेआउट लंबे समय से एक मानक बन गया है और सारणीबद्ध लेआउट की तुलना में इसके कई फायदे हैं। हालाँकि, वास्तव में, नौसिखिए डेवलपर्स इन्हीं ब्लॉकों के व्यवहार को लेकर भ्रमित हैं।
आइए ब्लॉक लेआउट के मुख्य बिंदुओं पर नजर डालें। अब हम html5 मानक को ध्यान में नहीं रखेंगे, बल्कि केवल div ब्लॉक के साथ लेआउट की मूल बातें देखेंगे, जिसका उपयोग लेआउट या कुछ व्यक्तिगत पेज घटक बनाते समय किया जाता है।
ब्लॉक तत्व किसे माना जाता है?
पृष्ठ पर ऐसे तत्व का क्षेत्र डिफ़ॉल्ट रूप से एक आयत द्वारा दर्शाया जाता है, यह संपूर्ण उपलब्ध चौड़ाई पर कब्जा कर लेता है और एक नई लाइन पर शुरू होता है।
ब्लॉक लेआउट में उपयोग किया जाने वाला सबसे आम तत्व सार्वभौमिक तत्व है.तो, सरल से जटिल की ओर। आइए देखें कि शैलियों की स्थिति को प्रभावित किए बिना डिव डिफ़ॉल्ट रूप से कैसे दिखाई देते हैं। स्पष्टता के लिए, हम शैली विशेषता के माध्यम से इनलाइन तत्वों में शैलियाँ जोड़ेंगे।
ब्लॉक 1ब्लॉक 2ब्लॉक 3आइए प्रत्येक ब्लॉक के लिए एक चौड़ाई मान जोड़ें:
ब्लॉक 1ब्लॉक 2ब्लॉक 3यह देखा जा सकता है कि प्रत्येक ब्लॉक, विनिर्देश के अनुसार, एक नई लाइन पर स्थित है। यह उनका सामान्य व्यवहार है.
अब सवाल उठता है कि पोजिशन कैसे करें div एक लाइन पर ब्लॉक करता है, एक के बाद एक?
इस उद्देश्य के लिए, एक संपत्ति है जो यह निर्धारित करती है कि ब्लॉक को किस तरफ संरेखित करने के लिए मजबूर किया जाएगा। साथ ही, दूसरे किनारे से यह अन्य तत्वों के चारों ओर प्रवाहित हो सकता है।
फ्लोट प्रॉपर्टी के निम्नलिखित अर्थ हैं:
- बाएं - ब्लॉक बाईं ओर संरेखित है, दाईं ओर बह रहा है
- दाएँ - ब्लॉक दाएँ किनारे से संरेखित है, बाईं ओर बह रहा है
- कोई नहीं - कोई रैपिंग निर्दिष्ट नहीं है, ब्लॉक पिछले उदाहरणों की तरह डिफ़ॉल्ट रूप से व्यवहार करता है।
आइए अपने ब्लॉक में फ्लोट: लेफ्ट जोड़ें ताकि ब्लॉक बाईं ओर संरेखित हो जाएं:
ब्लॉक 1ब्लॉक 2ब्लॉक 3परिणामस्वरूप, ब्लॉक एक पंक्ति में खड़े हो गए। ठीक है, मान लीजिए कि हम नीचे एक और डिव जोड़ना चाहते हैं, और हम फ्लोट प्रॉपर्टी को निर्दिष्ट किए बिना ऐसा करेंगे:
ब्लॉक 1. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
ब्लॉक 2. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
ब्लॉक 3. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
यूनिट 4. लोरेम इप्सम डोलोर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट, सेड डू ईसमोड टेम्पोर इंसिडिडंट यूट लेबोर एट डोलोर मैग्ना अलिका।
ब्लॉक 1. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
ब्लॉक 2. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
ब्लॉक 3. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
यूनिट 4. लोरेम इप्सम डोलोर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट, सेड डू ईसमोड टेम्पोर इंसिडिडंट यूट लेबोर एट डोलोर मैग्ना अलिका।
ऐसा क्यों हुआ? संक्षेप में, ऐसा इसलिए होता है क्योंकि फ़्लोट किए गए तत्व दस्तावेज़ के प्रवाह से बाहर हो जाते हैं। हालाँकि, यह एक अलग लेख का विषय है। यहां हम नई संपत्ति से परिचित होंगे, जो तैरते तत्वों के व्यवहार को नियंत्रित करती है:
- बाएँ - बाईं ओर रैपिंग अक्षम करता है, सभी तत्व एक नई लाइन पर दिखाए जाएंगे (तत्व के नीचे)
- दाहिनी ओर - तत्व को दाहिनी ओर लपेटने से रोकता है
- दोनों - किसी तत्व के चारों ओर दोनों तरफ बहने पर रोक लगाते हैं, इसका उपयोग तब करने की अनुशंसा की जाती है जब आपको तत्व को एक नई लाइन पर स्पष्ट रूप से दिखाने की आवश्यकता होती है या यह अज्ञात है कि किस तरफ अन्य तत्वों को लपेटना संभव है
आइए ब्लॉक 4 में क्लियर:लेफ्ट प्रॉपर्टी जोड़ें, जो इस तत्व को बाईं ओर अन्य फ्लोटिंग तत्वों के आसपास बहने से रोक देगा।
ब्लॉक 1. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीटब्लॉक 2. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीटब्लॉक 3. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीटयूनिट 4. लोरेम इप्सम डोलोर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट, सेड डू ईसमोड टेम्पोर इंसिडिडंट यूट लेबोर एट डोलोर मैग्ना अलिका।ब्लॉक 1. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
ब्लॉक 2. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
ब्लॉक 3. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
यूनिट 4. लोरेम इप्सम डोलोर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट, सेड डू ईसमोड टेम्पोर इंसिडिडंट यूट लेबोर एट डोलोर मैग्ना अलिका।
ब्लॉक 4 को एक नई लाइन पर रखा गया है, जैसा हमें चाहिए।
इस मामले में, हम जानते हैं कि अन्य ब्लॉक कैसे स्थित हैं, इसलिए उदाहरण में हमने तुरंत स्पष्ट:बाएं संकेत दिया। ऐसी स्थितियाँ होती हैं जब हमें ठीक से पता नहीं होता है कि फ्लोटिंग ब्लॉक किस तरफ मिलेगा, इसलिए ऐसे मामलों में यह स्पष्ट रूप से निर्दिष्ट करने योग्य है: दोनों, जो दोनों तरफ के प्रवाह को रद्द कर देता है। अब हमने यह पता लगा लिया है कि डिव ब्लॉक को एक लाइन पर क्षैतिज रूप से कैसे रखा जाए।
ध्यान रखें कि यदि मूल तत्व की चौड़ाई अनुमति देती है तो फ्लोट ब्लॉकों को एक ही पंक्ति पर रखा जाता है। यदि ब्लॉक तत्व एक पंक्ति में फिट नहीं होते हैं, तो वे एक नई पंक्ति में लपेट दिए जाएंगे। यदि यह महत्वपूर्ण है, उदाहरण के लिए, लेआउट बनाते समय, आपको इसे ध्यान में रखना होगा और फ्लोट वाले ब्लॉकों के लिए, चौड़ाई - निश्चित (पीएक्स) या रबर (%, रेम, आदि) निर्धारित करना सुनिश्चित करें। आइए आगे ऐसी स्थितियों पर नजर डालते हैं।
यदि हम इन ब्लॉकों को केंद्र में रखना चाहते हैं तो ब्लॉकों को कैसे प्रभावित करें?
क्लासिक समाधान यह होगा कि ब्लॉक में पैरेंट को जोड़ा जाए और मार्जिन: 0 ऑटो; संपत्ति का उपयोग किया जाए।
हमने माता-पिता को क्लास.रैपर क्यों दिया? "रैपर" का अर्थ है "रैपर"। यह आम तौर पर स्वीकृत अभ्यास का एक प्रकार है, जो एक तत्व के लिए अन्य ब्लॉकों को लपेटने के लिए वर्ग के नाम को परिभाषित करता है और इस तरह उन्हें मूल को बदलकर नियंत्रित/प्रभावित करने की अनुमति देता है।
आइए पिछले उदाहरणों से मार्कअप लें और इसमें सुधार करें।
ब्लॉक 1. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीटब्लॉक 2. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीटब्लॉक 3. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीटयूनिट 4. लोरेम इप्सम डोलोर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट, सेड डू ईसमोड टेम्पोर इंसिडिडंट यूट लेबोर एट डोलोर मैग्ना अलिका।ब्लॉक 1. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
ब्लॉक 2. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
ब्लॉक 3. लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट
यूनिट 4. लोरेम इप्सम डोलोर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट, सेड डू ईसमोड टेम्पोर इंसिडिडंट यूट लेबोर एट डोलोर मैग्ना अलिका।
यहां सब कुछ सरल लगता है.
और अगर हमें यह पसंद नहीं है कि टेक्स्ट मूल ब्लॉक के किनारे से चिपक जाता है और हम मार्कअप में बदलाव किए बिना केवल सीएसएस का उपयोग करके फ़ील्ड जोड़ना चाहते हैं। आइए तत्वों में पैडिंग प्रॉपर्टी जोड़ें:
ब्लॉक 1. लोरेम
ब्लॉक 2. लोरेम इप्सम
ब्लॉक 3. लोरेम इप्सम
ब्लॉक 4. लोरेम
और हम देखते हैं कि हमारा लेआउट ख़राब हो गया है! ब्लॉक 3 कहीं चला गया है. ऐसा क्यों हुआ? उत्तर सीधा है। तत्वों में फ़ील्ड जोड़कर, हमने उनकी चौड़ाई बढ़ा दी। अब मान हैं:
ब्लॉक 1: 10 + 200 + 10 = 220px
ब्लॉक 2: 10 + 150 + 10 = 170px
ब्लॉक 3: 10 + 100 + 10 = 120px
ब्लॉक 4: 10 + 450 + 10 = 470px
220 + 170 + 120 = 510px
तीन ब्लॉकों की कुल चौड़ाई 510 है, वे मूल ब्लॉक (450) की चौड़ाई में फिट नहीं होते हैं और इसलिए उन्हें एक नई लाइन में स्थानांतरित कर दिया जाता है।
इसे कैसे जोड़ेंगे? आप निम्न कार्य कर सकते हैं:
- मार्जिन को ध्यान में रखते हुए, प्रत्येक ब्लॉक के लिए चौड़ाई मान रीसेट करें। ब्लॉक आकार को कम करके. सब कुछ फिर से एक पंक्ति में बड़े करीने से फिट हो जाएगा। क्या आप सहमत हैं कि यह असुविधाजनक है? हर बार मैं लेआउट में जाता हूं और कुछ संपादित करता हूं।
- बॉक्स-आकार वाली संपत्ति का उपयोग करें: बॉर्डर-बॉक्स। ताकि गणना ब्लॉक की कुल चौड़ाई से ली जाए। मैं आपको यह पता लगाने की सलाह देता हूं कि सीएसएस ब्लॉक मॉडल क्या है।
दूसरे विकल्प का उपयोग करने पर, यह इस प्रकार निकलता है:
ब्लॉक 1. लोरेमब्लॉक 2. लोरेम इप्समब्लॉक 3. लोरेम इप्समब्लॉक 4. लोरेमब्लॉक 1. लोरेम
ब्लॉक 2. लोरेम इप्सम
ब्लॉक 3. लोरेम इप्सम
ब्लॉक 4. लोरेम
आइए अब प्राप्त सभी जानकारी को एक साथ रखें और एक लचीले लेआउट के साथ एक सरल मानक तीन-स्तंभ लेआउट बनाने का प्रयास करें, जो अधिकतम 900px तक फैला होगा, जिसके बाद पूरा लेआउट केंद्र में स्थित होगा।
लेआउट मार्कअप बनाएं:
दस्तावेज़ साइट हेडरलोरेम इप्सम डोलर सिट अमेट, कंसेक्टेचर एडिपिसिसिंग एलीट। ओडिट रेम फ्यूगिट इटाके, इस इम्पेडिट एपेरियम ए ऑटोम रिपेलैट विटे पोरो एक्स एक्सपेडिटा, कम्के नल्ला, वेलिट। सोलुटा वेलिट इओस, क्विया. फुगियाट वॉलुप्टेट्स निसी एलिक्विड ईम सेपिएंटे सनट नोबिस, एडिपिस्की असुमेन्डा ईयरम!हम शैलियाँ लिखते हैं:
बॉडी (अधिकतम-चौड़ाई: 900px; /* अधिकतम चौड़ाई सीमित करें */ मार्जिन: 0 ऑटो; ) /* बॉडी के अंदर सभी ब्लॉक के लिए, ब्लॉक चौड़ाई गणना एल्गोरिदम बदलें और सभी ब्लॉक में 10px मार्जिन जोड़ें */ बॉडी div ( - वेबकिट-बॉक्स-साइज़िंग: बॉर्डर-बॉक्स; बॉक्स-साइज़िंग: बॉर्डर-बॉक्स: 10px; बैकग्राउंड: #8ईडी9बी6; : बाएँ; ) .सामग्री (फ़्लोट: बाएँ; चौड़ाई: 60%; ) .दायाँ-साइडबार (चौड़ाई: 20%; पृष्ठभूमि: #FF9282; फ़्लोट: बाएँ; ) .फ़ुटर (पृष्ठभूमि: #000; स्पष्ट: दोनों; / * दोनों तरफ रैपिंग अक्षम करें, ब्लॉक एक नई लाइन पर प्रदर्शित होता है */ रंग: #ccc;
अगर कुछ अस्पष्ट है तो टिप्पणियों में पूछें।
अच्छा दोपहर दोस्तों! किसी तरह एचटीएमएल पर अपने कई पाठों में मैंने div लेआउट जैसी अवधारणा के बारे में बात की और उसका उपयोग किया।
आपके पास संभवतः प्रश्न होंगे, खासकर यदि आप नए हैं, तो यह क्या है?
आज के लेख में मैं आपके सभी संदेहों को दूर कर दूंगा और div ब्लॉक क्या हैं, इसके बारे में सवालों के जवाब दूंगा
आइए पढ़ाई शुरू करें.
HTML डिव ब्लॉक और लेआउट
आपके दिमाग को अव्यवस्थित और गंदा न करने के लिए, मैं बस संक्षेप में कहूंगा कि पहले सभी वेब डिज़ाइनर और डेवलपर्स पेज और साइट बनाते समय एक टेबल लेआउट का उपयोग करते थे, जहां प्रत्येक सेल एक विशिष्ट तत्व का प्रतिनिधित्व करता था। यह कुछ इस तरह दिखता था:
वेबसाइट निर्माण इस प्रकार था। यह एक बहुत ही आदिम उदाहरण है, लेकिन आप स्पष्ट रूप से कल्पना कर सकते हैं कि उन दूर के समय में वेबसाइटें कैसे बनाई जाती थीं। इंटरनेट प्रौद्योगिकियाँ अभी भी स्थिर नहीं हैं और किसी समय html div लेआउट की अवधारणा हमारे सामने आई। और फिर, जैसा कि वे कहते हैं, यह सब शुरू हुआ।
वेबसाइट विकास में इसका महत्व वास्तव में बहुत बढ़िया है। अब वेबसाइट बनाना और html ब्लॉक प्रबंधित करना पहले से कहीं अधिक आसान हो गया है। साइटें सुंदर और दिलचस्प बनने लगीं। अब पूरी दुनिया बस अपना रास्ता बना रही है।
इस प्रकार अब हम div html ब्लॉकों का उपयोग करने के मॉडल को सरल तरीके से चित्रित कर सकते हैं।
सुविधा एक-दूसरे से ब्लॉकों की स्वतंत्रता में निहित है, उन्हें व्यक्तिगत रूप से प्रबंधित करना आसान है, उन्हें अपनी इच्छानुसार स्थानांतरित करें, शैलियाँ जोड़ें, आप कई डिव समूहों के लिए सीएसएस नियमों के माध्यम से सामान्य शैलियाँ सेट कर सकते हैं। सहमत हूँ यह सुविधाजनक है.
डिव टैग का उपयोग करने के उदाहरण
आइए कुछ व्यावहारिक उदाहरण देखें कि आप HTML पेज पर div टैग कैसे लागू कर सकते हैं। एक सरल उदाहरण में, हम पेज पर 4 ब्लॉक बनाएंगे। मैं इस और भविष्य के उदाहरणों में हमेशा नोटपैड++ का उपयोग करूंगा।
तो चलिए मैं समझाता हूं. हमारे पास एक डिज़ाइन है < ! DOCTYPE html > यह आधुनिक ब्राउज़रों के लिए उपयुक्त है और HTML 5 मार्कअप का समर्थन करता है, हम इसके बारे में भविष्य के अंकों में बात करेंगे।
इसके बाद, एक बड़ा "पैरेंट" कंटेनर खुलता है < html > . यह युग्मित है और अंत में बंद होना चाहिए! इसके बाद सर्विस टैग का उद्घाटन होता है < head > , जो युग्मित भी है और इसमें एन्कोडिंग के बारे में सेवा जानकारी शामिल है < meta charset > , सबसे महत्वपूर्ण एसईओ पृष्ठ शीर्षक शीर्षक, विवरण (मैंने इसे यहां शामिल नहीं किया, क्योंकि इसकी कोई आवश्यकता नहीं है, हम पूरी तरह से तकनीकी पहलू का विश्लेषण कर रहे हैं), सीएसएस शैलियों, फ़ॉन्ट्स (Google फ़ॉन्ट्स लाइब्रेरी), जावास्क्रिप्ट भी यहां शामिल हैं।
इसके बाद टैग आता है < body > . यह पहले से ही हमारे सभी ब्लॉक चिह्नों और टैग वाले सभी कंटेनरों को संग्रहीत करेगा। बस इसे एक विशाल "बैरल" के रूप में याद रखें।
और अंत में, हमारे div कंटेनर यहाँ आ गए हैं।
< div class = "header" > < / div >
< div class = "sidebar" > < / div >
< div class = "content" > < / div >
< div class = "footer" > < / div >
महत्वपूर्ण! उन्हें भी जोड़ा गया है; उन्हें भी अन्य टैग के साथ बंद करने की आवश्यकता है।
जैसा कि आप देख सकते हैं, प्रत्येक div ब्लॉक में एक वर्ग विशेषता होती है, बराबर चिह्न के बाद आप उन्हें स्वतंत्र रूप से और मनमाने ढंग से सेट कर सकते हैं। ये कक्षाएं विशेष रूप से CSS के लिए बनाई गई हैं। यानी, ब्राउज़र पेज पर आता है, डिव ब्लॉक को देखता है और देखता है कि इसमें क्या जानकारी है और सीएसएस फ़ाइल में जाता है और वहां आवश्यक क्लास की तलाश करता है।
आप न केवल वर्ग विशेषता सेट कर सकते हैं, बल्कि आईडी (पहचानकर्ता) का भी उपयोग कर सकते हैं। आप यह प्रश्न पूछ सकते हैं: "इससे मुझे क्या फर्क पड़ता है कि मैं कौन सा उपयोग करता हूँ?" मैं उत्तर दूंगा, आप लेआउट के लिए किसी भी विधि का उपयोग कर सकते हैं। केवल एक अंतर के साथ - प्राथमिकता पहचानसे अधिक विशेषाधिकार हैं कक्षा .
मैं इसे नीचे वीडियो चीट शीट में समझाऊंगा।
वेबसाइट बनाने की हर किसी की अपनी शैली होती है, मैं क्लास का उपयोग करना पसंद करता हूं, क्योंकि सीएसएस में यह प्रविष्टि एक बिंदु के साथ प्रदर्शित होती है . चयनकर्ता
हां, वैसे, मैं कहना चाहता हूं कि हेडर, साइडबार, कंटेंट, फूटर सभी सीएसएस चयनकर्ता हैं, और उनमें पहले से ही विशेषताएँ होंगी।
इसलिए, हम उपयोगकर्ताओं के मन में व्याप्त गड़बड़ी को दूर करना जारी रखते हैं। हमने क्लास के साथ डिव ब्लॉक बनाए हैं, अब सीएसएस पर चलते हैं।
आइए हेड टैग के अंदर अपने पेज के लिए सीएसएस नियम खोलें, यानी हम इसे प्रारूपित करेंगे। आइए इसे इस तरह करें:
प्रविष्टि इस प्रकार होगी (बस अपने उदाहरण में कॉपी और पेस्ट करें और ब्राउज़र में देखें)
डिव टैग का उपयोग करने का उदाहरण < ! DOCTYPE HTML >
< html >
< head >
< meta charset = "utf-8" >
< title >डिव टैग का उपयोग करने का उदाहरण< / title >
< / head >
हम अनुशंसा करते हैं
कंप्यूटर फ़ोन क्यों नहीं देखता और क्या करें?
ऐसे मामले होते हैं जब आप अपने फोन को यूएसबी केबल के जरिए पर्सनल कंप्यूटर या लैपटॉप से कनेक्ट करते हैं, तो पहले वाला इसे पहचान नहीं पाता है। यह बनता जा रहा है...
