带有侧边栏的响应式布局

简介

在本实验中，我们将探索CSS编程的世界。本实验的主要目标是提供创建带有侧边栏的响应式布局的实践经验。在本实验结束时，你将更好地理解如何使用 display: grid 和 minmax() 属性来创建一个有效且视觉上吸引人的布局。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/grid_layout("Grid Layout") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35234{{"带有侧边栏的响应式布局"}} css/colors -.-> lab-35234{{"带有侧边栏的响应式布局"}} css/text_styling -.-> lab-35234{{"带有侧边栏的响应式布局"}} css/margin_and_padding -.-> lab-35234{{"带有侧边栏的响应式布局"}} css/width_and_height -.-> lab-35234{{"带有侧边栏的响应式布局"}} css/display_property -.-> lab-35234{{"带有侧边栏的响应式布局"}} css/grid_layout -.-> lab-35234{{"带有侧边栏的响应式布局"}} css/backgrounds -.-> lab-35234{{"带有侧边栏的响应式布局"}} end

虚拟机中已经提供了 index.html 和 style.css。

要创建一个包含内容区域和侧边栏的响应式布局，请在父容器上使用 display: grid，对第二列（侧边栏）使用 minmax()，使其宽度在 150px 到 20% 之间，对第一列（主要内容）使用 1fr 来占据剩余空间。以下是一个HTML和CSS代码示例：

<div class="container">
  <main>This element is 1fr large.</main>
  <aside>Min: 150px / Max: 20%</aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main,
aside {
  padding: 12px;
  text-align: center;
}

main {
  background: #d4f2c4;
}

aside {
  background: #81cfd9;
}

请点击右下角的“Go Live”以在端口8080上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了“带有侧边栏的响应式布局”实验。你可以在LabEx中练习更多实验来提升你的技能。