项目实战——旅行社导航页

html代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet" href="css/column.css">
</head>
<body><header id="header"><div class="center"><h1 class="logo">瓢城旅行社</h1><nav class="link"><h2 class="none">网站导航</h2><ul><li><a href="index.html">首页</a></li><li><a href="information.html">旅游资讯</a></li><li><a href="ticket.html">机票订购</a></li><li><a href="scenery.html">风景欣赏</a></li><li class="active"><a href="about.html">公司简介</a></li></ul></nav></div>
</header><div id="headline"><div class="center"><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>	</hgroup></div>
</div><div id="container"><aside class="sidebar"><div class="sidebox recommend"><h2>景点推荐</h2><div class="tag"><ul><li><a href="###">曼谷(12)</a></li><li><a href="###">东京(5)</a></li><li><a href="###">西双版纳(8)</a></li><li><a href="###">漓江(16)</a></li><li><a href="###">呼伦贝尔(4)</a></li><li><a href="###">首尔(9)</a></li><li><a href="###">巴厘岛(15)</a></li><li><a href="###">土耳其(22)</a></li><li><a href="###">夏威夷(5)</a></li><li><a href="###">巴厘岛(11)</a></li><li><a href="###">毛里求斯(7)</a></li><li><a href="###">吉普岛(4)</a></li><li><a href="###">希腊(18)</a></li><li><a href="###">法瑞意(8)</a></li><li><a href="###">马尔代夫(9)</a></li><li><a href="###">新西兰(16)</a></li><li><a href="###">埃及(11)</a></li><li><a href="###">迪拜(14)</a></li><li><a href="###">斯里兰卡(7)</a></li><li><a href="###">麦哈顿(3)</a></li><li><a href="###">大阪(15)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="曼谷-芭提雅6日游"><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot2.jpg" alt="马尔代夫双鱼6日游"><figcaption>马尔代夫双鱼6日游</figcaption></figure><figure><img src="img/hot3.jpg" alt="海南双飞5日游"><figcaption>海南双飞5日游</figcaption></figure><figure><img src="img/hot4.jpg" alt="富山大阪东京8日游"><figcaption>富山大阪东京8日游</figcaption></figure><figure><img src="img/hot5.jpg" alt="法瑞意德12日游"><figcaption>法瑞意德12日游</figcaption></figure><figure><img src="img/hot6.jpg" alt="巴厘岛6日半游"><figcaption>巴厘岛6日半游</figcaption></figure><figure><img src="img/hot7.jpg" alt="塞舌尔迪拜9日游"><figcaption>塞舌尔迪拜9日游</figcaption></figure><figure><img src="img/hot8.jpg" alt="花样土耳其10日游"><figcaption>花样土耳其10日游</figcaption></figure></div></div><div class="sidebox treasure"><h2>旅游百宝箱</h2><div class="box"><a href="###" class="trea1">天气预报</a><a href="###" class="trea2">火车票查询</a><a href="###" class="trea3">航空查询</a><a href="###" class="trea4">地铁线路查询</a>			</div></div></aside><div class="list about"><section><h2>关于我们</h2><p>瓢城旅行社旅游网创立于2006 年10 月，以“让旅游更简单”为使命，为消费者提供由北京、上海、广州、深圳等64 个城市出发的旅游产品预订服务，产品全面，价格透明，全年365 天24 小时400 电话预订，并提供丰富的后续服务和保障。</p><p>目前，瓢城旅行社旅游网提供8 万余种旅游产品供消费者选择，涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等，已成功服务累计超过400 万人次出游。</p><p>同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区，可以更好地帮助游客了解目的地信息，妥善制定好出游计划，并方便地预订旅程中的服务项目。</p></section><p>&nbsp;</p><section><h2>联系方式</h2><address><ul><li>瓢城旅行社股份有限公司</li><li>地址：陕西省西安市新城区大庆中路1234号</li><li>邮编：1234567</li><li>电话：010-88888888</li><li>传真：010-88666666</li></ul></address></section></div>
</div><footer id="footer"><div class="top"><div class="block left"><h2>合作伙伴</h2><hr><ul><li>途牛旅游网</li><li>驴妈妈旅游网</li><li>携程旅游</li><li>中国青年旅行社</li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li>旅游合同签订方式？</li><li>儿童价是基于什么制定的？</li><li>旅游的线路品质怎么界定的？</li><li>单房差是什么？</li><li>旅游保险有那些种类？</li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/yan</li><li>邮件：yan@yan.com</li><li>地址：西安市丈八北路123 号</li></ul></div></div><div class="bottom">Copyright © YCKU 瓢城旅行社| 陕ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345</div>
</footer></body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet" href="css/style.css">
</head>
<body><header id="header"><div class="center"><h1 class="logo">瓢城旅行社</h1><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="scenery.html">风景欣赏</a></li><li><a href="about.html">公司简介</a></li></ul></nav></div>
</header><div id="search"><div class="center"></div><input type="text" class="search" placeholder="请输入旅游景点或城市"><button class="button">搜索</button>
</div><div id="tour"><section class="center"><h2>热门旅游</h2><p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p></section><figure><img src="img/tour1.jpg" alt=""><figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="img/tour2.jpg" alt="马尔代夫双鱼岛Olhuveli4晚6日自助游"><figcaption><strong class="title">&lt;马尔代夫双鱼岛Olhuveli4晚6日自助游&gt;</strong> 上海出发，机+酒包含:早晚餐+快艇<div class="info"><em class="sat">满意度 97%</em><span class="price">¥ <strong>8039</strong> 起</span></div><div class="type">出境长线</div></figcaption></figure><figure><img src="img/tour3.jpg" alt="海南双飞5日游"><figcaption><strong class="title">&lt;海南双飞5日游&gt;</strong> 含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送<div class="info"><em class="sat">满意度 90%</em><span class="price">¥ <strong>2709</strong> 起</span></div><div class="type">自助旅游</div></figcaption></figure><figure><img src="img/tour4.jpg" alt="富山-大阪-东京8日游"><figcaption><strong class="title">&lt;富山-大阪-东京8日游&gt;</strong> 暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物<div class="info"><em class="sat">满意度 97%</em><span class="price">¥ <strong>9499</strong> 起</span></div><div class="type">自助旅游</div></figcaption></figure><figure><img src="img/tour5.jpg" alt="法瑞意德12日游"><figcaption><strong class="title">&lt;法瑞意德12日游&gt;</strong> 4至5星，金色列车，少女峰，部分THE MALL<div class="info"><em class="sat">满意度 97%</em><span class="price">¥ <strong>9199</strong> 起</span></div><div class="type">国内短线</div></figcaption></figure><figure><img src="img/tour6.jpg" alt="巴厘岛6日半自助游"><figcaption><strong class="title">&lt;巴厘岛6日半自助游&gt;</strong> 蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩<div class="info"><em class="sat">满意度 95%</em><span class="price">¥ <strong>6488</strong> 起</span></div><div class="type">出境长线</div></figcaption></figure><figure><img src="img/tour7.jpg" alt="塞舌尔迪拜9日自助游"><figcaption><strong class="title">&lt;塞舌尔迪拜9日自助游&gt;</strong> 一游两国，4晚塞舌尔，2晚迪拜，香港EK往返<div class="info"><em class="sat">满意度 100%</em><span class="price">¥ <strong>9669</strong> 起</span></div><div class="type">游轮观光</div></figcaption></figure><figure><img src="img/tour8.jpg" alt="花样姐姐土耳其9日或10日游"><figcaption><strong class="title">&lt;花样姐姐土耳其9日或10日游&gt;</strong> 最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾<div class="info"><em class="sat">满意度 93%</em><span class="price">¥ <strong>9999</strong> 起</span></div><div class="type">出境长线</div></figcaption></figure><figure><img src="img/tour9.jpg" alt="大阪-京都-箱根双飞6日游"><figcaption><strong class="title">&lt;大阪-京都-箱根双飞6日游&gt;</strong> 盐城直飞，不走回头路，境外无自费，超值之旅<div class="info"><em class="sat">满意度 100%</em><span class="price">¥ <strong>5284</strong> 起</span></div><div class="type">国内短线</div></figcaption></figure>
</div><footer id="footer"><div class="top"><div class="block left"><h2>合作伙伴</h2><hr><ul><li>途牛旅游网</li><li>驴妈妈旅游网</li><li>携程旅游</li><li>中国青年旅行社</li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li>旅游合同签订方式？</li><li>儿童价是基于什么制定的？</li><li>旅游的线路品质怎么界定的？</li><li>单房差是什么？</li><li>旅游保险有那些种类？</li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/yan</li><li>邮件：yan@yan.com</li><li>地址：西安市丈八北路123 号</li></ul></div></div><div class="bottom">Copyright © YCKU 瓢城旅行社| 陕ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345</div>
</footer></body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet" href="css/column.css">
</head>
<body><header id="header"><div class="center"><h1 class="logo">瓢城旅行社</h1><nav class="link"><h2 class="none">网站导航</h2><ul><li><a href="index.html">首页</a></li><li class="active"><a href="information.html">旅游资讯</a></li><li><a href="ticket.html">机票订购</a></li><li><a href="scenery.html">风景欣赏</a></li><li><a href="about.html">公司简介</a></li></ul></nav></div>
</header><div id="headline"><div class="center"><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>	</hgroup></div>
</div><div id="container"><aside class="sidebar"><div class="sidebox recommend"><h2>景点推荐</h2><div class="tag"><ul><li><a href="###">曼谷(12)</a></li><li><a href="###">东京(5)</a></li><li><a href="###">西双版纳(8)</a></li><li><a href="###">漓江(16)</a></li><li><a href="###">呼伦贝尔(4)</a></li><li><a href="###">首尔(9)</a></li><li><a href="###">巴厘岛(15)</a></li><li><a href="###">土耳其(22)</a></li><li><a href="###">夏威夷(5)</a></li><li><a href="###">巴厘岛(11)</a></li><li><a href="###">毛里求斯(7)</a></li><li><a href="###">吉普岛(4)</a></li><li><a href="###">希腊(18)</a></li><li><a href="###">法瑞意(8)</a></li><li><a href="###">马尔代夫(9)</a></li><li><a href="###">新西兰(16)</a></li><li><a href="###">埃及(11)</a></li><li><a href="###">迪拜(14)</a></li><li><a href="###">斯里兰卡(7)</a></li><li><a href="###">麦哈顿(3)</a></li><li><a href="###">大阪(15)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="曼谷-芭提雅6日游"><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot2.jpg" alt="马尔代夫双鱼6日游"><figcaption>马尔代夫双鱼6日游</figcaption></figure><figure><img src="img/hot3.jpg" alt="海南双飞5日游"><figcaption>海南双飞5日游</figcaption></figure><figure><img src="img/hot4.jpg" alt="富山大阪东京8日游"><figcaption>富山大阪东京8日游</figcaption></figure><figure><img src="img/hot5.jpg" alt="法瑞意德12日游"><figcaption>法瑞意德12日游</figcaption></figure><figure><img src="img/hot6.jpg" alt="巴厘岛6日半游"><figcaption>巴厘岛6日半游</figcaption></figure><figure><img src="img/hot7.jpg" alt="塞舌尔迪拜9日游"><figcaption>塞舌尔迪拜9日游</figcaption></figure><figure><img src="img/hot8.jpg" alt="花样土耳其10日游"><figcaption>花样土耳其10日游</figcaption></figure></div></div><div class="sidebox treasure"><h2>旅游百宝箱</h2><div class="box"><a href="###" class="trea1">天气预报</a><a href="###" class="trea2">火车票查询</a><a href="###" class="trea3">航空查询</a><a href="###" class="trea4">地铁线路查询</a>			</div></div></aside><div class="list information"><div class="infor"><ul class="left"><li><a href="###">限时特价</a></li><li><a href="###">热门推荐</a></li></ul><ul class="right"><li><a href="###" class="selected">推荐</a></li><li><a href="###">折扣</a></li><li><a href="###">价格</a></li></ul></div><figure class="tour"><img src="img/tour1.jpg" alt="曼谷-芭提雅6日游"><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠，超丰富景点，升级1 晚国五，无自费，赠送600元成人券...</h3></hgroup></header><ol><li><mark>交通</mark>：春秋航空,杭州出发,无需转机</li><li><mark>团期</mark>：11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">￥<strong>2864</strong> <s>¥3980</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour2.jpg" alt="马尔代夫6日自助游"><figcaption><article><header><hgroup><h2>马尔代夫6日自助游</h2><h3>双鱼岛Olhuveli4晚，上海出发，机+酒 包含:早晚餐+快艇...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>8039</strong> <s>¥9980</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">出境长线</div><div class="disc"><span>7.7折</span></div><footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer></article></figcaption></figure>	<figure class="tour"><img src="img/tour3.jpg" alt="海南双飞5日游"><figcaption><article><header><hgroup><h2>海南双飞5日游</h2><h3>含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>2709</strong> <s>¥3280</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">自助旅游</div><div class="disc"><span>6.5折</span></div><footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer></article></figcaption></figure>	<figure class="tour"><img src="img/tour4.jpg" alt="富山-大阪-东京8日游"><figcaption><article><header><hgroup><h2>富山-大阪-东京8日游</h2><h3>暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>9499</strong> <s>¥9999</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">自助旅游</div><div class="disc"><span>8.8折</span></div><footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour5.jpg" alt="法瑞意德12日游"><figcaption><article><header><hgroup><h2>法瑞意德12日游</h2><h3>4至5星，金色列车，少女峰，部分THE MALL...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>9199</strong> <s>¥9999</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">国内短线</div><div class="disc"><span>9.2折</span></div><footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt="巴厘岛6日半自助游"><figcaption><article><header><hgroup><h2>巴厘岛6日半自助游</h2><h3>蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>6488</strong> <s>¥8460</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">国内短线</div><div class="disc"><span>7.6折</span></div><footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour7.jpg" alt="塞舌尔迪拜9日自助游"><figcaption><article><header><hgroup><h2>塞舌尔迪拜9日自助游</h2><h3>一游两国，4晚塞舌尔，2晚迪拜，香港EK往返...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>9669</strong> <s>¥9999</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">游轮观光</div><div class="disc"><span>9.6折</span></div><footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour8.jpg" alt="花样姐姐土耳其9日游"><figcaption><article><header><hgroup><h2>花样姐姐土耳其9日游</h2><h3>最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>9999</strong> <s>¥9999</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">出境长线</div><div class="disc"><span>10折</span></div><footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour9.jpg" alt="大阪-京都-箱根双飞6日游"><figcaption><article><header><hgroup><h2>大阪-京都-箱根双飞6日游</h2><h3>盐城直飞，不走回头路，境外无自费，超值之旅...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>5284</strong> <s>¥8437</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">国内短线</div><div class="disc"><span>6.8折</span></div><footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer></article></figcaption></figure><div class="more">加载更多...</div></div>
</div><footer id="footer"><div class="top"><div class="block left"><h2>合作伙伴</h2><hr><ul><li>途牛旅游网</li><li>驴妈妈旅游网</li><li>携程旅游</li><li>中国青年旅行社</li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li>旅游合同签订方式？</li><li>儿童价是基于什么制定的？</li><li>旅游的线路品质怎么界定的？</li><li>单房差是什么？</li><li>旅游保险有那些种类？</li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/yan</li><li>邮件：yan@yan.com</li><li>地址：西安市丈八北路123 号</li></ul></div></div><div class="bottom">Copyright © YCKU 瓢城旅行社| 陕ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345</div>
</footer></body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet" href="css/column.css">
</head>
<body><header id="header"><div class="center"><h1 class="logo">瓢城旅行社</h1><nav class="link"><h2 class="none">网站导航</h2><ul><li><a href="index.html">首页</a></li><li><a href="information.html">旅游资讯</a></li><li><a href="ticket.html">机票订购</a></li><li class="active"><a href="scenery.html">风景欣赏</a></li><li><a href="about.html">公司简介</a></li></ul></nav></div>
</header><div id="headline"><div class="center"><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>	</hgroup></div>
</div><div id="container"><aside class="sidebar"><div class="sidebox recommend"><h2>景点推荐</h2><div class="tag"><ul><li><a href="###">曼谷(12)</a></li><li><a href="###">东京(5)</a></li><li><a href="###">西双版纳(8)</a></li><li><a href="###">漓江(16)</a></li><li><a href="###">呼伦贝尔(4)</a></li><li><a href="###">首尔(9)</a></li><li><a href="###">巴厘岛(15)</a></li><li><a href="###">土耳其(22)</a></li><li><a href="###">夏威夷(5)</a></li><li><a href="###">巴厘岛(11)</a></li><li><a href="###">毛里求斯(7)</a></li><li><a href="###">吉普岛(4)</a></li><li><a href="###">希腊(18)</a></li><li><a href="###">法瑞意(8)</a></li><li><a href="###">马尔代夫(9)</a></li><li><a href="###">新西兰(16)</a></li><li><a href="###">埃及(11)</a></li><li><a href="###">迪拜(14)</a></li><li><a href="###">斯里兰卡(7)</a></li><li><a href="###">麦哈顿(3)</a></li><li><a href="###">大阪(15)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="曼谷-芭提雅6日游"><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot2.jpg" alt="马尔代夫双鱼6日游"><figcaption>马尔代夫双鱼6日游</figcaption></figure><figure><img src="img/hot3.jpg" alt="海南双飞5日游"><figcaption>海南双飞5日游</figcaption></figure><figure><img src="img/hot4.jpg" alt="富山大阪东京8日游"><figcaption>富山大阪东京8日游</figcaption></figure><figure><img src="img/hot5.jpg" alt="法瑞意德12日游"><figcaption>法瑞意德12日游</figcaption></figure><figure><img src="img/hot6.jpg" alt="巴厘岛6日半游"><figcaption>巴厘岛6日半游</figcaption></figure><figure><img src="img/hot7.jpg" alt="塞舌尔迪拜9日游"><figcaption>塞舌尔迪拜9日游</figcaption></figure><figure><img src="img/hot8.jpg" alt="花样土耳其10日游"><figcaption>花样土耳其10日游</figcaption></figure></div></div><div class="sidebox treasure"><h2>旅游百宝箱</h2><div class="box"><a href="###" class="trea1">天气预报</a><a href="###" class="trea2">火车票查询</a><a href="###" class="trea3">航空查询</a><a href="###" class="trea4">地铁线路查询</a>			</div></div></aside><div class="list scenery"><section><h2>风景欣赏</h2><figure><img src="img/s1.jpg" alt="曼谷-芭提雅"><figcaption>曼谷-芭提雅[共8张]</figcaption></figure><figure><img src="img/s2.jpg" alt="马尔代夫双鱼岛"><figcaption>马尔代夫双鱼岛[共12张]</figcaption></figure><figure><img src="img/s3.jpg" alt="海南"><figcaption>海南[共19 张]</figcaption></figure><figure><img src="img/s4.jpg" alt="富山-大阪-东京"><figcaption>富山-大阪-东京[共22张]</figcaption></figure><figure><img src="img/s5.jpg" alt="法瑞意德"><figcaption>法瑞意德[共31张]</figcaption></figure><figure><img src="img/s6.jpg" alt="巴厘岛"><figcaption>巴厘岛[共12张]</figcaption></figure><figure><img src="img/s7.jpg" alt="塞舌尔迪拜"><figcaption>塞舌尔迪拜[共7张]</figcaption></figure><figure><img src="img/s8.jpg" alt="花样姐姐土耳其"><figcaption>花样姐姐土耳其[共14张]</figcaption></figure></section><div class="more">加载更多...</div></div>
</div><footer id="footer"><div class="top"><div class="block left"><h2>合作伙伴</h2><hr><ul><li>途牛旅游网</li><li>驴妈妈旅游网</li><li>携程旅游</li><li>中国青年旅行社</li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li>旅游合同签订方式？</li><li>儿童价是基于什么制定的？</li><li>旅游的线路品质怎么界定的？</li><li>单房差是什么？</li><li>旅游保险有那些种类？</li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/yan</li><li>邮件：yan@yan.com</li><li>地址：西安市丈八北路123 号</li></ul></div></div><div class="bottom">Copyright © YCKU 瓢城旅行社| 陕ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345</div>
</footer></body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet" href="css/column.css">
</head>
<body><header id="header"><div class="center"><h1 class="logo">瓢城旅行社</h1><nav class="link"><h2 class="none">网站导航</h2><ul><li><a href="index.html">首页</a></li><li><a href="information.html">旅游资讯</a></li><li class="active"><a href="ticket.html">机票订购</a></li><li><a href="scenery.html">风景欣赏</a></li><li><a href="about.html">公司简介</a></li></ul></nav></div>
</header><div id="headline"><div class="center"><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>	</hgroup></div>
</div><div id="container"><aside class="sidebar"><div class="sidebox recommend"><h2>景点推荐</h2><div class="tag"><ul><li><a href="###">曼谷(12)</a></li><li><a href="###">东京(5)</a></li><li><a href="###">西双版纳(8)</a></li><li><a href="###">漓江(16)</a></li><li><a href="###">呼伦贝尔(4)</a></li><li><a href="###">首尔(9)</a></li><li><a href="###">巴厘岛(15)</a></li><li><a href="###">土耳其(22)</a></li><li><a href="###">夏威夷(5)</a></li><li><a href="###">巴厘岛(11)</a></li><li><a href="###">毛里求斯(7)</a></li><li><a href="###">吉普岛(4)</a></li><li><a href="###">希腊(18)</a></li><li><a href="###">法瑞意(8)</a></li><li><a href="###">马尔代夫(9)</a></li><li><a href="###">新西兰(16)</a></li><li><a href="###">埃及(11)</a></li><li><a href="###">迪拜(14)</a></li><li><a href="###">斯里兰卡(7)</a></li><li><a href="###">麦哈顿(3)</a></li><li><a href="###">大阪(15)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="曼谷-芭提雅6日游"><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot2.jpg" alt="马尔代夫双鱼6日游"><figcaption>马尔代夫双鱼6日游</figcaption></figure><figure><img src="img/hot3.jpg" alt="海南双飞5日游"><figcaption>海南双飞5日游</figcaption></figure><figure><img src="img/hot4.jpg" alt="富山大阪东京8日游"><figcaption>富山大阪东京8日游</figcaption></figure><figure><img src="img/hot5.jpg" alt="法瑞意德12日游"><figcaption>法瑞意德12日游</figcaption></figure><figure><img src="img/hot6.jpg" alt="巴厘岛6日半游"><figcaption>巴厘岛6日半游</figcaption></figure><figure><img src="img/hot7.jpg" alt="塞舌尔迪拜9日游"><figcaption>塞舌尔迪拜9日游</figcaption></figure><figure><img src="img/hot8.jpg" alt="花样土耳其10日游"><figcaption>花样土耳其10日游</figcaption></figure></div></div><div class="sidebox treasure"><h2>旅游百宝箱</h2><div class="box"><a href="###" class="trea1">天气预报</a><a href="###" class="trea2">火车票查询</a><a href="###" class="trea3">航空查询</a><a href="###" class="trea4">地铁线路查询</a>			</div></div></aside><div class="list ticket"><form action="###"><h2>机票预定</h2><div class="type"><p>航班类型 <mark>单程</mark> 往返</p></div><div class="form left"><p><label for="from_city">出发城市 </label><input type="text" name="from_city" id="from_city" placeholder="城市名"></p><p><label for="to_city">返回城市 </label><input type="text" name="to_city" id="to_city" placeholder="城市名"></p></div><div class="form right"><p><label for="from_date">出发时间 </label><input type="text" name="from_date" id="from_date" placeholder="时间/日期"></p><p><label for="to_date">返回时间 </label><input type="text" name="to_date" id="to_date" placeholder="时间/日期"></p></div><div class="form button"><p><button type="submit" class="submit">订票</button></p></div></form><div class="new"><h2>最新机票</h2><ul><li>热门城市：</li><li>北京</li><li>上海</li><li>广州</li><li>深圳</li><li>重庆</li><li>成都</li><li>杭州</li><li>南京</li></ul><table><thead><tr><th>路线</th><th>日期</th><th>价格</th><th>税费</th><th>餐食</th><th>航班</th><th>预定</th></tr></thead><tbody><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td>¥50</td><td>有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-上海</td><td>10-15</td><td class="price">¥479</td><td>¥45</td><td>无</td><td>南方航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-深圳</td><td>10-15</td><td class="price">¥561</td><td>¥52</td><td>有</td><td>西部航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-杭州</td><td>10-15</td><td class="price">¥378</td><td>¥36</td><td>无</td><td>天津航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-广州</td><td>10-15</td><td class="price">¥612</td><td>¥44</td><td>有</td><td>首都航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-重庆</td><td>10-15</td><td class="price">¥428</td><td>¥62</td><td>有</td><td>东方航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-昆明</td><td>10-15</td><td class="price">¥509</td><td>¥35</td><td>无</td><td>厦门航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-厦门</td><td>10-15</td><td class="price">¥893</td><td>¥73</td><td>有</td><td>深圳航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-长沙</td><td>10-15</td><td class="price">¥663</td><td>¥46</td><td>无</td><td>四川航空</td><td><a href="###" class="reserve">预定</a></td></tr></tbody><tfoot><tr><td colspan="7"><a href="###" class="more">加载更多航班...</a></td></tr></tfoot></table></div></div>
</div><footer id="footer"><div class="top"><div class="block left"><h2>合作伙伴</h2><hr><ul><li>途牛旅游网</li><li>驴妈妈旅游网</li><li>携程旅游</li><li>中国青年旅行社</li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li>旅游合同签订方式？</li><li>儿童价是基于什么制定的？</li><li>旅游的线路品质怎么界定的？</li><li>单房差是什么？</li><li>旅游保险有那些种类？</li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/yan</li><li>邮件：yan@yan.com</li><li>地址：西安市丈八北路123 号</li></ul></div></div><div class="bottom">Copyright © YCKU 瓢城旅行社| 陕ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345</div>
</footer></body>
</html>

