一.如圖

二.思路

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="data: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%;

			}