कभी-कभी अपने वेब पेज का फ्लो बनाते समय, आप अपनी सामग्री को विजुअली अलग भागों में बांटने का कोई तरीका ढूंढना चाहेंगे। इस लेख में, हम HTML में हॉरिजॉन्टल रूल के बारे में जानेंगे और इसे अपने मार्कअप में कैसे डालें ताकि आप अपने वेब पेज को विजुअली अधिक आकर्षक और यूजर-फ्रेंडली बना सकें।
<hr> HTML एलिमेंट को किसी भी अन्य HTML एलिमेंट की तरह CSS का उपयोग करके स्टाइल किया जा सकता है। कन्वेंशन यह है कि यह एक नॉन-क्लोजिंग टैग (<hr>) हो न कि सेल्फ-क्लोजिंग टैग (<hr />), लेकिन मार्कअप दोनों तरह से समान पढ़ा जाता है। यह एक ब्लॉक-लेवल एलिमेंट के रूप में प्रदर्शित होता है जिसमें व्यापक ब्राउज़र सपोर्ट होता है और आपके वेब पेज पर विषय में बदलाव का संकेत देता है।
मुझे लगता है कि CSS के साथ प्रयोग करना सबसे अच्छा है यह देखने के लिए कि यह क्या करता है। निम्न कोड सैंडबॉक्स CSS के साथ एक बहुत ही बुनियादी HTML पेज को दर्शाता है जिसका उपयोग HTML <hr> एलिमेंट को सजाने के लिए किया जाता है।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>hr</title> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;700&display=swap" rel="stylesheet" /> <style> body { font-family: 'Roboto Mono'; } nav { display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; height: 50px; margin-left: 20px; } nav > div { display: flex; justify-content: space-around; align-items: center; width: 40%; } nav > div > a { text-decoration: none; color: black; } nav > a { text-decoration: none; font-variant: small-caps; align-self: center; } hr { border: none; border-top: 5px double black; color: #333; overflow: visible; text-align: center; height: 5px; } hr::after { content: '😀😀😀😀'; padding: 0 4px; position: relative; top: -18px; background: #fff; } section { width: 100%; display: flex; align-items: center; margin: 0 auto; } section > div { width: 50%; display: flex; justify-content: center; } section > h1 { width: 50%; text-align: center; } section > div > img { height: 350px; object-fit:cover; } #diff-style-hr { border: none; border-top: 3px dotted black;color: #333; overflow:visible; text-align: center; height: 5px; } #diff-style-hr::after { content: ""; padding: 0; } .lower-container { display: flex; flex-flow: row wrap; } .lower-main { display: flex; flex-direction: column; width: 40%; margin: 0 auto; } h4 { align-self: flex-start; } </style> </head> <body> <nav> <a href="#"> <div> लोगो यहाँ जाता है </div> </a> <div> <a href=""> हमारे बारे में </a> <a href=""> सेवाएं </a> <a href=""> संपर्क करें </a> <a href=""> लॉगिन </a> </div> </nav> <hr /> <main> <section> <div> <img src="https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2266&q=80" alt="code"/> </div> <h1>मैं एक बिजनेस नाम हूँ</h1> </section> <hr id="diff-style-hr"> <div class="lower-container"> <section class="lower-main"> <h4>मैं एक हेडलाइन हूँ</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> <section class="lower-main"> <h4>मैं एक हेडलाइन हूँ</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> <section class="lower-main"> <h4>मैं एक हेडलाइन हूँ</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> <section class="lower-main"> <h4>मैं एक हेडलाइन हूँ</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> </div> </main> </body> </html>
बहुत बढ़िया! अब आपके पास <hr> का उपयोग करके एक शानदार दिखने वाली साइट बनाने के लिए आवश्यक उपकरण हैं।
