用 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: 10px 15px; 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> ``` 在上述代码中，我们使用 HTML 创建了一个导航栏的结构，使用 CSS 对其进行样式设置，包括宽度、颜色、边框、链接样式等，以实现一个简单的垂直导航栏效果。您可以根据实际需求进一步修改样式和内容。 ######[AI写代码神器 | 376点数解答 | 2024-11-04 15:55:38]

服务商

更多选项

快捷项

自定义