Web布局教程：创建固定左侧容器展示技能列表-html教程-PHP中文网

Web布局教程：创建固定左侧容器展示技能列表

本教程将指导您如何在网页中创建一个固定在左侧的容器，用于展示技能列表，同时右侧保留一个可滚动的区域来显示主要内容，如工作经历。我们将重点讲解CSS的position: fixed属性及其应用，并提供详细的代码示例和布局最佳实践，帮助您构建清晰、专业的简历页面布局。

1. 理解固定布局的需求

在许多网页设计中，尤其是在简历或个人作品集页面，经常需要一个侧边栏来显示导航、个人信息或技能列表，而页面的主要内容则在右侧区域滚动显示。这种布局能够让关键信息始终可见，提升用户体验。实现这种效果的关键在于css的定位属性。

2. 使用 position: fixed 创建固定侧边栏

position: fixed 是CSS中用于将元素相对于浏览器视口（viewport）进行定位的关键属性。这意味着无论用户如何滚动页面，设置了 position: fixed 的元素都会停留在其指定的屏幕位置。

2.1 position: fixed 的基本用法

要创建一个固定在左侧的容器，我们需要为其设置 position: fixed，并指定其在视口中的位置（例如 top 和 left）以及尺寸。

/* styles.css */
.fixed-sidebar {
  width: 200px; /* 侧边栏宽度 */
  height: 100vh; /* 侧边栏高度占满整个视口 */
  background-color: #333; /* 背景色 */
  color: #fff; /* 文字颜色 */
  position: fixed; /* 固定定位 */
  top: 0; /* 距离视口顶部0 */
  left: 0; /* 距离视口左侧0 */
  padding: 20px; /* 内边距 */
  box-sizing: border-box; /* 边框盒模型，使padding包含在width/height内 */
  overflow-y: auto; /* 如果内容过多，允许垂直滚动 */
}

.fixed-sidebar h3 {
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #555;
  padding-bottom: 10px;
}

.fixed-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fixed-sidebar li {
  margin-bottom: 8px;
}

登录后复制

在HTML中，你可以这样使用它：

<!-- index.html -->
<div class="fixed-sidebar">
  <h3>我的技能</h3>
  <ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
    <li>React</li>
    <li>Node.js</li>
  </ul>
  <!-- 更多技能列表 -->
</div>

登录后复制

2.2 考虑 position: sticky 作为替代

虽然 position: fixed 是最直接的解决方案，但 position: sticky 也是一个值得了解的替代方案。position: sticky 元素在默认情况下表现为 position: relative，但在滚动到特定阈值时会变为 position: fixed。例如，一个导航栏在页面顶部时是流动的，但当它滚动到视口顶部时会“粘”在那里。

/* 示例：粘性定位 */
.sticky-header {
  position: sticky;
  top: 0; /* 当元素顶部到达视口顶部时，固定 */
  background-color: lightblue;
  padding: 10px;
  z-index: 100; /* 确保在其他内容之上 */
}

登录后复制

对于本教程中始终固定在左侧的技能列表，position: fixed 是更合适的选择。

3. 处理主内容区域的布局

当一个元素被 position: fixed 定位后，它会脱离正常的文档流。这意味着页面上的其他元素会表现得像这个固定元素不存在一样，可能会被固定元素覆盖。为了避免主内容区域被左侧的固定侧边栏遮挡，我们需要调整主内容区域的位置。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

最常见的做法是给主内容容器设置一个与侧边栏宽度相等的 margin-left 或 padding-left。

/* styles.css */
body {
  margin: 0; /* 移除默认的body外边距 */
  font-family: Arial, sans-serif;
  display: flex; /* 使用Flexbox进行整体布局 */
}

.main-content {
  margin-left: 200px; /* 留出与侧边栏宽度相同的左边距 */
  flex-grow: 1; /* 占据剩余所有空间 */
  padding: 20px;
  line-height: 1.6;
}

.main-content h2 {
  margin-top: 0;
  color: #0056b3;
}

登录后复制

结合HTML结构：

<!-- index.html -->
<body>
  <div class="fixed-sidebar">
    <h3>我的技能</h3>
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript</li>
      <li>React</li>
      <li>Node.js</li>
      <li>Git</li>
      <li>SQL</li>
      <li>Python</li>
      <li>UI/UX Design</li>
    </ul>
  </div>

  <div class="main-content">
    <h2>个人简介</h2>
    <p>我是一名热衷于Web开发的工程师，专注于前端技术栈，拥有丰富的项目经验。我致力于构建用户友好、高性能的Web应用程序。</p>

    <h2>工作经历</h2>
    <div class="experience-item">
      <h3>高级前端工程师 - 某科技公司 (2020 - 至今)</h3>
      <ul>
        <li>负责核心产品的Web前端开发与维护。</li>
        <li>参与UI/UX设计评审，提供技术可行性建议。</li>
        <li>主导组件库开发，提升团队开发效率。</li>
      </ul>
    </div>
    <div class="experience-item">
      <h3>前端开发工程师 - 另一家公司 (2017 - 2020)</h3>
      <ul>
        <li>参与多个项目的需求分析、设计与开发。</li>
        <li>优化前端性能，提升页面加载速度。</li>
      </ul>
    </div>

    <h2>教育背景</h2>
    <p>某大学 - 计算机科学学士 (2013 - 2017)</p>
    <!-- 更多内容... -->
    <p style="height: 1000px; background-color: #f0f0f0; padding: 20px;">
      这里是更多的主内容，用于演示页面滚动效果。
    </p>
  </div>
