首页采用弹性伸缩盒，flex设计思想布局。要求页头、导航、内容和页脚4个部分宽度为90%，最大宽度980px，最小宽度280px。内容区3个部分显示区域比例为2:1:1。

采用弹性伸缩盒，flex设计思想布局。要求页头、导航、内容和页脚4个部分宽度为90%，最大宽度980px，最小宽度280px。内容区3个部分显示区域比例为2:1:1。

时间: 2024-11-06 14:21:47 浏览: 15

弹性伸缩盒（Flexbox）是一种现代CSS布局模型，它的设计思想是为了更灵活地控制元素的排列和对齐。在HTML页面中，可以将页头、导航、内容和页脚这四个部分分别设置为 flex 容器的子项，通过 `display: flex` 实现布局。要满足条件： 1. 每个部分宽度均为90%的最大宽度，并且保证在280px以上：你可以为它们设定一个最小宽度为280px，然后应用 `flex-grow: 1;` 和 `flex-basis: 90%;`，这样在容器空间足够大时，每个部分会平均分配空间，而在小屏幕下，不会收缩得小于280px。 2. 内容区的三部分显示比例为2:1:1：可以为这三个子项设置 `flex-basis` 分别为60%, 30%, 和30% 或者直接使用 `flex` 属性，比如第一个部分设为 `flex: 2`, 第二个和第三个部分设为 `flex: 1`，这样会按照这个比例分配剩余的空间。示例代码如下： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; flex-wrap: wrap; min-width: 280px; max-width: 980px; justify-content: space-between; } .header, .nav, .content, .footer { flex: 1; min-width: 280px; max-width: 90%; } .content { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 2 0 60%; /* 这里是2:1:1的比例 */ } </style> </head> <body> <div class="container"> <header class="header">页头</header> <nav class="nav">导航</nav> <div class="content"> <section>内容区1</section> <section>内容区2</section> <section>内容区3</section> </div> <footer class="footer">页脚</footer> </div> </body> </html> ```

阅读全文