数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 CSS 创建药丸式导航菜单？
药丸式导航菜单用于导航并增强用户体验。导航项目设置在其内。<nav> 元素用于创建菜单，并且与药丸式导航菜单的工作方式相同。让我们看看如何在网页上创建药丸式导航菜单。
创建药丸式导航菜单
首先，我们将使用 <nav> 元素创建一个菜单。链接使用 <a> 元素设置 -
<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>
菜单定位
菜单使用 `overflow` 属性（值为 `auto`）进行定位。高度也设置为 `auto` -
nav{
width: 100%;
background-color: rgb(255, 251, 251);
overflow: auto;
height: auto;
}
放置链接
使用 `display` 属性将链接放置在菜单中。`inline-block` 将水平设置链接。链接通常带下划线。为避免这种情况，请使用 `text-decoration` 属性并将其设置为 `none` -
.links {
display: inline-block;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
color:black;
}
鼠标悬停链接
使用 `:hover` 选择器设置悬停属性。悬停时，背景颜色将更改 -
.links:hover {
background-color: rgba(129, 129, 129, 0.473);
}
选定的链接
选中时，链接的背景色和文字颜色将更改 -
.selected{
background-color: rgb(33, 126, 255);
color: rgb(255, 255, 255);
}
示例
以下是使用 CSS 创建药丸式导航菜单的代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML 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>
更新于：2023年12月8日
832 次浏览
广告