CSS代码：

@charset "utf-8";body,h1,h2,h3,ul,ol,p,figure {margin: 0;padding: 0;
}
body {background-color: #fff;font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei UI","Microsoft YaHei",SimHei,"宋体",simsun,sans-serif;
}
ul,ol {list-style: outside none none;
}
a {text-decoration: none;
}
.none {display: none;
}
#header {width: 100%;min-width: 1263px;height: 70px;background-color: #333;box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);position: relative;z-index: 9999;
}
#header .center {width: 1263px;height: 70px;margin: 0 auto;
}
#header .logo {width: 240px;height: 70px;background-image: url(../img/logo.png);text-indent: -9999px;float: left;
}
#header .link {width: 650px;height: 70px;line-height: 70px;color: #eee;float: right;
}
#header .link li {width: 120px;text-align: center;float: left;
}
#header .link a {color: #eee;display: block;
}
#header .link a:hover, 
#header .active a {background-color: #000;
}
#footer {height: 360px;background-color: #222;clear: both;position: relative;top: 20px;
}
#footer .top {width: 1263px;height: 281px;margin: 0 auto;text-align: center;
}
#footer .block {width: 410px;height: 280px;display: inline-block;text-align: left;color: #ccc;vertical-align: top;
}
#footer h2 {font-size: 24px;font-weight: normal;padding: 20px 0 0 20px;
}
#footer hr {width: 90%;border: 1px dashed #333;
}
#footer ul {font-size: 18px;color: #777;text-indent: 20px;line-height: 2;
}
#footer .bottom {height: 80px;line-height: 80px;text-align: center;color: #777;background-color: #000;border-top: 1px solid #444;
}

