html顶部导航代码
时间: 2023-09-01 08:04:54 浏览: 55
HTML顶部导航代码是用来创建一个网页的页面顶部导航菜单的代码。顶部导航通常位于网页的顶部,用于为用户提供网站的主要导航链接。以下是一个简单的HTML顶部导航代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
/* 样式可以通过CSS来定义 */
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</div>
<!-- 其他页面内容 -->
</body>
</html>
```
这段代码首先定义了一个包含顶部导航的div元素,并赋予其类名为"topnav"。然后,在样式部分使用CSS定义了顶部导航的样式,包括背景颜色、链接的浮动、颜色等等。链接的active类用于表示当前所在页面的链接。
在body部分,将顶部导航放置在一个div元素内,然后通过添加多个`<a>`元素来创建导航链接。
这段代码的效果是创建一个顶部导航,包含了"首页"、"关于"、"服务"和"联系"四个链接。当鼠标悬停在链接上时,链接的背景颜色会变为灰色,字体颜色变为黑色。当前所在页面的链接("首页")的背景颜色会变为绿色,字体颜色变为白色。
相关推荐
![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)
![](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)