Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

HTML और CSS का उपयोग करके साइडबार और मुख्य सामग्री क्षेत्र के साथ एक पेज बनाना

<घंटा/>

html और बॉडी के आकार को 100% पर सेट करके फ्लूइड साइडबार और मुख्य सामग्री क्षेत्र वाला एक वेबपेज बनाया जाता है।

निम्न उदाहरण इसे दिखाता है।

उदाहरण

  <सिर> <शैली> html, शरीर {ऊंचाई:100%; रंग सफेद; फ़ॉन्ट-आकार:2em; लाइन-ऊंचाई:200px;}#पैरेंट {डिस्प्ले:टेबल; चौड़ाई:100%; ऊंचाई:100%;}#साइड {डिस्प्ले:टेबल-सेल; पृष्ठभूमि-रंग:फ़िरोज़ा; चौड़ाई:20%; लंबवत-संरेखण:शीर्ष; बॉक्स-छाया:इनसेट 0 0 10px काला;}#मुख्य {प्रदर्शन:टेबल-सेल; चौड़ाई:80%; बैकग्राउंड:url("https://images.unsplash.com/photo-1611944444060- b50a1d80cfe6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600");}
साइड


Main



 
आउटपुट
 

 यह निम्नलिखित परिणाम देगा -
 

 HTML और CSS का उपयोग करके साइडबार और मुख्य सामग्री क्षेत्र के साथ एक पेज बनाना
  1. एचटीएमएल और सीएसएस के साथ इसके अंदर एक लॉगिन फॉर्म के साथ एक उत्तरदायी नेविगेशन मेनू कैसे बनाएं?

    इसके अंदर एक लॉगिन फॉर्म के साथ एक प्रतिक्रियाशील नेविगेशन मेनू बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0&

  1. सीएसएस और जावास्क्रिप्ट के साथ जल्द ही आने वाला पेज कैसे बनाएं?

    सीएसएस और जावास्क्रिप्ट के साथ जल्द आने वाला पेज बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <style>    body {       height: 100vh;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    

  1. सीएसएस में फिक्स्ड साइडबार और स्क्रॉल करने योग्य सामग्री क्षेत्र के साथ एक पूर्ण ऊंचाई पृष्ठ बनाना

    ऊंचाई को 100% पर सेट करके और तत्वों की उचित स्थिति को लागू करके एक निश्चित साइडबार और स्क्रॉल करने योग्य सामग्री क्षेत्र के साथ एक पूर्ण-ऊंचाई वाला पृष्ठ बनाया जा सकता है। निम्नलिखित उदाहरण उपरोक्त को दर्शाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> .main {   &n