twoyoung-Daily-train
/
携程弹性布局练习.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			header img {
				width: 100%;
				height: 100%;
			}

			.item {
				margin-top: 10px;
				display: flex;
				justify-content: center;
				height: 150px;
				line-height: 150px;
			}

			.item_l {
				flex: 1;
				text-align: center;
				background: wheat;
				margin-right: 10px;
			}

			.item_r {
				flex: 2;
				display: flex;
				flex-wrap: wrap;
			}

			.item_r a {
				flex: 50%;
				border: 1px solid #fff;
				line-height: 60px;
				text-align: center;
				background: hotpink;
				box-sizing: border-box;
				color: #fff;
				text-decoration: none;
			}

			footer {
				display: flex;
				justify-content: space-between;
			}

			footer img {
				flex: 1;
				display: block;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<header>
			<img src="../images/banner.jpg" alt="" />
		</header>
		<main>
			<div class="item">
				<div class="item_l">功能</div>
				<div class="item_r">
					<a href="#">去哪旅游网</a>
					<a href="#">订机票</a>
					<a href="#">订酒店</a>
					<a href="#">定餐厅</a>
				</div>
			</div>
			<div class="item">
				<div class="item_l">功能</div>
				<div class="item_r">
					<a href="#">去哪旅游网</a>
					<a href="#">订机票</a>
					<a href="#">订酒店</a>
					<a href="#">定餐厅</a>
				</div>
			</div>
			<div class="item">
				<div class="item_l">功能</div>
				<div class="item_r">
					<a href="#">去哪旅游网</a>
					<a href="#">订机票</a>
					<a href="#">订酒店</a>
					<a href="#">定餐厅</a>
				</div>
			</div>
			<div class="item">
				<div class="item_l">功能</div>
				<div class="item_r">
					<a href="#">去哪旅游网</a>
					<a href="#">订机票</a>
					<a href="#">订酒店</a>
					<a href="#">定餐厅</a>
				</div>
			</div>
			<div class="item">
				<div class="item_l">功能</div>
				<div class="item_r">
					<a href="#">去哪旅游网</a>
					<a href="#">订机票</a>
					<a href="#">订酒店</a>
					<a href="#">定餐厅</a>
				</div>
			</div>
		</main>
		<footer>
			<img src="../images/extra_2.png" alt="" /><img src="../images/extra_1.png" alt="" />
		</footer>
	</body>

</html>