dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1070|回复: 0

[前端] 使用CSS实现固定定位的侧边栏

[复制链接]

358

主题

374

帖子

1641

积分

荣誉会员

积分
1641

发表于 2023-8-30 13:00:00 | 显示全部楼层 |阅读模式

本站资源全部免费,回复即可查看下载地址!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
image.png
要实现固定定位的侧边栏,可以使用CSS中的`position: fixed`属性。以下是一个简单的示例代码:
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置侧边栏的样式 */
.sidebar {
  position: fixed; /* 固定定位 */
  top: 0; /* 距离顶部的距离 */
  left: 0; /* 距离左侧的距离 */
  width: 200px; /* 侧边栏的宽度 */
  height: 100%; /* 侧边栏的高度 */
  background-color: #f1f1f1; /* 侧边栏的背景颜色 */
}

/* 设置主要内容区域的样式 */
.content {
  margin-left: 200px; /* 将主要内容区域向右移动侧边栏的宽度 */
  padding: 16px; /* 主要内容区域的内边距 */
}
</style>
</head>
<body>

<div class="sidebar">
  <!-- 侧边栏的内容 -->
</div>

<div class="content">
  <!-- 主要内容区域的内容 -->
</div>

</body>
</html>


在上面的代码中,我们设置了

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|小黑屋|dmz社区

GMT+8, 2026-7-29 04:55 , Processed in 0.047023 second(s), 10 queries , Redis On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表