वेब पेज डिज़ाइन करते समय सबसे महत्वपूर्ण बात तत्वों की उचित स्थिति है। इसे टेलविंड 'स्थिति' कक्षाओं का उपयोग करके आसानी से किया जा सकता है। स्थिति विभिन्न प्रकार की हो सकती है, उनमें से एक स्थिर है।
यह ब्लॉग प्रदर्शित करेगा कि तत्व को स्थिर रूप से कैसे स्थापित किया जाए।
DOM - टेलविंड में किसी तत्व को स्थिर स्थिति में कैसे रखें?
किसी तत्व को 'का उपयोग करके स्थिर रूप से स्थित किया जा सकता है' स्थिर 'स्थिति का वर्ग। स्थिर स्थिति HTML तत्वों के लिए डिफ़ॉल्ट स्थिति है। 'के साथ तत्व स्थिति: स्थिर बिना किसी सीएसएस स्टाइल के, पृष्ठ के सामान्य प्रवाह के आधार पर स्थित किया जाता है।
वाक्य - विन्यास
'लागू करने का सिंटैक्स' स्थिर 'वर्ग है:
<तत्व कक्षा = 'स्थैतिक' > ... < / तत्व>
यहां, तत्व कोई भी टैग हो सकता है जिस पर स्थिति विशेषता लागू की जा सकती है।
स्थैतिक स्थिति के व्यावहारिक कार्यान्वयन के लिए कोड पर जाएँ:
< शरीर कक्षा = 'पाठ-केंद्र' >< केंद्र >
< एच 1 कक्षा = 'टेक्स्ट-हरा-600 टेक्स्ट-5एक्सएल फॉन्ट-बोल्ड' >
स्थैतिक स्थिति उदाहरण
< / एच 1 >
< बी >टेलविंड सीएसएस स्थिति वर्ग< / बी >
< डिव कक्षा = 'स्थैतिक पाठ-बाएँ पी-2 एम-2 बीजी-हरा-200 एच-48' >
< पी कक्षा = 'फ़ॉन्ट बोल्ड' >स्थैतिक रूप से स्थित< / पी >
< डिव >पूर्ण स्थिति वाला तत्व< / पी >
< / डिव >
< / डिव >
< / केंद्र >
< / शरीर >
इस कोड में:
- “ पाठ-केंद्र ” टैग सामग्री को स्क्रीन के केंद्र में समायोजित करता है।
- ठीक ' 'का उपयोग करके हरे रंग में टैग करें' पाठ-हरा-600 ', पाठ का आकार ' द्वारा पांच गुना पर सेट किया गया है पाठ-5×1 ' और फ़ॉन्ट पर ' का उपयोग करके जोर दिया गया है फ़ॉन्ट बोल्ड ”।
- दो ' 'तत्व भी बनाए जाते हैं और पहले के लिए स्थिर बाईं ओर की स्थिति निर्धारित करते हैं' डिव ' का उपयोग ' स्थिर पाठ-बाएँ ”।
- 'की कक्षाएं निर्दिष्ट करें पी 2 ', ' एम-2 ', ' बीजी-हरा-200 ', ' एच-48 ' दूसरे डिव के लिए और ' का उपयोग करके इसकी स्थिति को बिल्कुल नीचे-बाएँ पर सेट करें सापेक्ष तल-0 बाएँ-0 ' कक्षा।
उत्पादन
उपरोक्त कोड को फ़ाइल में सहेजें और इसके द्वारा बनाए गए वेबपेज का पूर्वावलोकन करें जो इस प्रकार दिखाई देगा:स्थिर रूप से स्थित तत्व सामान्य पृष्ठ प्रवाह के साथ चलता है जबकि दूसरा तत्व अपनी पूर्ण स्थिति बनाए रखता है।
निष्कर्ष
दस्तावेज़ के सामान्य प्रवाह के साथ किसी तत्व को DOM में स्थिर रूप से रखने के लिए, ' का उपयोग करें स्थिर 'टेलविंड की कक्षा' पद ' उपयोगिता। इस ब्लॉग में दिखाया गया है कि किसी भी तत्व को कैसे स्थान दिया जाए” स्थिर एक सरल व्यावहारिक प्रदर्शन के साथ।