divcss布局模板代码
以下是一个简单的 div 和 CSS 布局模板代码示例：
HTML:
html复制代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Div CSS Layout Template</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <header class="header"> <h1>Welcome to My Website</h1> </header> <nav class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <main class="main"> <section class="section"> <h2>Section 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </section> <section class="section"> <h2>Section 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </section> </main> <footer class="footer"> <p>© 2023 My Website. All rights reserved.</p> </footer> </div> </body> </html>
CSS (styles.css):
css复制代码body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { display: flex; flex-direction: column; height: 100vh; } .header { background-color: #333; color: #fff; padding: 20px; text-align: center; } .nav { background-color: #f5f5f5; padding: 10px; } .nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; } .nav ul li a { text-decoration: none; color: #333; padding: 10px; } .main { flex-grow: 1; padding: 20px; } .section { margin-bottom: 20px; } .footer { background-color: #333; color: #fff; padding: 10px; text-align: center; }
这个模板代码创建了一个基本的 div 和 CSS 布局，包括头部、导航栏、主体内容和页脚。CSS 用于控制布局和样式。你可以根据需要修改和扩展这个模板，以满足你的特定需求。
