首页html横向交互导航栏

html横向交互导航栏

时间: 2023-11-22 20:48:27 浏览: 132

以下是一个简单的HTML横向交互导航栏的例子： ```html <!DOCTYPE html> <html> <head> <title>横向交互导航栏</title> <style> .nav { display: flex; justify-content: space-between; align-items: center; background-color: #f2f2f2; padding: 10px; } .nav a { color: #333; text-decoration: none; margin-right: 20px; font-size: 18px; font-weight: bold; transition: color 0.3s ease-in-out; } .nav a:hover { color: #f00; } .active { color: #f00; } </style> </head> <body> <div class="nav"> <a href="#" class="active">首页</a> <a href="#">新闻</a> <a href="#">娱乐</a> <a href="#">体育</a> <a href="#">科技</a> <a href="#">财经</a> <a href="#">时尚</a> </div> </body> </html> ``` 这个例子使用了flex布局来实现横向排列，并使用了CSS过渡效果来实现鼠标悬停时的颜色变化。同时，通过给当前选中的导航项添加一个`active`类来实现选中状态的样式。

阅读全文