flex布局, 顶部导航, 底部菜单, css3导航栏, 流式布局, css3布局

最新推荐文章于 2024-05-11 00:01:17 发布

fanfan_y

最新推荐文章于 2024-05-11 00:01:17 发布

阅读量1.1k

点赞数 1

分类专栏： web css3 html5 文章标签：顶部导航底部导航 flex 流式布局 css3导航栏

本文链接：https://blog.csdn.net/weixin_42500714/article/details/100675591

版权

web 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

html5

11 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

flex 常用属性,以及flex值公式计算,请前往git地址查看 git地址

(https://gitee.com/hflxhn/summary/blob/master/web/css3/flex/file%E5%B1%9E%E6%80%A7.md)

两个常见的导航布局 (顶部导航和手机端的底部导航)

顶部导航

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex - header_navbar</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-shadow: border-box;
		}
		ul, li {
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		.header {
			width: 100%;
			height: 60px;
			line-height: 60px;
			background: #333;
		}
		.navbar {
			display: flex;
			width: 1200px;
			margin: 0 auto;
		}
		.navbar > a {
			font-size: 1.5rem;
			background: rgba(0, 0, 0, 0.1);
			display: inline-block;
			height: 100%;
			color: #fff;
		}
		.navbar  .navbar-nav {
			display: flex;
		}
		.navbar  .navbar-nav .nav-link {
			display: inline-block;
			padding: 0 0.5125rem;
			color: #ccc;
		}
		.ml-auto {
			margin-left: auto;
		}
	</style>
</head>
<body>
	<header class="header">
		<nav class="navbar">
			<a href="">hflxhn</a>
			<ul class="navbar-nav">
				<li><a href="" class="nav-link">item1</a></li>
				<li><a href="" class="nav-link">item2</a></li>
				<li><a href="" class="nav-link">item3</a></li>
			</ul>
			<ul class="navbar-nav ml-auto">
				<li><a href="" class="nav-link">退出</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>

底部导航

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex - footer_navbar</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-shadow: border-box;
		}
		li {
			list-style: none;
		}
		.footer-navbar {
			width: 100%;
			height: 60px;
			line-height: 60px;
			background: #ccc;
			position: fixed;
			left: 0;
			bottom: 0;
		}
		.navbar {
			display: flex;
		}
		.navbar .nav-item {
			flex: 1;
			text-align: center;
		}
		.navbar .nav-item .nav-link {
			display: inline-block;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div class="footer-navbar">
		<div class="navbar">
			<li class="nav-item">
				<a href="" class="nav-link">item1</a>
			</li>
			<li class="nav-item">
				<a href="" class="nav-link">item2</a>
			</li>
			<li class="nav-item">
				<a href="" class="nav-link">item3</a>
			</li>
		</div>
	</div>
</body>
</html>

fanfan_y

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
flex布局, 顶部导航, 底部菜单, css3导航栏, 流式布局, css3布局

flex 常用属性,以及flex值公式计算,请前往git地址查看git地址(https://gitee.com/hflxhn/summary/blob/master/web/css3/flex/file%E5%B1%9E%E6%80%A7.md)两个常见的导航布局 (顶部导航和手机端的底部导航)顶部导航<!DOCTYPE html><html lang=...
复制链接

扫一扫