在很多个人简历、作品集类的Web页面中，固定左侧展示技能列表是常用的布局方案，既能突出核心技能信息，又能让页面结构更清晰。下面我们就一步步实现这个布局效果。
一、基础HTML结构搭建
首先需要搭建页面的基础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="style.css">
</head>
<body>
<!-- 固定左侧技能容器 -->
<div class="fixed-left-container">
<h3>我的技能列表</h3>
<ul class="skill-list">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Vue.js</li>
<li>Node.js</li>
<li>Git版本控制</li>
</ul>
</div>
<!-- 右侧内容区域 -->
<div class="right-content">
<h2>个人介绍</h2>
<p>这里是右侧的内容区域，可以放置个人介绍、项目经历、联系方式等其他信息，内容会自适应左侧固定容器剩余的空间。</p>
<p>当右侧内容超过页面高度时，滚动条只会出现在右侧区域，左侧的技能列表会始终固定在视口中，不会被滚动影响。</p>
</div>
</body>
</html>二、CSS样式设置
接下来通过CSS设置固定左侧容器的样式，核心是使用position: fixed属性让容器固定在左侧，同时给右侧内容设置对应的左边距，避免内容被左侧容器遮挡。
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
}
/* 固定左侧容器样式 */
.fixed-left-container {
position: fixed;
left: 0;
top: 0;
width: 240px;
height: 100vh;
background-color: #f5f5f5;
padding: 20px;
border-right: 1px solid #e0e0e0;
overflow-y: auto;
}
.fixed-left-container h3 {
font-size: 20px;
margin-bottom: 15px;
color: #333;
text-align: center;
}
.skill-list {
list-style: none;
}
.skill-list li {
padding: 10px 15px;
margin-bottom: 8px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #e8e8e8;
color: #555;
font-size: 15px;
}
/* 右侧内容区域样式 */
.right-content {
margin-left: 240px;
padding: 30px;
min-height: 100vh;
}
.right-content h2 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.right-content p {
margin-bottom: 15px;
color: #666;
font-size: 16px;
}三、实现原理说明
整个布局的核心逻辑分为两点：
- 左侧容器使用
position: fixed定位，脱离文档流固定在视口左侧，width设置固定宽度，height: 100vh让容器高度占满整个视口高度。 - 右侧内容区域设置
margin-left等于左侧容器的宽度，这样右侧内容就会从左侧容器右侧开始排列，不会被遮挡，同时右侧内容可以正常滚动，不会影响左侧固定容器。
四、适配优化建议
如果需要适配移动端，可以添加媒体查询，当屏幕宽度小于768px时，取消左侧固定效果，让布局变为上下排列：
@media screen and (max-width: 768px) {
.fixed-left-container {
position: static;
width: 100%;
height: auto;
border-right: none;
border-bottom: 1px solid #e0e0e0;
}
.right-content {
margin-left: 0;
}
}按照以上步骤操作，就能快速实现一个固定左侧容器展示技能列表的Web布局，开发者可以根据实际需求调整容器的宽度、背景色、技能列表的样式等参数，适配不同的页面设计需求。