用js代码实现手机APP的底部导航栏
时间: 2023-04-09 17:04:26 浏览: 114
可以使用以下代码实现手机APP的底部导航栏:
```
// HTML
<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
// CSS
.navbar {
position: fixed;
bottom: 0;
width: 100%;
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
```
这段代码使用了 HTML 和 CSS 来实现底部导航栏,其中 `.navbar` 类设置了固定定位和底部对齐,`.navbar a` 类设置了浮动、块级显示、颜色、对齐、内边距、文本装饰和字体大小等样式,`.navbar a:hover` 类设置了鼠标悬停时的背景色和字体色,`.navbar a.active` 类设置了当前选中的导航项的背景色和字体色。