@charset "utf-8";#headline {width: 100%;min-width: 1263px;height: 300px;background: linear-gradient(to right bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)), url(../img/headline.jpg) no-repeat center;
}
#headline .center {width: 1263px;height: 300px;margin: 0 auto;
}
#headline hgroup {padding: 100px 0 0 50px;
}
#headline h2 {color: #eee;font-size: 36px;letter-spacing: 1px;
}
#headline h3 {color: #eee;font-size: 20px;letter-spacing: 1px;
}
#container {width: 1263px;margin: 30px auto;
}
#container .sidebar {width: 340px;float: right;
}
#container .sidebox {border: 1px solid #eee;margin: 0 0 10px 0;text-align: center;
}
#container .sidebox h2 {font-size: 20px;font-weight: normal;letter-spacing: 1px;text-indent: 8px;height: 40px;line-height: 40px;background-color: #fafafa;color: #666;text-align: left;
}
#container .tag {padding: 10px 0;
}
#container .tag li {display: inline-block;width: 100px;height: 35px;line-height: 35px;margin: 2px 0;background-color: #eee;text-align: left;text-indent: 8px;
}
#container .tag a {display: block;color: #999;
}
#container .tag a:hover {background-color: #458b00;color: #fff;
}
#container .figure {padding: 10px 0;
}
#container figure {display: inline-block;padding: 4px;color: #666;
}
#container .box {padding: 10px 0;
}
#container .box a {display: inline-block;width: 150px;height: 40px;line-height: 40px;margin: 2px 0;text-align: left;text-indent: 35px;color: #999;
}
#container .box a.trea1 {background: #eee url(../img/trea1.png) no-repeat 10px center;
}
#container .box a.trea2 {background: #eee url(../img/trea2.png) no-repeat 10px center;
}
#container .box a.trea3 {background: #eee url(../img/trea3.png) no-repeat 10px center;
}
#container .box a.trea4 {background: #eee url(../img/trea4.png) no-repeat 10px center;
}
#container .list {width: 910px;float: left;
}
#container .infor {height: 45px;line-height: 45px;background-color: #eee;margin: 0 0 20px 0;
}
#container .information .left {display: inline-block;float: left;
}
#container .information .left li {display: inline-block;width: 150px;height: 43px;line-height: 43px;text-align: center;
}
#container .information .left li:first-child {background-color: #fff;border-top: 2px solid #458b00;position: relative;left: 1px;
}
#container .information .left a {color: #666;
}
#container .information .right {display: inline-block;padding: 0 20px 0 0;float: right;
}
#container .information .right li {display: inline-block;width: 60px;height: 45px;line-height: 45px;text-align: center;
}
#container .information .right a {padding: 3px 8px;color: #666;
}
#container .information .right a.selected, #container .information .right a:hover {background-color: #458b00;color: #fff;
}
#container .tour {width: 908px;padding: 0;margin: 0 0 20px 0;border: 1px solid #eee;position: relative;
}
#container .tour img {float: left;
}
#container .tour figcaption {width: 528px;height: 230px;float: right;
}
#container .tour hgroup {width: 300px;
}
#container .tour h2 {font-size: 24px;color: #333;font-weight: normal;padding: 10px 0 10px 25px;
}
#container .tour h3 {font-size: 16px;color: #666;line-height: 1.5;font-weight: normal;padding: 10px 0 10px 25px;
}
#container .tour ol {padding: 0 0 0 25px;color: #666;line-height: 2;
}
#container .tour mark {background-color: #fff;border: 1px solid #458b00;border-radius: 4px;padding: 0 5px;color: #458b00;
}
#container .tour .buy {position: absolute;top: 55px;right: 30px;
}
#container .tour .price {color: #f60;font-size: 20px;
}
#container .tour .price strong {font-size: 36px;
}
#container .tour .price s {font-size: 16px;color: #999;
}
#container .tour .reserve {margin: 10px 0 0 0;
}
#container .tour .reserve a {display: block;width: 152px;height: 40px;line-height: 40px;text-align: center;border-radius: 4px;font-size: 20px;color: #fff;background-color: #f60;
}
#container .tour .type {width: 90px;height: 25px;line-height: 25px;font-size: 14px;text-align: center;color: #fff;background-color: #59b200;position: absolute;top: 0;left: 0;
}
#container .tour .disc {position: absolute;top: 0;right: 0;width: 52px;height: 52px;background: url(../img/disc.png) no-repeat;
}
#container .tour .disc span {display: block;transform: rotate(45deg);width: 52px;height: 52px;padding: 5px 0 0 0;text-indent: 7px;font-size: 14px;color: #ff7a4d;
}
#container .tour footer {width: 528px;height: 30px;line-height: 30px;letter-spacing: 1px;text-indent: 25px;background-color: #fafafa;position: absolute;bottom: 0;
}
#container .tour time {color: #458b00;
}
#container .information .more, #container .scenery .more {width: 200px;height: 50px;line-height: 50px;text-align: center;margin: 0 auto;border: 1px solid #ccc;background-color: #fafafa;border-radius: 10px;cursor: pointer;font-size: 18px;color: #666;
}
#container .ticket, #container .scenery, #container .about {color: #666;font-size: 20px;
}
#container .ticket h2, #container .scenery h2, #container .about h2 {height: 40px;line-height: 40px;border-bottom: 1px dashed #999;padding: 0 0 15px 0;font-size: 30px;font-weight: normal;
}
#container .ticket .type {margin: 20px 0 10px 0;
}
#container .ticket .type mark {color: #fff;background-color: #458b00;padding: 5px 8px;border-radius: 4px;margin: 0 10px 0 16px;
}
#container .ticket .left {width: 43%;display: inline-block;
}
#container .ticket .right {width: 43%;display: inline-block;
}
#container .ticket .button {width: 9%;display: inline-block;
}
#container .ticket .submit {display: block;width: 90px;height: 90px;line-height: 90px;text-align: center;border-radius: 4px;font-size: 20px;color: #fff;background-color: #f60;border: none;position: relative;top: 8px;cursor: pointer;
}
#container .ticket .form p {line-height: 3;
}
#container .ticket .form input {width: 250px;height: 30px;background-color: #fff;border-radius: 4px;border: 1px solid #ccc;color: #666;padding: 5px;margin: 0 0 0 16px;font-size: 18px;
}
#container .ticket .new {margin: 20px 0 0 0;
}
#container .ticket .new ul {margin: 20px 0 0 0;
}
#container .ticket .new li {display: inline-block;padding: 5px 10px;
}
#container .ticket .new li:first-child {padding-left: 0;
}
#container .ticket .new li:nth-child(2) {background-color: #458b00;color: #fff;border-radius: 4px;
}
#container .ticket table {margin: 20px 0 0 0;width: 100%;border: 1px solid #ddd;border-collapse: collapse;
}
#container .ticket th {height: 50px;line-height: 50px;border-bottom: 1px solid #ddd;
}
#container .ticket td {height: 50px;line-height: 50px;border-bottom: 1px solid #ddd;text-align: center;
}
#container .ticket tr:nth-child(2n) {background-color: #fafafa;
}
#container .ticket tr:hover {background-color: #eee;
}
#container .ticket .price {color: #f60;
}
#container .ticket .more {color: #666;
}
#container .ticket .reserve {display: inline-block;width: 80px;height: 35px;line-height: 35px;text-align: center;border-radius: 4px;font-size: 20px;color: #fff;background-color: #f60;
}
#container .scenery figure {border: 1px solid #ddd;display: inline-block;padding: 4px;border-radius: 4px;margin: 15px 5px 15px 0;width: 435px;text-align: left;
}
#container .scenery figcaption {text-align: center;padding: 5px 0;
}
#container .about p {line-height: 2;margin: 20px 0;
}
#container .about address {line-height: 1.6;margin: 20px 0;font-style: normal;
}

