如何 - 药丸导航
了解如何使用 CSS 创建药丸导航菜单。
药丸导航
创建药丸导航
步骤 1) 添加 HTML
示例
<div class="pill-nav">
<a class="active" href="#home">主页</a>
<a href="#news">新闻</a>
<a href="#contact">联系我们</a>
<a href="#about">关于</a>
</div>
步骤 2) 添加 CSS
示例
/* 样式化药丸导航菜单中的链接 */
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
/* 更改鼠标悬停时链接的颜色 */
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
/* 为活动/当前链接添加颜色 */
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
亲自试一试 »
垂直药丸导航
添加 display: block 到链接，它们将垂直显示而不是水平显示
提示： 另请参阅 如何创建顶部导航菜单.
提示： 访问我们的 CSS 导航栏教程，了解更多关于导航栏的信息。
