两个有序自适应布局方案

前端

2024-01-05 07:29:15

有了优雅的头部、中部和底部设计后，还需要考虑布局。一旦布局确定下来，你就可以优化网站的外观，这是网站留下良好第一印象的基础。布局设计也是网站个性所在。通常将网站内容区域划分为左右两列，左列宽度固定/不固定，右列宽度自适应。

布局有三种标准形式：自适应布局、弹性布局和网格布局。每一个都适用于不同的情况，但自适应布局已成为现代网页设计的标准。

自适应布局的思想很简单。就像吹气球，你可以在屏幕允许的情况下吹得很大，也可以保持很小。这种设计让你不会错过任何设备，这在当今“万物互联”的世界里至关重要。

在这篇文章中，我们将深入探究一个特定的问题：两个有序的自适应布局方案，其中左列宽度固定/不固定，右列宽度自适应。我们还将展示如何使用CSS轻松实现这些布局方案。

左列固定宽度布局方案

这是最常见和最简单的两个有序自适应布局方案。在这种方案中，左列通常包含导航菜单或侧边栏，宽度固定，通常在200到300像素之间。右列自适应并容纳所有内容。

以下是一些需要记住的提示：

左列宽度应足够容纳导航链接或侧边栏小部件。
右列宽度应根据内容调整。
确保左列和右列之间的间距足够大。

HTML代码：

<div class="container">
  <div class="left">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class="right">
    <h1>Welcome to My Website</h1>
    <p>This is an example of a two-column adaptive layout with a fixed-width left column and a fluid-width right column.</p>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  height: 100vh;
}

.left {
  width: 200px;
  background-color: #f0f0f0;
}

.right {
  flex-grow: 1;
  background-color: #ffffff;
}

左列不固定宽度布局方案

这种方案与上一方案非常相似，区别在于左列宽度不是固定的。这意味着左列可以随着内容的多少而扩展或收缩。这对于内容不断变化的网站来说非常有用，例如博客或新闻网站。

以下是一些需要记住的提示：

左列宽度应根据内容调整。
右列宽度应根据内容调整。
确保左列和右列之间的间距足够大。

HTML代码：

<div class="container">
  <div class="left">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class="right">
    <h1>Welcome to My Website</h1>
    <p>This is an example of a two-column adaptive layout with a fluid-width left column and a fluid-width right column.</p>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  height: 100vh;
}

.left {
  flex-grow: 1;
  background-color: #f0f0f0;
}

.right {
  flex-grow: 1;
  background-color: #ffffff;
}