html、css制作小米商城左侧导航栏

以下是一个简单的 HTML 和 CSS 代码示例，可以制作出类似小米商城左侧导航栏的效果。

HTML 代码：

<div class="sidebar">
  <ul>
    <li><a href="#">手机</a></li>
    <li><a href="#">电视</a></li>
    <li><a href="#">笔记本</a></li>
    <li><a href="#">家电</a></li>
    <li><a href="#">智能</a></li>
    <li><a href="#">路由器</a></li>
    <li><a href="#">生活周边</a></li>
  </ul>
</div>

CSS 代码：

.sidebar {
  background-color: #f5f5f5;
  height: 100%;
  width: 200px;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
}

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

li {
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
}

li:last-child {
  border-bottom: none;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #ff6700;
}

说明：

- `.sidebar` 类是整个导航栏的容器，使用了 `position: fixed;` 使其固定在页面左侧，`overflow-y: auto;` 可以让内容超出高度时出现滚动条。
- `ul` 和 `li` 标签用于构建导航栏的列表，使用了 `list-style-type: none;` 去掉了默认的列表样式，`border-bottom` 属性创建了每个列表项之间的分隔线。
- `a` 标签用于制作链接，使用了常规的文本样式和鼠标悬停样式。
- 这只是一个简单的示例，具体的样式和布局可以根据实际需求进行调整。