[分享]css做左侧工具菜单栏

CSS做左侧工具菜单栏.left-menu { width: 200px; height: 100%; background-color: #f1f1f1; position: fixed; top: 0; left: 0; padding: 20px; } .left-menu ul { list-style: none; margin: 0; padding: 0; } .left-menu ul li { margin-bottom: 10px; } .left-menu ul li a { color: #333; text-decoration: none; font-size: 18px; } .left-menu ul li a:hover { color: #000; }

CSS做左侧工具菜单栏的方法很简单。我们可以使用定位和样式来实现。下面是一个简单的例子：

<div class="left-menu">
  <ul>
    <li><a href="#">菜单项一</a></li>
    <li><a href="#">菜单项二</a></li>
    <li><a href="#">菜单项三</a></li>
  </ul>
</div> 

上面的代码会生成一个宽度为200px，高度为100%的左侧工具菜单栏。菜单项会垂直排列，并且每个菜单项之间会有10px的间距。当鼠标移动到菜单项上方时，文字会变成黑色。

你可以根据自己的需求修改这段代码。例如，你可以改变菜单项的颜色，字体大小和样式。如果你想让菜单栏固定在页面上方，你可以将“position”属性设置为“fixed”。