HTML部分：
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>项目实战-移动端布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<nav class="link">
<h2 class="none">网站导航</h2>
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="information.html">资讯</a></li>
<li><a href="ticket.html">票务</a></li>
<li><a href="about.html">关于</a></li>
</ul>
</nav>
</div>
</header>
<div id="adver">
<img src="img/adver.jpg" alt="">
</div>
<div id="search">
<input type="text" class="search" placeholder="请输入旅游景点或城市">
<button class="button">搜索</button>
</div>
<div id="tour">
<hgroup>
<h2>热门旅游</h2>
<h3>最新的各种热门旅游推荐！</h3>
</hgroup>
<div class="container">
<figure>
<img src="img/tour1.jpg" alt="凤凰山">
<figcaption>
<h4><凤凰山6日游></h4>
<p>包团特惠，超丰富景点</p>
<div class="info">
<em class="sat">满意度 77%</em>
<span class="price">¥ <strong>2864</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour2.jpg" alt="马尔代夫双鱼岛">
<figcaption>
<h4><马尔代夫双鱼岛6日游></h4>
<p>上海出发，机+酒包含：早晚餐+快艇</p>
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>8039</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour3.jpg" alt="海南">
<figcaption>
<h4><海南双飞5日游></h4>
<p>含盐城接送，全程挂牌四星酒店</p>
<div class="info">
<em class="sat">满意度 90%</em>
<span class="price">¥ <strong>2709</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour4.jpg" alt="法瑞意德">
<figcaption>
<h4><法瑞意德12日游></h4>
<p>4至5星，金色列车，少女峰</p>
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>9199</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour5.jpg" alt="巴厘岛">
<figcaption>
<h4><巴厘岛5日自助游></h4>
<p>蓝梦出海，独栋别墅</p>
<div class="info">
<em class="sat">满意度 95%</em>
<span class="price">¥ <strong>7680</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour6.jpg" alt="花样姐姐土耳其">
<figcaption>
<h4><花样姐姐土耳其9日游></h4>
<p>中餐六菜一汤+土耳其当地美食</p>
<div class="info">
<em class="sat">满意度 98%</em>
<span class="price">¥ <strong>8980</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour7.jpg" alt="杭州">
<figcaption>
<h4><杭州4日游></h4>
<p>包团特惠，超丰富景点</p>
<div class="info">
<em class="sat">满意度 94%</em>
<span class="price">¥ <strong>2988</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour8.jpg" alt="乌鲁木齐+吐鲁番+鄯善+天山天池">
<figcaption>
<h4><乌鲁木齐+吐鲁番+鄯善+天山天池5日游></h4>
<p>1晚五星 共享沙漠雪山</p>
<div class="info">
<em class="sat">满意度 98%</em>
<span class="price">¥ <strong>2869</strong> 起</span>
</div>
</figcaption>
</figure>
<div class="clearfix"></div>
</div>
</div>
<footer id="footer">
<div class="top">
客户端 | 触屏版 | 电脑版
</div>
<div class="bottom">
Copyright © JH季槐旅行社 |京ICP证056787号
</div>
</footer>
<
最低0.47元/天 解锁文章
5215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
