HTML5--底部导航

最新推荐文章于 2023-12-07 12:38:47 发布

AsaZyf

最新推荐文章于 2023-12-07 12:38:47 发布

阅读量8.2k

点赞数 4

分类专栏： HTML5 网页实用文章标签： HTML 底部导航导航

本文链接：https://blog.csdn.net/AsaZyf/article/details/83790836

版权

实用同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

HTML5

17 篇文章 2 订阅

订阅专栏

网页

16 篇文章 0 订阅

订阅专栏

code：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			*{
				margin: 0;
			}
			body{
				font-size: 14px;
				background: #eee;
				padding-bottom: 60px;
				
			}
			a{
				text-decoration: none;
				color: #333;
			}
			
			.footer{
				display: flex;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background: #fff;
				height: 50px;
			}
			.footer .tab{
				flex: 1;
				text-align: center;
				box-sizing: border-box;
				padding: 5px 0;
				
			}
			.icon{
				display: block;
			}
			.icon img{
				width: 16px;
				height: 16px;
			}
			.footer .tab a{
				display: block;
				height: 50px;
				line-height: 20px;
			}
		</style>
	</head>
	<body>		
		<div class="footer">
			<div class="tab">
				<a href="javascript:;">
					
					<i class="icon">
						<img src="data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1024 1024%22%3E%3Cpath d%3D%22M898.8 987.2H695.6c-11.6 0-21-9.4-21-21 0-3.1-.3-319.6-.3-322.8v-.2c0-4.2-1.8-8.1-5-10.9-6-5-15.1-4.3-20.2 1.7-.1.1-.2.2-.2.3l-28 33c-12.3 14.5-30.2 22.8-49.2 22.8H452.4c-19 0-37-8.3-49.2-22.8l-28-33c-.1-.1-.2-.2-.2-.3-5.1-6-14.2-6.7-20.2-1.7-3.2 2.7-5.1 6.7-5 10.9v.2c0 13.1.7 319.7.7 322.8 0 5.6-2.2 10.9-6.2 14.8-3.9 3.9-9.3 6.2-14.8 6.2H125.2C87 987.2 56 956.1 56 918V451c0-36.3 14-66.6 43-92.6.3-.2.5-.5.8-.7L462.4 64C480 48.4 500 40.4 520.3 40.8c19.9.3 39.8 8.7 57.3 24.3l348.7 287.8c.2.2.4.3.6.5 21 18.7 43.2 43.3 41 99.2V918c.1 38.1-31 69.2-69.1 69.2zm-182.3-42h182.2c15 0 27.2-12.2 27.2-27.2V452.1v-.9c1.7-40.8-12.7-53.8-26.7-66.3L550.6 97.2c-.2-.2-.4-.4-.6-.5-20.3-18.1-40.5-18.5-60-1-.3.2-.5.4-.8.7L126.7 390C107.1 407.7 98 427.1 98 451v466.9c0 15 12.2 27.2 27.2 27.2h183.2c-.2-70.9-.7-296.8-.7-301.7-.1-16.8 7.2-32.6 20.1-43.4 23.5-19.6 58.6-16.8 78.7 6.1.1.2.3.3.4.5l28.3 33.4c4.3 5 10.5 7.9 17.2 7.9h119.1c6.7 0 12.9-2.9 17.2-7.9l28.3-33.4c.1-.2.3-.3.4-.5 20.1-23 55.2-25.8 78.7-6.1 12.9 10.8 20.2 26.6 20.1 43.3.1 12.2.3 232.1.3 301.9z%22%2F%3E%3C%2Fsvg%3E" />
					</i>
					
					<span>
						首页
					</span>
					
				</a>
			</div>
			<div class="tab">
				<a href="javascript:;">
					<i class="icon">
						<img src="data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1024 1024%22%3E%3Cpath d%3D%22M898.8 987.2H695.6c-11.6 0-21-9.4-21-21 0-3.1-.3-319.6-.3-322.8v-.2c0-4.2-1.8-8.1-5-10.9-6-5-15.1-4.3-20.2 1.7-.1.1-.2.2-.2.3l-28 33c-12.3 14.5-30.2 22.8-49.2 22.8H452.4c-19 0-37-8.3-49.2-22.8l-28-33c-.1-.1-.2-.2-.2-.3-5.1-6-14.2-6.7-20.2-1.7-3.2 2.7-5.1 6.7-5 10.9v.2c0 13.1.7 319.7.7 322.8 0 5.6-2.2 10.9-6.2 14.8-3.9 3.9-9.3 6.2-14.8 6.2H125.2C87 987.2 56 956.1 56 918V451c0-36.3 14-66.6 43-92.6.3-.2.5-.5.8-.7L462.4 64C480 48.4 500 40.4 520.3 40.8c19.9.3 39.8 8.7 57.3 24.3l348.7 287.8c.2.2.4.3.6.5 21 18.7 43.2 43.3 41 99.2V918c.1 38.1-31 69.2-69.1 69.2zm-182.3-42h182.2c15 0 27.2-12.2 27.2-27.2V452.1v-.9c1.7-40.8-12.7-53.8-26.7-66.3L550.6 97.2c-.2-.2-.4-.4-.6-.5-20.3-18.1-40.5-18.5-60-1-.3.2-.5.4-.8.7L126.7 390C107.1 407.7 98 427.1 98 451v466.9c0 15 12.2 27.2 27.2 27.2h183.2c-.2-70.9-.7-296.8-.7-301.7-.1-16.8 7.2-32.6 20.1-43.4 23.5-19.6 58.6-16.8 78.7 6.1.1.2.3.3.4.5l28.3 33.4c4.3 5 10.5 7.9 17.2 7.9h119.1c6.7 0 12.9-2.9 17.2-7.9l28.3-33.4c.1-.2.3-.3.4-.5 20.1-23 55.2-25.8 78.7-6.1 12.9 10.8 20.2 26.6 20.1 43.3.1 12.2.3 232.1.3 301.9z%22%2F%3E%3C%2Fsvg%3E" />
					</i>
					<span>
						导航
					</span>
					
				</a>
			</div>
			<div class="tab">
				<a href="javascript:;">
					<i class="icon">
						<img src="data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1024 1024%22%3E%3Cpath d%3D%22M898.8 987.2H695.6c-11.6 0-21-9.4-21-21 0-3.1-.3-319.6-.3-322.8v-.2c0-4.2-1.8-8.1-5-10.9-6-5-15.1-4.3-20.2 1.7-.1.1-.2.2-.2.3l-28 33c-12.3 14.5-30.2 22.8-49.2 22.8H452.4c-19 0-37-8.3-49.2-22.8l-28-33c-.1-.1-.2-.2-.2-.3-5.1-6-14.2-6.7-20.2-1.7-3.2 2.7-5.1 6.7-5 10.9v.2c0 13.1.7 319.7.7 322.8 0 5.6-2.2 10.9-6.2 14.8-3.9 3.9-9.3 6.2-14.8 6.2H125.2C87 987.2 56 956.1 56 918V451c0-36.3 14-66.6 43-92.6.3-.2.5-.5.8-.7L462.4 64C480 48.4 500 40.4 520.3 40.8c19.9.3 39.8 8.7 57.3 24.3l348.7 287.8c.2.2.4.3.6.5 21 18.7 43.2 43.3 41 99.2V918c.1 38.1-31 69.2-69.1 69.2zm-182.3-42h182.2c15 0 27.2-12.2 27.2-27.2V452.1v-.9c1.7-40.8-12.7-53.8-26.7-66.3L550.6 97.2c-.2-.2-.4-.4-.6-.5-20.3-18.1-40.5-18.5-60-1-.3.2-.5.4-.8.7L126.7 390C107.1 407.7 98 427.1 98 451v466.9c0 15 12.2 27.2 27.2 27.2h183.2c-.2-70.9-.7-296.8-.7-301.7-.1-16.8 7.2-32.6 20.1-43.4 23.5-19.6 58.6-16.8 78.7 6.1.1.2.3.3.4.5l28.3 33.4c4.3 5 10.5 7.9 17.2 7.9h119.1c6.7 0 12.9-2.9 17.2-7.9l28.3-33.4c.1-.2.3-.3.4-.5 20.1-23 55.2-25.8 78.7-6.1 12.9 10.8 20.2 26.6 20.1 43.3.1 12.2.3 232.1.3 301.9z%22%2F%3E%3C%2Fsvg%3E" />
					</i>
					<span>
						我的
					</span>
					
				</a>
			</div>
			<div class="tab">
				<a href="javascript:;">
					<i class="icon">
						<img src="data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1024 1024%22%3E%3Cpath d%3D%22M898.8 987.2H695.6c-11.6 0-21-9.4-21-21 0-3.1-.3-319.6-.3-322.8v-.2c0-4.2-1.8-8.1-5-10.9-6-5-15.1-4.3-20.2 1.7-.1.1-.2.2-.2.3l-28 33c-12.3 14.5-30.2 22.8-49.2 22.8H452.4c-19 0-37-8.3-49.2-22.8l-28-33c-.1-.1-.2-.2-.2-.3-5.1-6-14.2-6.7-20.2-1.7-3.2 2.7-5.1 6.7-5 10.9v.2c0 13.1.7 319.7.7 322.8 0 5.6-2.2 10.9-6.2 14.8-3.9 3.9-9.3 6.2-14.8 6.2H125.2C87 987.2 56 956.1 56 918V451c0-36.3 14-66.6 43-92.6.3-.2.5-.5.8-.7L462.4 64C480 48.4 500 40.4 520.3 40.8c19.9.3 39.8 8.7 57.3 24.3l348.7 287.8c.2.2.4.3.6.5 21 18.7 43.2 43.3 41 99.2V918c.1 38.1-31 69.2-69.1 69.2zm-182.3-42h182.2c15 0 27.2-12.2 27.2-27.2V452.1v-.9c1.7-40.8-12.7-53.8-26.7-66.3L550.6 97.2c-.2-.2-.4-.4-.6-.5-20.3-18.1-40.5-18.5-60-1-.3.2-.5.4-.8.7L126.7 390C107.1 407.7 98 427.1 98 451v466.9c0 15 12.2 27.2 27.2 27.2h183.2c-.2-70.9-.7-296.8-.7-301.7-.1-16.8 7.2-32.6 20.1-43.4 23.5-19.6 58.6-16.8 78.7 6.1.1.2.3.3.4.5l28.3 33.4c4.3 5 10.5 7.9 17.2 7.9h119.1c6.7 0 12.9-2.9 17.2-7.9l28.3-33.4c.1-.2.3-.3.4-.5 20.1-23 55.2-25.8 78.7-6.1 12.9 10.8 20.2 26.6 20.1 43.3.1 12.2.3 232.1.3 301.9z%22%2F%3E%3C%2Fsvg%3E" />
					</i>
					<span>
						中心
					</span>
					
				</a>
			</div>
		</div>
	</body>
</html>

effect：

computer show

phone show

AsaZyf

关注

4
点赞
踩
38

收藏

觉得还不错? 一键收藏
1
评论
HTML5--底部导航

code：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="width=device-width,initia
复制链接

扫一扫