- 标签和
- 标签来创建菜单项,如下所示:
接下来,我们需要使用CSS样式来设置菜单栏的样式,包括背景颜色、字体颜色、悬停样式等。我们可以使用以下代码来设置侧边栏样式:<ul class="sidebar"> <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>
在这个样式中,我们首先将侧边栏设置为固定位置,并且将其宽度设置为200px,以使其在不同大小的设备上呈现相同的样式。然后,我们设置了菜单项的样式,包括内边距、边框圆角和背景颜色。当鼠标悬停在菜单项上时,我们将其背景颜色设置为灰色,以提供视觉反馈。最后,我们使用.active类来设置当前被选中的菜单项的样式,以使其在不同页面上保持一致。 以上是设置小米侧边栏的HTML和CSS代码,并且通过在页面中引用即可实现小米官网菜单的样式。.sidebar { background-color: #fff; padding: 20px; position: fixed; top: 0; bottom: 0; left: 0; width: 200px; } .sidebar li { margin-bottom: 10px; padding: 5px; border-radius: 5px; } .sidebar li a { color: #333; text-decoration: none; } .sidebar li:hover { background-color: #f5f5f5; } .sidebar li.active { background-color: #333; color: #fff; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。