[分享]css中导航条固定在底部

CSS中，我们可以使用position和bottom属性来实现导航条固定在底部的效果。具体实现方式如下：

nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav li {
  display: inline-block;
  margin: 0 10px;
}

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

上述代码中，我们首先对导航条进行了定位，使用position: fixed属性将其固定在底部。同时，我们也设置了bottom: 0来确保导航条与屏幕底部保持一定的间距。

接下来，我们对导航条的宽度、背景颜色、文字颜色等进行了样式设置。nav ul中我们对无序列表进行了样式重置，使其不带任何符号并能够水平居中显示。nav li则设置为inline-block，使其能够横向排列。nav a则设置为块级元素，再对其宽度、内边距、文字颜色等进行样式设置，使其看起来更具美观性。