How to structure the navigation and the three derived divs in HTML and CSS:
Here Code help you:
HTML:
-
<nav>: Contains the navigation menu.<ul>: Unordered list for navigation links.<div class="container">: Wrapper for the content sections.<div class="derivative">: Individual content sections.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Structured Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ul> </nav> <div class="container"> <div id="section1" class="derivative">Content for Section 1</div> <div id="section2" class="derivative">Content for Section 2</div> <div id="section3" class="derivative">Content for Section 3</div> </div> </body> </html>
CSS :
body: Basic font and margin settings.nav: Background color, text color, and padding for the navigation bar.nav ul: Remove default list styling.nav ul li: Inline display for list items.nav ul li a: Styling for links.container: Centered flex container for the content sections.derivative: Styling for individual sections with borders, padding, and background color.
body { font-family: Arial, sans-serif; margin: 0; padding: 0; } nav { background-color: #333; color: white; padding: 10px; text-align: center; } nav ul { list-style: none; padding: 0; margin: 0; } nav ul li { display: inline; margin: 0 10px; } nav ul li a { color: white; text-decoration: none; } .container { display: flex; flex-direction: column; align-items: center; padding: 20px; } .derivative { border: 1px solid #ccc; padding: 20px; margin: 10px 0; width: 80%; background-color: #f9f9f9; }
Leave a Reply