उदाहरण
CSS से रिस्पॉन्सिव ब्लॉग लेआउट बनाने के लिए, निम्न कोड का उपयोग करें:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } nav { font-size: 20px; background-color: rgb(136, 22, 182); color: #cccccc; height: 75px; } ul { position: fixed; right:10px; } ul li { display: inline; padding-right: 30px; font-weight: 500; color: rgb(251, 255, 0); } .logo { width: 75%; margin-left: auto; margin-right: auto; color: white; float: left; font-size: 30px; padding-left: 20px; padding-top: 20px; } .blog { margin-top: 20px; width: 75%; margin-left: auto; margin-right: auto; height: 400px; } .post { margin-top: 20px; float: left; } .blogHeader { font-size: 36px; margin-bottom: 20px; } .links { float: right; } .links li { color: black; } footer { color: white; position: fixed; width: 100%; bottom: 0; margin-left: auto; margin-right: auto; font-size: 30px; height: 100px; padding: 20px; background-color: rgb(9, 141, 101); text-align: center; } </style> </head> <body> <nav> <div class="logo"> ↷ LOGO ↶ </div> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <div class="blog"> <div class="post"> <div class="blogHeader"> <h1>Blog Heading</h1> </div> <div class="blog-body"> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium. </p> </div> </div> <div class="links"> <ul> <li>BLOG 2</li> <li>BLOG 3</li> </ul> </div> </div> <footer> Copyright © </footer> </body> </html>
आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:
