首页帮我写一个自适应框架的html的代码

帮我写一个自适应框架的html的代码

时间: 2023-06-13 09:04:16 浏览: 83

以下是一个简单的自适应框架的 HTML 代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自适应框架示例</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 20px; box-sizing: border-box; } .box { flex-basis: calc(33.33% - 20px); margin-bottom: 20px; background-color: #f3f3f3; padding: 10px; box-sizing: border-box; } @media only screen and (max-width: 768px) { .box { flex-basis: calc(50% - 20px); } } @media only screen and (max-width: 480px) { .box { flex-basis: 100%; } } </style> </head> <body> <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> <div class="box">Box 5</div> <div class="box">Box 6</div> </div> </body> </html> ``` 这个示例中，我们使用了 `flex` 布局来实现自适应布局。设置了一个容器 `.container`，并且指定了最大宽度为 1200px。在容器内部，我们设置了每个盒子 `.box` 占据容器宽度的 33.33%，并且设置了一些间距和背景颜色等样式。同时，我们使用了媒体查询 `@media` 来响应不同的屏幕尺寸。当屏幕宽度小于等于 768px 时，我们将每个盒子的宽度改为占据容器宽度的 50%。当屏幕宽度小于等于 480px 时，我们将每个盒子的宽度改为占据容器宽度的 100%，并且取消了间距的设置。通过这种方式，我们可以实现一个简单的自适应布局。你可以根据自己的需求对样式进行调整和修改。

阅读全文