</body>

登录后复制

4. 完整的代码示例

将上述CSS和HTML结合起来，我们可以得到一个功能完整的简历页面布局。

4.1 index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的简历</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="fixed-sidebar">
    <h3>我的技能</h3>
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript (ES6+)</li>
      <li>React.js</li>
      <li>Node.js</li>
      <li>Git & GitHub</li>
      <li>SQL</li>
      <li>Python (基础)</li>
      <li>UI/UX Design Principles</li>
      <li>Responsive Design</li>
      <li>Web Performance Optimization</li>
    </ul>
  </div>

  <div class="main-content">
    <h1>张三的简历</h1>

    <section>
      <h2>个人简介</h2>
      <p>我是一名经验丰富的Web前端开发工程师，专注于构建高性能、用户友好的Web应用程序。我熟练掌握现代前端技术栈，并对后端开发也有一定了解。我致力于通过技术解决实际问题，并不断学习和探索新的技术。</p>
    </section>

    <section>
      <h2>工作经历</h2>
      <div class="experience-item">
        <h3>高级前端工程师 - 创新科技公司 (2020年7月 - 至今)</h3>
        <ul>
          <li>负责核心SaaS产品的Web前端架构设计与开发，提升系统可维护性和可扩展性。</li>
          <li>主导并实现公司级UI组件库的开发与维护，使开发效率提升30%。</li>
          <li>参与跨职能团队协作，与产品经理、设计师和后端工程师紧密合作，确保项目高质量交付。</li>
          <li>优化前端性能，通过代码分割、懒加载等技术，将页面加载时间缩短20%。</li>
        </ul>
      </div>
      <div class="experience-item">
        <h3>前端开发工程师 - 领先软件公司 (2017年9月 - 2020年6月)</h3>
        <ul>
          <li>参与多个Web项目的需求分析、设计与实现，包括企业官网和内部管理系统。</li>
          <li>负责前端功能模块的开发与单元测试，确保代码质量。</li>
          <li>与设计团队协作，将UI/UX设计稿转化为高质量的Web界面。</li>
        </ul>
      </div>
    </section>

    <section>
      <h2>教育背景</h2>
      <p><strong>XX大学</strong> - 计算机科学与技术学士 (2013年9月 - 2017年7月)</p>
      <ul>
        <li>主修课程：数据结构、算法、操作系统、计算机网络、软件工程。</li>
        <li>获得校级优秀毕业生称号。</li>
      </ul>
    </section>

    <section>
      <h2>项目经验</h2>
      <div class="project-item">
        <h3>在线学习平台 (个人项目)</h3>
        <p><strong>技术栈：</strong> React, Node.js, Express, MongoDB</p>
        <p><strong>描述：</strong> 开发了一个全栈在线学习平台，包含用户认证、课程管理、视频播放和学习进度跟踪等功能。</p>
      </div>
      <div class="project-item">
        <h3>电商后台管理系统</h3>
        <p><strong>技术栈：</strong> Vue.js, Element UI, Axios</p>
        <p><strong>描述：</strong> 负责开发商品管理、订单管理、用户管理等模块，提高运营效率。</p>
      </div>
    </section>

    <section>
      <h2>联系方式</h2>
      <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
      <p>LinkedIn：<a href="https://www.linkedin.com/in/zhangsan" target="_blank">linkedin.com/in/zhangsan</a></p>
      <p>GitHub：<a href="https://github.com/zhangsan" target="_blank">github.com/zhangsan</a></p>
    </section>

    <!-- 额外内容，用于演示滚动 -->
    <div style="height: 500px; background-color: #e6f7ff; padding: 20px; margin-top: 30px; border-radius: 8px;">
      <h3>滚动演示区</h3>
      <p>此区域用于填充内容，以便您可以看到左侧技能列表在页面滚动时始终保持固定。</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus auctor iaculis. Fusce eu diam at metus eleifend fermentum.</p>
    </div>
  </div>
</body>
</html>

登录后复制

4.2 styles.css

/* 通用样式 */
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  display: flex; /* 使用Flexbox进行整体布局 */
  min-height: 100vh; /* 确保body至少占满视口高度 */
}

