2021携程移动端模拟 XC test2

最新推荐文章于 2024-04-06 00:49:27 发布

AlikeLin

最新推荐文章于 2024-04-06 00:49:27 发布

阅读量128

点赞数

分类专栏：前端小练

本文链接：https://blog.csdn.net/weixin_44124577/article/details/115605619

版权

前端小练专栏收录该内容

14 篇文章 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>

AlikeLin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021携程移动端模拟 XC test2

<!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.
复制链接

扫一扫

专栏目录