CSS 左导航属性

在Web开发中，经常需要添加一个左导航栏，用于导航网站的各个部分。在CSS中，有多个属性可以用于创建左导航栏。

float 属性

float 属性可以让元素向左或向右浮动。在左导航栏中，通常使用 float: left; 让导航栏元素向左浮动。这样，导航栏元素就可以各自占据一行，并且水平排列。

nav {
  float: left;
  width: 200px;
  height: 100%;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: block;
}

nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

position 属性

position 属性可以用于改变元素的位置。在左导航栏中，通常使用 position: fixed; 让导航栏元素固定在浏览器窗口的左侧。这样，即使用户滚动页面，导航栏元素也会一直保持在左侧。

nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: block;
}

nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

flexbox 布局

flexbox 布局是一种用于创建灵活的、响应式的布局的技术。在左导航栏中，可以使用 display: flex; 将导航栏元素排成一行，并使用 flex-direction: column; 让导航栏元素垂直排列。

nav {
  display: flex;
  flex-direction: column;
  width: 200px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: block;
}

nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

总结

以上是三种常见的创建左导航栏的方法。根据实际需求选择合适的方案即可。