html底部导航栏代码
当创建一个底部导航栏时，你可以使用HTML和CSS。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
position: fixed;
bottom: 0;
width: 100%;
}
footer a {
color: white;
text-decoration: none;
padding: 8px 16px;
}
footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Your page content goes here -->
<footer>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</footer>
</body>
</html>
这是一个基本的底部导航栏，你可以根据自己的需求进行修改。在这个例子中，底部导航栏固定在页面底部，包含三个链接。你可以通过修改样式和链接来适应你的项目。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha384-q8i/X+965DzO0rT8Gz6pL5cf5u7W2FdX4zstmaAWLbR6pugW+6F4hx9XN1a5KO8J" crossorigin="anonymous">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
position: fixed;
bottom: 0;
width: 100%;
}
footer a {
color: white;
text-decoration: none;
padding: 8px 16px;
display: inline-block;
}
footer a:hover {
text-decoration: underline;
}
footer i {
margin-right: 5px;
}
</style>
</head>
<body>
<!-- Your page content goes here -->
<footer>
<a href="#"><i class="fas fa-home"></i> Home</a>
<a href="#"><i class="fas fa-info-circle"></i> About</a>
<a href="#"><i class="fas fa-envelope"></i> Contact</a>
<a href="#"><i class="fab fa-facebook"></i> Facebook</a>
<a href="#"><i class="fab fa-twitter"></i> Twitter</a>
<a href="#"><i class="fab fa-instagram"></i> Instagram</a>
</footer>
</body>
</html>
在这个例子中，我使用了 Font Awesome 图标库来添加一些图标，你可以根据需要选择其他图标库或使用自己的图标。这个例子也添加了一些社交媒体链接。你可以根据你的具体需求和设计来进一步自定义底部导航栏。
