2021携程移动端模拟 XC test2

2021携程移动端模拟 XC test2_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 下面这句话解决移动端问题 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>携程项目  flex布局</title>
	<link href="css/normalize.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/index1.css"/>
    <style>
		*{
     
			margin: 0;
			padding: 0;
		}
     
    </style>
</head>
<body>
	<div class="search-box">
		<div class="search">
			<!-- <span>搜索地方 地名</span> -->
			搜索 车票 船票
		</div>
		<a href="#" class="user">
			我的
		</a>
	</div>
	<header class="headimg">
		<div class="img">
			<img src="upload/8.jpg"/>
		</div>
	</header>
	<!-- 导航部分 -->
	<ul class="local-nav">
		<li>
			<a>
				
				<span class="tu"></span>
				<span>攻略 景点</span>
			</a>
		</li>
		<li>
			<a>
				
				<span class="tu"></span>
				<span>攻略 景点</span>
			</a>
		</li>
		<li>
			<a>
				
				<span class="tu"></span>
				<span>攻略 景点</span>
			</a>
		</li>
		<li>
			<a>
				
				<span class="tu"></span>
				<span>攻略 景点</span>
			</a>
		</li>
		<li>
			<a>
				
				<span class="tu"></span>
				<span>攻略 景点</span>
			</a>
		</li>
	</ul>
	<nav>
		<div class="common">
			<div class="item">酒店</div>
			<div class="item">
				<a>海外酒店</a>
				<a>特价酒店</a>
			</div>
			<div class="item">
				<a>海外酒店</a>
				<a>特价酒店</a>
			</div>
		</div>
		<div class="common">
			<div class="item">酒店</div>
			<div class="item">
				<a>海外酒店</a>
				<a>特价酒店</a>
			</div>
			<div class="item">
				<a>海外酒店</a>
				<a>特价酒店</a>
			</div>
		</div>
		<div class="common">
			<div class="item">酒店</div>
			<div class="item">
				<a>海外酒店</a>
				<a>特价酒店</a>
			</div>
			<div class="item">
				<a>海外酒店</a>
				<a>特价酒店</a>
			</div>
		</div>
	</nav>
	<ul class="entry">
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon"></span>
				<span>电话费</span>
			</a>
		</li>
	</ul>
</body>
</html>

你可能感兴趣的:(前端小练)