CSS वेबसाइट लेआउट
Display और Position ने सिखाया कि बॉक्स कैसे बैठते और ढेर होते हैं। वेबसाइट लेआउट बड़ा सवाल पूछता है: पेज क्षेत्र — हेडर, नेविगेशन, मुख्य कहानी, साइडबार, फुटर — एक स्क्रीन को शांति से कैसे बाँटें? पहले शेल स्केच करें; Flexbox और Grid जल्द कॉलम कला गहरा करेंगे।
लेआउट क्षेत्रों का टूलकिट
📊 पेज क्षेत्र एक नज़र में
| क्षेत्र | रोज़ का काम |
|---|---|
| Header | साइट पहचान, मुख्य क्रियाएँ, कभी-कभी खोज |
| Navigation | प्रमुख अनुभागों के लिंक (अक्सर हेडर के अंदर या नीचे) |
| Main | मुख्य सामग्री जिससे पेज जुड़ा है |
| Aside / sidebar | संबंधित लिंक, सुझाव, द्वितीय कार्ड |
| Footer | कानूनी नोट, द्वितीयक नेव, संपर्क निशान |
| Container | max-width रैपर जो पठनीय सामग्री केंद्रित करता है |
अच्छा लेआउट HTML landmarks से शुरू होता है, फिर CSS स्पेसिंग और कॉलम। हर बॉक्स को position: absolute से रंगना शायद ही स्केल करता है।
सिमेंटिक पेज शेल
क्षेत्रों को असली एलिमेंट से नाम दें। क्लास लुक सुधारती हैं, लेकिन landmarks पाठकों और सहायक तकनीक के लिए संरचना ईमानदार रखते हैं।
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}
header,
nav,
main,
aside,
footer {
display: block;
}
केंद्रित max-width कंटेनर
लंबी पंक्तियाँ आँख थकाती हैं। पठनीय कॉलम को max-width और क्षैतिज margin: auto वाले कंटेनर में लपेटें।
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
हेडर बार की बुनियाद
हेडर अक्सर कंटेनर या पूरी चौड़ाई घेरता है। पैडिंग एकसमान रखें; गहरा नेव स्टाइल अगले पाठ के लिए छोड़ें।
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}
सरल दो-कॉलम स्केच
Flexbox/Grid पाठों तक, शांत float स्केच main + aside दिखा सकता है। असली पेज कॉलम के लिए अगला Flex/Grid सीखें — यह पुल है, हमेशा की योजना नहीं।
.layout {
display: flow-root;
}
.layout__main {
float: left;
width: 68%;
}
.layout__aside {
float: right;
width: 28%;
}
कहानी के नीचे फुटर
फ्लोट कॉलम के बाद फुटर clear करें ताकि दोनों कॉलम के नीचे गिरे। बाद में Flex/Grid लेआउट बिना float clearfix आदत के कॉलम संभालेंगे।
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
शांत लेआउट आदत
पहले landmarks, फिर कंटेनर, फिर स्पेसिंग। float केवल अस्थायी कॉलम स्केच के रूप में। आने वाले मॉड्यूल में टिकाऊ पेज संरचना के लिए Flexbox और Grid अपनाएँ — absolute ढेर या अंतहीन float ग्रिड नहीं।
.page {
min-height: 100vh;
}
.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }
खुद आज़माएँ
- Landmark शेल बनाएँ: header, nav, main, aside, footer।
- सामग्री को max-width और केंद्रित मार्जिन वाले
.containerमें लपेटें। - पैडिंग और निचली बॉर्डर वाला सरल हेडर बार स्टाइल करें।
- float चौड़ाई से main + aside स्केच करें, फिर फुटर clear करें।
- एक वाक्य लिखें: बाद में Flex/Grid इस float स्केच की जगह क्यों लेगा?
आम गलतियाँ
- पेज के हर कॉलम को absolute पोजिशन करना
- बिना max-width पूरा viewport चौड़ाई पर टेक्स्ट छोड़ना
- अनाम div ढेर के लिए सिमेंटिक landmarks छोड़ना
- इस पाठ को object-fit जैसा समझना (मीडिया फ्रेम, पेज क्षेत्र नहीं)
- अगला Flex/Grid सीखे बिना हमेशा के float पेज ग्रिड भेजना
सारांश
- वेबसाइट लेआउट पेज क्षेत्रों के एक स्क्रीन बाँटने के बारे में है
- सिमेंटिक landmarks और केंद्रित max-width कंटेनर इस्तेमाल करें
- float main/aside स्केच कॉलम संक्षेप में दिखा सकता है
- फ्लोट के नीचे फुटर clear करें; जल्द संरचना के लिए Flex/Grid चुनें
- Layout ≠ object-fit — क्षेत्र बनाम बॉक्स में मीडिया फिटिंग
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी