首页 > 文章 > 前端

如何用HTML制作简单侧边栏布局

时间：2025-07-31 18:40:47 441浏览收藏

想要为你的网站添加一个清晰、易用的侧边栏吗？本文将手把手教你如何使用HTML和CSS打造一个简单的侧边栏布局。侧边栏是网页设计中常见的元素，通常用于导航、信息展示等，位于页面一侧。本文从HTML结构入手，讲解如何使用`aside`和`main`标签划分页面结构，并利用CSS的`float`或`position:fixed`属性实现灵活的布局和固定定位效果。同时，还会介绍如何通过媒体查询实现响应式设计，确保侧边栏在不同屏幕尺寸下都能良好展示，包括移动端设备。通过本文，你将掌握创建美观、实用的侧边栏的技巧，提升用户体验。

侧边栏可通过HTML结构与CSS样式实现，首先使用aside和main标签划分结构，再通过float或position:fixed实现布局与固定定位，结合媒体查询实现响应式设计，具体步骤为：1. 创建包含container、sidebar和main-content的HTML结构；2. 使用CSS设置宽度、浮动或固定定位控制布局；3. 在媒体查询中针对小屏幕调整为垂直堆叠布局，确保移动端可用性。

如何用HTML制作一个简单的侧边栏？侧边栏布局方案

侧边栏，简单来说，就是网页上常常见到的，位于页面一侧（通常是左侧或右侧）的导航或信息展示区域。用HTML实现它，核心在于结构划分和CSS样式控制。

侧边栏布局方案

首先，HTML结构是基础。我们需要一个容器来包裹整个页面，然后将页面分成两部分：侧边栏和主要内容区域。

<!DOCTYPE html>
<html>
<head>
<title>简单侧边栏示例</title>
<style>
/* CSS样式稍后补充 */
</style>
</head>
<body>
  <div class="container">
    <aside class="sidebar">
      <!-- 侧边栏内容 -->
      <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
      </ul>
    </aside>
    <main class="main-content">
      <!-- 主要内容区域 -->
      <h1>主要内容标题</h1>
      <p>这里是主要内容区域的文本。</p>
    </main>
  </div>
</body>
</html>

关键点在于container、aside（侧边栏）和main（主要内容）。aside标签语义化地表示与主要内容相关的辅助信息，很适合做侧边栏。

接下来是CSS。布局的核心在于控制container、aside和main的宽度和浮动方式。

.container {
  width: 80%; /* 页面总宽度 */
  margin: 0 auto; /* 居中显示 */
  overflow: hidden; /* 清除浮动 */
}

.sidebar {
  width: 20%; /* 侧边栏宽度 */
  float: left; /* 左浮动 */
  background-color: #f0f0f0; /* 侧边栏背景色 */
  padding: 20px;
}

.main-content {
  width: 75%; /* 主要内容区域宽度 */
  float: right; /* 右浮动 */
  padding: 20px;
}

ul {
  list-style-type: none; /* 移除列表默认样式 */
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none; /* 移除链接下划线 */
  color: #333;
}

这里使用了float属性来实现左右布局。需要注意的是，为了防止浮动导致父元素高度塌陷，使用了overflow: hidden来清除浮动。

侧边栏内容如何更丰富，不仅仅是链接？

除了简单的链接列表，侧边栏还可以包含其他类型的内容，例如：

搜索框： 一个简单的<input type="search">加上一个搜索按钮。
图片： 展示一些相关的图片，可以用标签。
广告： 嵌入广告代码，如果需要的话。
自定义HTML： 放置任何你想要的HTML内容，比如近期文章列表、标签云等等。

关键在于aside标签内的内容可以自由组合，根据需求添加。

如何让侧边栏固定在屏幕上，滚动时始终可见？

可以使用position: fixed来实现。修改.sidebar的CSS：

.sidebar {
  width: 20%;
  position: fixed; /* 固定定位 */
  top: 0; /* 距离顶部0像素 */
  left: 0; /* 距离左侧0像素 */
  height: 100%; /* 充满整个屏幕高度 */
  background-color: #f0f0f0;
  padding: 20px;
  overflow-y: auto; /* 如果内容超出高度，则显示滚动条 */
}

.main-content {
  width: 75%;
  float: right;
  padding: 20px;
  margin-left: 25%; /* 留出侧边栏的空间 */
}

.container {
  width: 100%; /* 页面总宽度 */
  margin: 0; /* 移除居中显示 */
  overflow: visible; /* 清除浮动 */
}

注意几个关键点：

position: fixed：将侧边栏固定在屏幕上。
top: 0; left: 0; height: 100%;：让侧边栏占据整个屏幕的高度，并位于左上角。
overflow-y: auto;：如果侧边栏内容超出屏幕高度，则显示垂直滚动条。
margin-left: 25%;：main-content需要留出侧边栏的空间，避免内容被遮挡。
container宽度设置为100%，并且取消居中。

响应式设计：如何在不同屏幕尺寸下调整侧边栏的布局？

响应式设计是现代网页开发的标配。可以使用CSS媒体查询来实现不同屏幕尺寸下的布局调整。

@media (max-width: 768px) {
  .container {
    width: 100%; /* 小屏幕下占据全部宽度 */
  }

  .sidebar {
    width: 100%; /* 小屏幕下侧边栏占据全部宽度 */
    float: none; /* 取消浮动 */
    position: static; /* 取消固定定位 */
    height: auto; /* 高度自适应 */
    margin-left: 0;
  }

  .main-content {
    width: 100%; /* 小屏幕下主要内容区域占据全部宽度 */
    float: none; /* 取消浮动 */
    margin-left: 0; /* 移除左边距 */
  }
}

这段代码表示，当屏幕宽度小于768像素时，侧边栏和主要内容区域都占据全部宽度，侧边栏不再浮动，而是位于主要内容区域的上方。可以根据实际情况调整媒体查询的阈值和样式。也可以考虑使用JavaScript来动态调整侧边栏的显示和隐藏，例如，在小屏幕下，点击一个按钮来展开或收起侧边栏。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

前往漫画官网入口并下载 ➜

html CSS 布局响应式设计侧边栏