सीएसएस वेबसाइट लेआउट

वेबसाइट विन्यास

वेबसाइट आमतौर पर हेडर, मेनू, सामग्री और फुटर के रूप में विभाजित होती है:

अनेक अलग-अलग विन्यास डिजाइन चुनने के लिए उपलब्ध हैं। लेकिन, इसकी संरचना सबसे आम संरचनाओं में से एक है, जिसका हम इस ट्यूटोरियल में गहरी तौर पर अध्ययन करेंगे。

हेडर

हेडर (header) आमतौर पर वेबसाइट के शीर्ष पर (या शीर्ष नेविगेशन मेनू के नीचे) स्थित होता है। यह आमतौर पर लोगो (logo) या वेबसाइट के नाम को शामिल करता है:

इंस्टेंस

.header {
  बैकग्राउंड-कलर: #F1F1F1;
  टेक्स्ट-एलाइन: सेंटर;
  पैडिंग: 20px;
}

परिणाम:

हेडर

स्वयं को प्रयोग करें

नेविगेशन बार

नेविगेशन बार में लिंक सूची शामिल है, ताकि आगमनकर्ता अपने वेबसाइट को ब्राउज़ कर सके:

इंस्टेंस

/* नेविगेशन बार पट्टी */
.topnav {
  ओवरफ्लोव: निष्क्रिय;
  पृष्ठभूमि-रंग: #333;
}
/* नेविगेशन बार लिंक */
.topnav a {
  float: left;
  डिस्प्ले: ब्लॉक;
  रंग: #f2f2f2;
  टेक्स्ट-एलाइन: सेंटर;
  पैडिंग: 14px 16px;
  text-decoration: none;
}
/* लिंक - होवर पर रंग बदलना */
.topnav a:hover {
  पृष्ठभूमि-रंग: #ddd;
  रंग: श्वेत;
}

परिणाम:

स्वयं को प्रयोग करें

सामग्री

आपके लक्ष्य उपयोगकर्ता के अनुसार कौन-सा विन्यास उपयोग में लिया जाता है। सबसे आम विन्यास हैं इनमें से एक (या उनका मिश्रण):

  • 1-स्तम्भलेआउट (सामान्यतया मोबाइल ब्राउज़र के लिए)
  • 2-स्तम्भलेआउट (सामान्यतया पैडलेट और लैपटॉप के लिए)
  • 3-स्तम्भलेआउट (केवल डेस्कटॉप के लिए)

1-स्तम्भ:

2-स्तम्भ:

3-स्तम्भ:

हम 3 स्तम्भ लेआउट बनाएंगे और छोटे स्क्रीन पर इसे 1 स्तम्भ लेआउट में बदलेंगे:

इंस्टेंस

/* तीन समान स्तम्भ बनाएं जो एक-दूसरे के साथ पलटा फ्लॉट करें */
.column {
  float: left;
  width: 33.33%;
}
/* स्तम्भ के बाद फ्लॉटिंग को साफ करने के लिए */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* प्रतिक्रियामुखी लेआउट - तीन स्तम्भ को थाम करने के लिए, न कि छोटे स्क्रीन (चौड़ाई 600 पिक्सल या कम) पर अनुक्रमित करने के लिए */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

परिणाम:

पूर्ण वेबसाइट तकनीक संदर्भ ग्रंथ

हमारा संदर्भ ग्रंथ वेबसाइट तकनीकों के सभी पहलुओं को कवर करता है।

इसमें W3C स्टैंडर्ड तकनीक: HTML, CSS, XML शामिल हैं। अन्य तकनीकों जैसे JavaScript, PHP, SQL आदि भी शामिल हैं।

ऑनलाइन इंस्टैंस टेस्ट टूल

CodeW3C.com में, हम हजारों इंस्टेंस प्रदान करते हैं।

हमारे ऑनलाइन एडिटर का उपयोग करके, आप इन उदाहरणों को संपादित कर सकते हैं और कोड पर प्रयोग कर सकते हैं。

तेजी से समझा जानकारी

एक घंटे का समय एक इंच यहाँ का धन अवश्य है, इसलिए, हम आपको तेजी से समझा जानकारी प्रदान करते हैं。