@charset "utf-8";#search {width: 100%;min-width: 1263px;height: 600px;background: url(../img/search.jpg) no-repeat center;position: relative;
}
#search .center {width: 600px;height: 60px;background-color: #000;position: absolute;top: 50%;left: 50%;margin: -30px 0 0 -300px;opacity: 0.6;border-radius: 10px;
}
#search .search {width: 446px;height: 52px;background-color: #eee;position: absolute;top: 50%;left: 50%;margin: -27px 0 0 -296px;color: #666;border: 1px solid #666;border-radius: 10px;font-size: 24px;padding: 0 10px;outline: none;
}
#search .button {width: 120px;height: 54px;background-color: #eee;position: absolute;top: 50%;left: 50%;margin: -27px 0 0 175px;color: #666;border: 1px solid #666;border-radius: 10px;font-size: 24px;outline: none;cursor: pointer;font-weight: bold;
}
#tour {width: 1263px;height: 1150px;/*background-color: #ccc;*/margin: 30px auto;text-align: center;
}
#tour .center h2 {font-size: 45px;letter-spacing: 2px;color: #666;margin: 10px 0;
}
#tour .center p {color: #666;margin: 10px 0;
}
#tour figure {border: 1px solid #ddd;display: inline-block;padding: 4px;border-radius: 4px;margin: 15px 12px;width: 380px;text-align: left;position: relative;
}
#tour figure img {vertical-align: middle;
}
#tour figcaption {color: #777;line-height: 1.5;letter-spacing: 1px;font-size: 14px;padding: 7px 0 5px 0;
}
#tour .info {padding: 5px 0 0 0;
}
#tour .title {color: #333;font-weight: normal;
}
#tour .sat {float: right;font-size: 13px;color: #999;font-style: normal;position: relative;top: 5px;right: 5px;
}
#tour .price {color: #f60;font-size: 14px;
}
#tour .price strong {font-size: 20px;letter-spacing: 1px;
}
#tour .type {width: 90px;height: 25px;line-height: 25px;font-size: 14px;text-align: center;color: #fff;background-color: #59b200;position: absolute;top: 4px;left: 4px;
}

项目实战——旅行社导航页

相关文章

垂直导航栏JS版

运用python与高德api接口获取地理信息数据-----以例昆明市为例

计算机毕业设计springboot基于SpringBoot的自助旅游导航系统

说走就走——二次云南行（昆明大理丽江）

网站左侧导航代码如何编写

智慧“昆明”在路上未来充满精彩

jquery省市县三级导航栏

java web景点规划导航