使用html完成导航栏的制作,要求导航栏目为8个且有超链接,导航栏为黑底白字背景为紫色
时间: 2024-06-06 20:08:11 浏览: 14
<!DOCTYPE html>
<html>
<head>
<title>导航栏</title>
<style type="text/css">
nav {
background-color: #4b0082;
color: #ffffff;
padding: 10px;
display: flex;
justify-content: space-around;
}
nav a {
color: #ffffff;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">娱乐</a>
<a href="#">体育</a>
<a href="#">科技</a>
<a href="#">财经</a>
<a href="#">时尚</a>
<a href="#">游戏</a>
</nav>
</body>
</html>
相关问题
使用html完成导航栏的制作,要求导航栏目为8个,导航栏为黑底白字
<!DOCTYPE html>
<html>
<head>
<title>导航栏</title>
<style type="text/css">
nav{
background-color: black;
color: white;
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 10px;
}
nav a{
color: white;
text-decoration: none;
margin: 0 10px;
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">娱乐</a>
<a href="#">体育</a>
<a href="#">科技</a>
<a href="#">财经</a>
<a href="#">汽车</a>
<a href="#">游戏</a>
</nav>
</body>
</html>
导航栏有若干个栏目,点击其中一个 让它背景变色,其他的都为原始颜色
可以使用 JavaScript 来实现这个功能。首先,为每个导航栏项目添加一个点击事件,当用户点击时,将该项目的背景色改变,同时将其他项目的背景色改回原始颜色。以下是一个简单的示例代码:
HTML 代码:
```html
<ul class="nav">
<li class="nav-item active">首页</li>
<li class="nav-item">新闻</li>
<li class="nav-item">产品</li>
<li class="nav-item">关于我们</li>
</ul>
```
CSS 代码:
```css
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav-item {
display: inline-block;
padding: 10px 20px;
cursor: pointer;
}
.nav-item.active {
background-color: #ccc;
}
```
JavaScript 代码:
```javascript
var navItems = document.querySelectorAll('.nav-item');
for (var i = 0; i < navItems.length; i++) {
var item = navItems[i];
item.addEventListener('click', function() {
// 将所有项目的背景色恢复为原始颜色
for (var j = 0; j < navItems.length; j++) {
navItems[j].classList.remove('active');
}
// 将当前项目的背景色改变
this.classList.add('active');
});
}
```
当用户点击某个导航栏项目时,JavaScript 代码会遍历所有项目,将它们的背景色恢复为原始颜色,然后将当前项目的背景色改变为指定的颜色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)