html5底部导航栏代码
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>底部导航栏示例</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
footer a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
</style>
</head>
<body>
<!-- 页面内容放在这里 -->
<footer>
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</footer>
</body>
</html>
这个例子中，<footer> 元素包含了四个链接，代表底部导航栏的不同部分。你可以根据自己的需求修改链接的文本和链接地址。CSS样式用于设置底部导航栏的背景颜色、文字颜色等样式。你可以根据自己的设计需求进行进一步的定制。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>底部导航栏示例</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #f1f1f1;
padding: 15px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
footer a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
</style>
</head>
<body>
<header>
<h1>网页标题</h1>
</header>
<main>
<p>这里是网页的主体内容。你可以在这里添加更多的文本、图像、表格等。</p>
</main>
<footer>
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</footer>
</body>
</html>
在这个例子中，<header> 元素包含网页的标题，<main> 元素包含网页的主体内容。你可以根据需要在 <main> 元素中添加更多的 HTML 内容。