यहाँ, आप एक सरल और लचीले मोड में आपकी जरूरत पूरी करने के लिए किसी भी ज्ञान को प्राप्त कर सकते हैं。

स्वयं को प्रयोग करें

सूचना:2 स्तम्भ लेआउट को बनाने के लिए चौड़ाई 50％ करें। 4 स्तम्भ लेआउट को बनाने के लिए 25％ का उपयोग करें।

सूचना:आप @media नियम कैसे काम करते हैं? हमारे CSS मीडिया क्वेरी इस चैप्टर में अधिक जानकारी सीखने के लिए

सूचना:स्तम्भ लेआउट को बनाने के लिए एक अधिक आधुनिक तरीका CSS Flexbox का उपयोग करना है। लेकिन, इंटरनेट एक्सप्लोरर 10 और अधिक पुरानी संस्करण इसको समर्थन नहीं करते। IE6-10 समर्थन की जरूरत होने पर, फ्लॉटिंग (जैसे ऊपर दिखाया गया) का उपयोग करें।

फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल के बारे में अधिक जानकारी जानने के लिए हमारे CSS फ्लेक्सबॉक्स शिक्षा

असमान स्तम्भ

मुख्य सामग्री (मुख्य सामग्री) आपके वेबसाइट पर सबसे बड़ा और सबसे महत्वपूर्ण हिस्सा है।

स्तम्भ चौड़ाई असमान होना बहुत सामान्य है क्योंकि अधिकांश जगह अधिकांश सामग्री के लिए आवंटित की जाती है। सहायक सामग्री (अगर हो) आमतौर पर विकल्पी नेविगेशन या मुख्य सामग्री से संबंधित सूचना के रूप में उपयोग की जाती है। आप इसकी चौड़ाई को बदल सकते हैं, लेकिन याद रखें कि इसकी कुल चौड़ाई 100％ होनी चाहिए:

इंस्टेंस

.column {
  float: left;
}
/* बाएं और दाएं स्तम्भ */
.column.side {
  width: 25%;
}
/* मध्य स्तम्भ */
.column.middle {
  width: 50%;
}
/* प्रतिक्रियामुखी लेआउट - तीन स्तम्भ को थाम करने के लिए, न कि अनुक्रमित करने के लिए */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

परिणाम:

पूर्ण वेबसाइट तकनीक संदर्भ ग्रंथ

हमारा संदर्भ ग्रंथ वेबसाइट तकनीकों के सभी पहलुओं को कवर करता है।

इसमें W3C स्टैंडर्ड तकनीक: HTML, CSS, XML शामिल हैं। अन्य तकनीकों जैसे JavaScript, PHP, SQL आदि भी शामिल हैं।

ऑनलाइन इंस्टैंस टेस्ट टूल

CodeW3C.com में, हम हजारों इंस्टेंस प्रदान करते हैं।

हमारे ऑनलाइन एडिटर का उपयोग करके, आप इन उदाहरणों को संपादित कर सकते हैं और कोड पर प्रयोग कर सकते हैं。

तेजी से समझा जानकारी

एक घंटे का समय एक इंच यहाँ का धन अवश्य है, इसलिए, हम आपको तेजी से समझा जानकारी प्रदान करते हैं。

यहाँ, आप एक सरल और लचीले मोड में आपकी जरूरत पूरी करने के लिए किसी भी ज्ञान को प्राप्त कर सकते हैं。

स्वयं को प्रयोग करें

फुटर

फुटर पृष्ठ के नीचे है।यह आमतौर पर कॉपीराइट और संपर्क के जानकारी जैसी जानकारी को शामिल करता है:

इंस्टेंस

.footer {
  बैकग्राउंड-कलर: #F1F1F1;
  टेक्स्ट-एलाइन: सेंटर;
  पैडिंग: 10पिक्सल;
}

परिणाम:

फुटर

स्वयं को प्रयोग करें

रिस्पोंसिव वेबसाइट लेयउट

ऊपर दिए गए CSS कोड का उपयोग करके हमने एक रिस्पोंसिव वेबसाइट लेयउट बनाया है, जो स्क्रीन चौड़ाई के आधार पर दो स्तम्भ और पूर्ण चौड़ाई के स्तम्भ के बीच स्विच करता है:

स्वयं को प्रयोग करें