HTML+CSS 轻松实现小米风格垂直导航栏（附代码示例）

以下是一个使用 HTML 和 CSS 实现小米风格垂直导航栏的简单示例： ```html <!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; } nav { width: 200px; background-color: #f1f1f1; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { border-bottom: 1px solid #ddd; } nav ul li a { display: block; padding: 16px; text-decoration: none; color: #333; } nav ul li a:hover { background-color: #ddd; } </style> </head> <body> <nav> <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> </ul> </nav> </body> </html> ``` 在上述代码中，我们首先在 CSS 中设置了导航栏的基本样式，包括宽度、颜色等。然后，通过 `ul` 和 `li` 列表来创建导航项目，并使用 `a` 标签作为链接。通过 `hover` 伪类实现鼠标悬停效果。你可以根据实际需求进一步修改样式和添加更多的导航项目。 ######[AI写代码神器 | 390点数解答 | 2024-11-04 15:40:01]

服务商

更多选项

快捷项

自定义