सीएसएस वेबसाइट लेआउट
वेबसाइट लेआउट
एक वेबसाइट को अक्सर शीर्षलेख, मेनू, सामग्री और एक पाद लेख में विभाजित किया जाता है:
चुनने के लिए कई अलग-अलग लेआउट डिज़ाइन हैं। हालांकि, ऊपर दी गई संरचना सबसे आम में से एक है, और हम इस ट्यूटोरियल में इस पर करीब से नज़र डालेंगे।
हैडर
एक हेडर आमतौर पर वेबसाइट के शीर्ष पर स्थित होता है (या शीर्ष नेविगेशन मेनू के ठीक नीचे)। इसमें अक्सर एक लोगो या वेबसाइट का नाम होता है:
उदाहरण
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
परिणाम
Header
नेविगेशन बार
एक नेविगेशन बार में आपकी वेबसाइट के माध्यम से नेविगेट करने वाले आगंतुकों की सहायता के लिए लिंक की एक सूची होती है:
उदाहरण
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
परिणाम
विषय
इस खंड में लेआउट, अक्सर लक्षित उपयोगकर्ताओं पर निर्भर करता है। सबसे आम लेआउट निम्न में से एक (या उन्हें मिलाकर) है:
- 1-कॉलम (अक्सर मोबाइल ब्राउज़र के लिए उपयोग किया जाता है)
- 2-कॉलम (अक्सर टैबलेट और लैपटॉप के लिए उपयोग किया जाता है)
- 3-स्तंभ लेआउट (केवल डेस्कटॉप के लिए उपयोग किया जाता है)
1-स्तंभ:
2-स्तंभ:
3-स्तंभ:
हम 3-कॉलम लेआउट बनाएंगे, और इसे छोटी स्क्रीन पर 1-कॉलम लेआउट में बदल देंगे:
उदाहरण
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
परिणाम
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
युक्ति: 2-स्तंभ लेआउट बनाने के लिए, चौड़ाई को 50% में बदलें। 4-स्तंभ लेआउट बनाने के लिए, 25% आदि का उपयोग करें।
युक्ति: क्या आपको आश्चर्य है कि @media नियम कैसे काम करता है? इसके बारे में हमारे सीएसएस मीडिया प्रश्न अध्याय में पढ़ें ।
युक्ति: कॉलम लेआउट बनाने का एक और आधुनिक तरीका सीएसएस फ्लेक्सबॉक्स का उपयोग करना है। हालाँकि, यह Internet Explorer 10 और पुराने संस्करणों में समर्थित नहीं है। यदि आपको IE6-10 समर्थन की आवश्यकता है, तो फ़्लोट्स का उपयोग करें (जैसा कि ऊपर दिखाया गया है)।
फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल के बारे में अधिक जानने के लिए, हमारे सीएसएस फ्लेक्सबॉक्स अध्याय को पढ़ें ।
असमान कॉलम
मुख्य सामग्री आपकी साइट का सबसे बड़ा और सबसे महत्वपूर्ण हिस्सा है।
यह असमान कॉलम चौड़ाई के साथ आम है , इसलिए अधिकांश स्थान मुख्य सामग्री के लिए आरक्षित है। पार्श्व सामग्री (यदि कोई हो) का उपयोग अक्सर वैकल्पिक नेविगेशन के रूप में या मुख्य सामग्री से संबंधित जानकारी निर्दिष्ट करने के लिए किया जाता है। अपनी पसंद के अनुसार चौड़ाई बदलें, केवल यह याद रखें कि इसे कुल मिलाकर 100% तक जोड़ना चाहिए:
उदाहरण
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
परिणाम
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
फ़ुटबाल
पाद लेख आपके पृष्ठ के निचले भाग में रखा गया है। इसमें अक्सर कॉपीराइट और संपर्क जानकारी जैसी जानकारी होती है:
उदाहरण
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
परिणाम
उत्तरदायी वेबसाइट लेआउट
ऊपर दिए गए कुछ CSS कोड का उपयोग करके, हमने एक प्रतिक्रियाशील वेबसाइट लेआउट बनाया है, जो स्क्रीन की चौड़ाई के आधार पर दो कॉलम और पूर्ण-चौड़ाई वाले कॉलम के बीच भिन्न होता है:
कभी W3Schools Spaces के बारे में सुना है ? यहां आप शुरुआत से अपनी वेबसाइट बना सकते हैं या एक टेम्पलेट का उपयोग कर सकते हैं, और इसे मुफ्त में होस्ट कर सकते हैं।
मुफ़्त में शुरू करें* किसी क्रेडिट कार्ड की आवश्यकता नहीं