手机html底部导航源码
时间: 2023-10-11 21:05:57 浏览: 62
以下是一个简单的手机 HTML 底部导航栏的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML Bottom Navigation Bar</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.navbar {
display: flex;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
display: block;
color: #fff;
text-align: center;
padding: 15px;
flex: 1;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: #333;
}
.active {
background-color: #4CAF50;
color: #fff;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">Search</a>
<a href="#">Profile</a>
<a href="#">Settings</a>
</div>
</body>
</html>
```
该代码定义了一个固定在底部的导航栏,并使用 flexbox 布局使其自适应屏幕宽度。每个导航链接都是一个带有 padding 和 flex 属性的块级元素。当用户悬停在导航链接上时,背景色会变为灰色,文本颜色会变为黑色。当前活动链接的背景色为绿色,文本颜色为白色。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)