DIV+CSS常用的Html网页布局代码
在HTML和CSS中,`DIV` 和 `CSS` 是构建网页布局的基础。通过使用 `div` 元素和 CSS 样式,可以实现各种复杂的网页布局。以下是一些常见的 HTML 网页布局代码示例: ### 1. 基本的两列布局 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Two Column Layout</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { display: flex; } .sidebar { width: 250px; background-color: #f4f4f4; padding: 20px; } .content { flex: 1; padding: 20px; background-color: #fff; } </style> </head> <body> <div class="container"> <div class="sidebar"> Sidebar Content </div> <div class="content"> Main Content Area </div> </div> </body> </html> ``` ### 2. 响应式三列布局 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Three Column Layout</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { display: flex; flex-wrap: wrap; } .column { padding: 20px; box-sizing: border-box; } .left, .right { width: 20%; background-color: #f4f4f4; } .center { width: 60%; background-color: #fff; padding: 20px; } @media (max-width: 768px) { .left, .right, .center { width: 100%; } } </style> </head> <body> <div class="container"> <div class="column left"> Left Column </div> <div class="column center"> Center Column </div> <div class="column right"> Right Column </div> </div> </body> </html> ``` ### 3. 固定宽度的单列布局 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fixed Width Single Column Layout</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { width: 960px; margin: 0 auto; background-color: #fff; padding: 20px; } header, footer { text-align: center; padding: 10px; background-color: #f4f4f4; } main { padding: 20px; } </style> </head> <body> <header> Header </header> <div class="container"> <main> Main Content Area </main> </div> <footer> Footer </footer> </body> </html> ``` ### 4. 单列居中布局 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Single Column Centered Layout</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="container"> Centered Content </div> </body> </html> ``` 这些是常见的布局模式,你可以根据需求选择合适的布局方式,并进一步优化样式和功能。