基于flex布局的header

一.如图

二.思路

1.定义header，设置宽为100%，高为60px，设置绝对定位，使其为漂浮层。在header里添加container，宽设置为版心宽度，并且设置flex布局。

2.在container里面添加子div 分别为logo，nav，search。给他们分别设置相对宽度（使用百分比）。

3.设置swiper图片，在swiper里面放置img。将swiper和img宽度都设置为100%。

三.代码

1.html

                  <header>
			<div id="container">
				<div id="logo">

				</div>
				<div id="nav">

				</div>
				<div id="search">

				</div>
			</div>
		</header>
		<div class="swiper">
			<img src="images/1.png" >
		</div>

2.css

			header {
				width: 100%;
				position: absolute;
				top: 0px;
				right: 0px;
				height: 60px;
				display: flex;
				justify-content: center;
			}

			#container {
				width: 1200px;
				display: flex;
			}

			#logo {
				width: 20%;
				height: 60px;
				background-color: #000000;
			}

			#nav {
				width: 40%;
				height: 60px;
				background-color: #aaffff;
			}

			#search {
				width: 40%;
				height: 60px;
				background-color: #00ffff;
			}
			.swiper{
				width: 100%;
			}
				
			.swiper>img{
				width: 100%;
			}