首页用flex设计一个页面

用flex设计一个页面

时间: 2024-05-04 18:18:18 浏览: 108

好的，以下是一个简单的使用Flexbox布局的页面设计： ```html <!DOCTYPE html> <html> <head> <title>Flexbox Page</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f2f2f2; } .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .box { background-color: #fff; padding: 40px; margin: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 5px; text-align: center; flex-basis: 300px; flex-grow: 1; flex-shrink: 1; transition: all 0.3s ease; } .box:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); } .box h2 { font-size: 24px; margin-bottom: 10px; } .box p { font-size: 16px; margin-bottom: 20px; } </style> </head> <body> <div class="container"> <div class="box"> <h2>Box 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Button</button> </div> <div class="box"> <h2>Box 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Button</button> </div> <div class="box"> <h2>Box 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Button</button> </div> <div class="box"> <h2>Box 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Button</button> </div> </div> </body> </html> ``` 这个页面包含一个容器（`.container`）和四个盒子（`.box`），每个盒子包含一个标题（`h2`）、一段文本（`p`）和一个按钮。页面使用Flexbox布局来自适应不同大小的屏幕，每行最多可以容纳三个盒子，盒子之间有一定的间距。当鼠标悬停在盒子上时，它们会向上移动并产生阴影效果。

阅读全文