[分享]css中定位侧边导航栏

CSS中经常使用侧边导航栏来增强网站的交互性和导航性，下面将介绍如何使用CSS来定位侧边导航栏。首先定义一个包含导航栏的div，可以给这个div设置一个特定的类名，如“sidebar”： 菜单项1 ...

CSS中经常使用侧边导航栏来增强网站的交互性和导航性，下面将介绍如何使用CSS来定位侧边导航栏。

首先定义一个包含导航栏的div，可以给这个div设置一个特定的类名，如“sidebar”：

<div class="sidebar">
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div> 

接下来，定义CSS样式来为这个div和ul元素设置宽度和高度，并且定位其在屏幕的位置上：

.sidebar {
  position: fixed; /* 让侧边导航栏固定不动 */
  top: 0; /* 距离顶部距离为0 */
  left: 0; /* 距离左侧距离为0 */
  width: 200px; /* 设置导航栏宽度 */
  height: 100%; /* 设置导航栏高度 */
  background-color: #fff; /* 设置导航栏背景颜色 */
}

.sidebar ul {
  list-style: none; /* 去掉ul的默认样式 */
  padding: 0; /* 去掉ul的内边距 */
  margin: 0; /* 去掉ul的外边距 */
}

.sidebar li {
  padding: 10px; /* 设置每个菜单项的内边距 */
  border-bottom: 1px solid #eee; /* 给每个菜单项添加一条下边线 */
} 

这样，一个简单的侧边导航栏就完成了。你可以根据需要自定义导航栏的样式和菜单项。