/* 固定侧边栏样式 */
.fixed-sidebar {
  width: 250px; /* 侧边栏宽度 */
  height: 100vh; /* 侧边栏高度占满整个视口 */
  background-color: #2c3e50; /* 深色背景 */
  color: #ecf0f1; /* 浅色文字 */
  position: fixed; /* 固定定位 */
  top: 0; /* 距离视口顶部0 */
  left: 0; /* 距离视口左侧0 */
  padding: 25px 20px; /* 内边距 */
  box-sizing: border-box; /* 边框盒模型 */
  overflow-y: auto; /* 如果内容过多，允许垂直滚动 */
  box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* 阴影效果 */
  z-index: 1000; /* 确保在其他内容之上 */
}

.fixed-sidebar h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.5em;
  color: #3498db; /* 标题颜色 */
  text-align: center;
}

.fixed-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fixed-sidebar li {
  margin-bottom: 12px;
  font-size: 1.1em;
  line-height: 1.4;
}

/* 主内容区域样式 */
.main-content {
  margin-left: 250px; /* 留出与侧边栏宽度相同的左边距 */
  flex-grow: 1; /* 占据剩余所有空间 */
  padding: 40px;
  max-width: 900px; /* 限制主内容最大宽度 */
  margin-right: auto; /* 居中主内容区域 */
  margin-left: 250px; /* 再次确保左边距 */
}

.main-content h1 {
  font-size: 2.8em;
  color: #2c3e50;
  margin-bottom: 30px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.main-content h2 {
  font-size: 2em;
  color: #34495e;
  margin-top: 40px;
  margin-bottom: 20px;
}

.main-content h3 {
  font-size: 1.4em;
  color: #2980b9;
  margin-top: 25px;
  margin-bottom: 10px;
}

.main-content p {
  margin-bottom: 15px;
  line-height: 1.7;
}

.main-content ul {
  list-style: disc;
  margin-left: 25px;
  margin-bottom: 15px;
}

.main-content li {
  margin-bottom: 8px;
}

.experience-item, .project-item {
  margin-bottom: 30px;
  border-left: 4px solid #3498db;
  padding-left: 15px;
}

.experience-item h3, .project-item h3 {
  margin-top: 0;
  color: #2980b9;
}

.main-content a {
  color: #3498db;
  text-decoration: none;
}

.main-content a:hover {
  text-decoration: underline;
}

/* 响应式设计考虑 */
@media (max-width: 768px) {
  body {
    flex-direction: column; /* 小屏幕下侧边栏和主内容垂直堆叠 */
  }

  .fixed-sidebar {
    position: relative; /* 侧边栏变为相对定位，不再固定 */
    width: 100%; /* 宽度占满 */
    height: auto; /* 高度自适应内容 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 15px;
  }

  .fixed-sidebar h3 {
    text-align: left;
    margin-bottom: 10px;
  }

  .main-content {
    margin-left: 0; /* 移除左边距 */
    padding: 20px;
  }
}

登录后复制

5. 注意事项与最佳实践

脱离文档流: position: fixed 会使元素脱离文档流，因此务必通过 margin 或 padding 为其他内容留出空间，防止遮盖。
层叠上下文 (z-index): 固定定位的元素可能会与其他元素重叠。如果需要控制它们的堆叠顺序，可以使用 z-index 属性。较高的 z-index 值意味着元素会显示在较低 z-index 值的元素之上。
响应式设计: 在小屏幕设备上，固定侧边栏可能会占用过多空间，影响内容显示。建议使用媒体查询（@media）在不同屏幕尺寸下调整布局。例如，在移动设备上将固定侧边栏改为顶部导航栏或隐藏起来，只在需要时显示。在上述示例中，我们提供了一个简单的响应式调整，将侧边栏变为相对定位并占据全部宽度。
性能: 过度使用 position: fixed 或在固定元素内部包含大量动画可能会影响页面滚动性能，但对于简单的侧边栏通常不是问题。
无框架起步: 对于Web开发新手，建议先从纯CSS开始学习这些基本布局概念，而不是直接依赖Bootstrap等CSS框架。理解底层原理有助于更好地使用框架，并在没有框架时也能独立解决布局问题。
Viewport 单位: 使用 vh (viewport height) 单位可以方便地让元素的高度占据整个浏览器视口的高度，例如 height: 100vh。

总结

通过本教程，您应该已经掌握了如何使用CSS的 position: fixed 属性来创建一个固定在左侧的技能列表容器，并合理布局右侧的主内容区域。理解 position: fixed 的工作原理及其对文档流的影响，并结合 margin-left 来调整主内容区域，是实现这种常见Web布局的关键。同时，也要注意响应式设计和层叠上下文等因素，以构建健壮且用户友好的网页。

以上就是Web布局教程：创建固定左侧容器展示技能列表的详细内容，更多请关注php中文网其它相关文章！