html横向交互导航栏
时间: 2023-11-22 07:48:27 浏览: 43
以下是一个简单的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`类来实现选中状态的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)