首页使用flex布局设计一个网页

使用flex布局设计一个网页

时间: 2023-12-14 16:53:16 浏览: 78

好的，下面是一个简单的flex布局的网页设计示例： HTML代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flex布局网页</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Flex布局网页</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section class="left"> <h2>左侧内容</h2> <p>这里是左侧内容</p> </section> <section class="right"> <h2>右侧内容</h2> <p>这里是右侧内容</p> </section> </main> <footer> <p>版权所有 © 2021</p> </footer> </body> </html> ``` CSS代码： ```css body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 20px; display: flex; justify-content: space-between; align-items: center; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; } nav li { margin: 0 10px; } nav a { color: #fff; text-decoration: none; } main { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; } .left, .right { flex: 1; padding: 20px; } .left { background-color: #f2f2f2; } .right { background-color: #ddd; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` 上述代码实现了一个简单的flex布局网页。其中： - header部分使用了flex布局，通过`justify-content: space-between;`和`align-items: center;`实现了左右对齐和垂直居中。 - main部分使用了`display: flex;`和`flex-wrap: wrap;`实现了自适应布局，左右两个部分使用了`flex: 1;`实现了平均分配空间。 - footer部分使用了flex布局，通过`text-align: center;`实现了居中对齐。

阅读全文