如何使用 CSS 创建胶囊导航菜单?

cssweb developmentfront end technology更新于 2025/9/28 1:16:17

以下是使用 CSS 创建胶囊导航菜单的代码 −

示例

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document </title>
<style>
nav{
   width: 100%;
   background-color: rgb(255, 251, 251);
   overflow: auto;
   height: auto;
}
.links {
   display: inline-block;
   text-align: center;
   padding: 14px;
   text-decoration: none;
   font-size: 17px;
   border-radius: 5px;
   color:black;
}
.links:hover {
   background-color: rgba(129, 129, 129, 0.473);
}
.selected{
   background-color: rgb(33, 126, 255);
   color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1> Pill navigation example </h1>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</body>
</html>