html实现横向导航条代码示例

涛哥
Html代码

以下是一个使用 HTML 和 CSS 实现横向导航条的示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>横向导航条</title>
	<style>
		/* 设置导航条的样式 */
		.navbar {
			list-style-type: none; /* 去掉列表样式 */
			margin: 0; /* 去掉列表的外边距 */
			padding: 0; /* 去掉列表的内边距 */
			overflow: hidden; /* 隐藏溢出的导航项 */
			background-color: #333; /* 设置导航条的背景颜色 */
		}

		/* 设置导航项的样式 */
		.navbar li {
			float: left; /* 设置导航项左浮动 */
		}

		/* 设置导航项链接的样式 */
		.navbar li a {
			display: block; /* 把链接设置成块级元素 */
			color: #f2f2f2; /* 设置链接的字体颜色 */
			text-align: center; /* 设置链接的文本居中 */
			padding: 14px 16px; /* 设置链接的内边距 */
			text-decoration: none; /* 去掉链接的下划线 */
		}

		/* 设置鼠标悬停在导航项上的样式 */
		.navbar li a:hover {
			background-color: #ddd; /* 设置链接的背景颜色 */
			color: black; /* 设置链接的字体颜色 */
		}
	</style>
</head>
<body>
	<!-- 导航条 -->
	<ul class="navbar">
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>
</body>
</html>

在这个横向导航条代码示例中，使用了一个无序列表（ul）来创建导航条。CSS 样式设置了导航条和导航项的样式，包括背景颜色、字体颜色、对齐方式和内边距等。导航项的链接使用了块级元素，并且在鼠标悬停时会更改链接的背景颜色和字体颜色。

您可以根据需要自定义导航条的样式和链接的数量和文本。同时，您也可以通过调整 CSS 样式来改变导航条的外观和行为。

猜你喜欢：

html和css实现一个三角形代码示例

html实现二级菜单代码示例

 
  • 二级菜单
  • 三角形
  • 背景颜色
  • 横向导航条