以下是一个使用 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 样式来改变导航条的外观和行为。
猜你喜欢：
评论