साइट लेआउट दो प्रकार के होते हैं: सारणीबद्ध और ब्लॉक। और जबकि पूर्व सरल HTML पृष्ठ बनाने के लिए अधिक सुविधाजनक है, बाद वाला आदर्श है यदि आपको ब्लॉक के रूप में अलग-अलग तत्वों को जोड़ने की आवश्यकता है।
अनुदेश
चरण 1
ऐसी दो तकनीकें हैं जो आपको स्वयं एक ब्लॉक डिज़ाइन विकसित करने की अनुमति देंगी: कैस्केडिंग स्टाइल शीट को किसी दस्तावेज़ में एम्बेड करके, या उन्हें किसी बाहरी संसाधन से जोड़कर। दोनों एक ही परिणाम देते हैं, इसलिए उनमें कोई मौलिक अंतर नहीं है। पहले मामले में, निम्न कोड को style.css फ़ाइल में कहीं भी चिपकाएँ:
.ब्लॉक1 {
}
Block1 - ब्लॉक का नाम, आप कोई और लिख सकते हैं। घुंघराले ब्रेसिज़ के बीच, निम्न प्रारूप में पैरामीटर निर्दिष्ट करें: विशेषता नाम> कोलन> मान> अर्धविराम (घुंघराले ब्रेस से पहले रखा गया सहित)। निम्नलिखित तत्वों का आमतौर पर उपयोग किया जाता है:
- चौड़ाई - चौड़ाई (500px, 100%, आदि);
- ऊंचाई - ऊंचाई (200px, 25%, आदि);
- पृष्ठभूमि - पृष्ठभूमि का रंग (पीला, लाल, # 000000);
- पैडिंग - ब्लॉक के अंदर सामग्री के चारों ओर पैडिंग (0px, 20%);
- मार्जिन - ब्लॉक से बाहरी मार्जिन (15px, 40%);
- सीमा - फ्रेम (सीमा: ठोस 0px काला;);
- फ्लोट - संरेखण (बाएं, दाएं);
- सीमा-त्रिज्या - कोनों की गोलाई (सीमा-त्रिज्या: 10px;)।
चरण दो
CSS के दूसरे उपयोग में, और टैग के बीच की शैली जोड़ें:
.ब्लॉक1 {
}
और अपने इच्छित पैरामीटर जोड़ें।
चरण 3
कमांड का उपयोग करके साइट पर वांछित स्थान पर ब्लॉक डालें:
ब्लॉक 1
पेज को सेव और रिफ्रेश करें, यह दिखना चाहिए। ध्यान रखें कि सामग्री कितनी भरी हुई है, इसके आधार पर ऊंचाई संरेखण भिन्न हो सकता है। उदाहरण के लिए, यदि आप 300px सेट करते हैं, लेकिन केवल एक पंक्ति का पाठ लिखा है, तो यह पूर्ण रूप से प्रदर्शित नहीं होगा। इसे ठीक किया जा सकता है, उदाहरण के लिए, आवश्यक मापदंडों के साथ एक तालिका का उपयोग करके, जिसे ब्लॉक के अंदर रखा जाना चाहिए, अर्थात। टैग और के बीच। और ताकि सीमाएँ दिखाई न दें, विशेषता डालें
