能者 发表于 2023-8-30 13:00:00

使用CSS实现固定定位的侧边栏


要实现固定定位的侧边栏,可以使用CSS中的`position: fixed`属性。以下是一个简单的示例代码:
<!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>


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

页: [1]
查看完整版本: 使用CSS实现固定定位的侧边栏