数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用CSS创建底部导航菜单？
要创建底部导航菜单，请使用`bottom`和`position`属性设置`nav`元素。将`position`属性设置为`fixed`，`bottom`属性设置为`0px`。底部导航菜单在网页上的显示如下所示。菜单固定在底部，如下所示：
创建导航菜单
首先，设置包含一些菜单项的导航菜单：
<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>
设置导航菜单样式
使用`bottom`和`position` CSS属性设置导航菜单样式，使其显示在底部：
nav{
position: fixed;
bottom: 0;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
设置菜单链接样式
菜单链接使用`display`属性设置为`inline-block`。它将元素显示为内联块级容器。其余链接文本使用`text-decoration`、`font-size`和`color`属性设置样式：
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
链接悬停颜色
使用`:hover`选择器设置链接悬停样式：
.links:hover {
background-color: rgb(100, 100, 100);
}
设置默认选中链接的样式
默认选中的链接也进行了样式设置。这里是“主页”：
.selected{
background-color: rgb(0, 18, 43);
}
创建底部导航菜单
示例
让我们看看如何创建一个底部导航菜单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0px;
margin-top:10px;
padding: 0px;
}
nav{
position: fixed;
bottom: 0;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected{
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h2>Bottom navigation menu</h2>
<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年10月27日
浏览量：1000+
广告