静态旅游网站（PC端）

HTML部分：

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战-PC端布局</title><link rel="stylesheet" href="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="凤凰山6日游"><figcaption><strong class="title"><凤凰山6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费劵</figcaption><div><em class="sat">满意度 77%</em><span class="price">¥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figure><figure><img src="img/tour2.jpg" alt="马尔代夫双鱼岛6日游"><figcaption><strong class="title"><马尔代夫双鱼岛6日游></strong> 上海出发，机+酒包含：早晚餐+快艇</figcaption><div><em class="sat">满意度 97%</em><span class="price">¥ <strong>8039</strong> 起</span></div><div class="type">出境长线</div></figure><figure><img src="img/tour3.jpg" alt="海南双飞5日游"><figcaption><strong class="title"><海南双飞5日游></strong> 含盐城接送，全程挂牌四星酒店，一价全含，"零自费"自费项目免费送</figcaption><div><em class="sat">满意度 90%</em><span class="price">¥ <strong>2709</strong> 起</span></div><div class="type">自助旅游</div></figure><figure><img src="img/tour4.jpg" alt="富山-大阪-东京8日游"><figcaption><strong class="title"><富山-大阪-东京8日游></strong> 暑假亲子，2天自由，无导游安排自费项目，全程不强迫购物</figcaption><div><em class="sat">满意度 97%</em><span class="price">¥ <strong>9499</strong> 起</span></div><div class="type">自助旅游</div></figure><figure><img src="img/tour5.jpg" alt="法瑞意德12日游"><figcaption><strong class="title"><法瑞意德12日游></strong> 4至5星，金色列车，少女峰</figcaption><div><em class="sat">满意度 97%</em><span class="price">¥ <strong>9199</strong> 起</span></div><div class="type">出境长线</div></figure><figure><img src="img/tour6.jpg" alt="巴厘岛5日自助游"><figcaption><strong class="title"><巴厘岛5日自助游></strong> 蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩</figcaption><div><em class="sat">满意度 95%</em><span class="price">¥ <strong>7680</strong> 起</span></div><div class="type">出境长线</div></figure><figure><img src="img/tour7.jpg" alt="花样姐姐土耳其9日游"><figcaption><strong class="title"><花样姐姐土耳其9日游></strong> 最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味道</figcaption><div><em class="sat">满意度 98%</em><span class="price">¥ <strong>8980</strong> 起</span></div><div class="type">出境长线</div></figure><figure><img src="img/tour8.jpg" alt="杭州4日游"><figcaption><strong class="title"><杭州4日游></strong> 包团特惠，超丰富景点，无自费</figcaption><div><em class="sat">满意度 94%</em><span class="price">¥ <strong>2988</strong> 起</span></div><div class="type">国内短线</div></figure><figure><img src="img/tour9.jpg" alt="乌鲁木齐+吐鲁番+鄯善+天山天池5日4晚跟团游(4钻)"><figcaption><strong class="title"><乌鲁木齐+吐鲁番+鄯善+天山天池5日4晚跟团游(4钻)></strong> 升级1晚五星 共享沙漠雪山 成人立减500</figcaption><div><em class="sat">满意度 98%</em><span class="price">¥ <strong>2869</strong> 起</span></div><div class="type">国内短线</div></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></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/jihuai</li><li>邮件：jihuai@jihuai.com</li><li>地址：重庆无名路233号</li></ul></div></div><div class="bottom">Copyright © JH季槐旅行社 |京ICP证056787号</div></footer></body>
</html>

information.html

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战-PC端布局</title><link rel="stylesheet" href="basic.css"><link rel="stylesheet" href="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="###">凤凰山(5)</a></li><li><a href="###">海南(7)</a></li><li><a href="###">马尔代夫(12)</a></li><li><a href="###">巴厘岛(16)</a></li><li><a href="###">富山(7)</a></li><li><a href="###">东京(12)</a></li><li><a href="###">大阪(8)</a></li><li><a href="###">法瑞意(16)</a></li><li><a href="###">德国(7)</a></li><li><a href="###">土耳其(9)</a></li><li><a href="###">杭州(8)</a></li><li><a href="###">乌鲁木齐(5)</a></li><li><a href="###">吐鲁番(5)</a></li><li><a href="###">天山天池(7)</a></li><li><a href="###">鄯善(4)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="凤凰山6日游"><img src="img/hot2.jpg" alt="马尔代夫双鱼岛6日游"><img src="img/hot3.jpg" alt="海南双飞5日游"><img src="img/hot4.jpg" alt="富山-大阪-东京8日游"><img src="img/hot5.jpg" alt="法瑞意德12日游"><img src="img/hot6.jpg" alt="巴厘岛5日自助游"><img src="img/hot7.jpg" alt="花样姐姐土耳其9日游"><img src="img/hot8.jpg" alt="杭州4日游"></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="info"><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><ol><li><mark>交通</mark>：春秋航空，上海出发，无需转机</li><li><mark>团期</mark>：11/01、11/05、11/09...</li></ol><div class="buy"><div class="price">¥<strong>2864</strong> <s>¥3899</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>5.8折</span></div></header><footer>本团游由季槐旅行社赞助提供，截止于<time>2017-12-31</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour2.jpg" alt="马尔代夫双鱼岛6日游"><figcaption><article><header><hgroup><h2>马尔代夫双鱼岛6日游</h2><h3>上海出发，机+酒包含：早晚餐+快艇</h3></hgroup><ol><li><mark>交通</mark>：春秋航空，上海出发，无需转机</li><li><mark>团期</mark>：11/01、11/05、11/09...</li></ol><div class="buy"><div class="price">¥<strong>8039</strong> <s>¥10899</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">出境长线</div><div class="disc"><span>5.8折</span></div></header><footer>本团游由季槐旅行社赞助提供，截止于<time>2017-12-31</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><ol><li><mark>交通</mark>：春秋航空，江苏出发，无需转机</li><li><mark>团期</mark>：11/01、11/05、11/09...</li></ol><div class="buy"><div class="price">¥<strong>2709</strong> <s>¥3699</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">自助旅游</div><div class="disc"><span>5.8折</span></div></header><footer>本团游由季槐旅行社赞助提供，截止于<time>2017-12-31</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><ol><li><mark>交通</mark>：春秋航空，上海出发，无需转机</li><li><mark>团期</mark>：7/01、7/05、7/09...</li></ol><div class="buy"><div class="price">¥<strong>9499</strong> <s>¥11899</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">自助旅游</div><div class="disc"><span>5.8折</span></div></header><footer>本团游由季槐旅行社赞助提供，截止于<time>2017-12-31</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星，金色列车，少女</h3></hgroup><ol><li><mark>交通</mark>：春秋航空，上海出发，无需转机</li><li><mark>团期</mark>：11/01、11/05、11/09...</li></ol><div class="buy"><div class="price">¥<strong>9199</strong> <s>¥13899</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">出境长线</div><div class="disc"><span>4.8折</span></div></header><footer>本团游由季槐旅行社赞助提供，截止于<time>2017-12-31</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt="巴厘岛5日自助游"><figcaption><article><header><hgroup><h2>巴厘岛5日自助游</h2><h3>蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩</h3></hgroup><ol><li><mark>交通</mark>：春秋航空，上海出发，无需转机</li><li><mark>团期</mark>：11/01、11/05、11/09...</li></ol><div class="buy"><div class="price">¥<strong>7680</strong> <s>¥9899</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">出境长线</div><div class="disc"><span>5.8折</span></div></header><footer>本团游由季槐旅行社赞助提供，截止于<time>2017-12-31</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour7.jpg" alt="花样姐姐土耳其9日游"><figcaption><article><header><hgroup><h2>花样姐姐土耳其9日游</h2><h3>最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味道</h3></hgroup><ol><li><mark>交通</mark>：春秋航空，上海出发，无需转机</li><li><mark>团期</mark>：11/01、11/05、11/09...</li></ol><div class="buy"><div class="price">¥<strong>8980</strong> <s>¥10899</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>5.8折</span></div></header><footer>本团游由季槐旅行社赞助提供，截止于<time>2017-12-31</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour8.jpg" alt="杭州4日游"><figcaption><article><header><hgroup><h2>杭州4日游</h2><h3>包团特惠，超丰富景点，无自费</h3></hgroup><ol><li><mark>交通</mark>：春秋航空，上海出发，无需转机</li><li><mark>团期</mark>：11/01、11/05、11/09...</li></ol><div class="buy"><div class="price">¥<strong>2988</strong> <s>¥3599</s></div><div class="reserve"><a href="###">立即抢购</a></div></div><div class="type">国内短线</div><div class="disc"><span>5.8折</span></div></header><footer>本团游由季槐旅行社赞助提供，截止于<time>2017-12-31</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></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/jihuai</li><li>邮件：jihuai@jihuai.com</li><li>地址：重庆无名路233号</li></ul></div></div><div class="bottom">Copyright© 2017 Jihuailvxing.com.All Rights Reserved.京ICP证056787号</div></footer></body>
</html>

ticket.html

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战-PC端布局</title><link rel="stylesheet" href="basic.css"><link rel="stylesheet" href="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="###">凤凰山(5)</a></li><li><a href="###">海南(7)</a></li><li><a href="###">马尔代夫(12)</a></li><li><a href="###">巴厘岛(16)</a></li><li><a href="###">富山(7)</a></li><li><a href="###">东京(12)</a></li><li><a href="###">大阪(8)</a></li><li><a href="###">法瑞意(16)</a></li><li><a href="###">德国(7)</a></li><li><a href="###">土耳其(9)</a></li><li><a href="###">杭州(8)</a></li><li><a href="###">乌鲁木齐(5)</a></li><li><a href="###">吐鲁番(5)</a></li><li><a href="###">天山天池(7)</a></li><li><a href="###">鄯善(4)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="凤凰山6日游"><img src="img/hot2.jpg" alt="马尔代夫双鱼岛6日游"><img src="img/hot3.jpg" alt="海南双飞5日游"><img src="img/hot4.jpg" alt="富山-大阪-东京8日游"><img src="img/hot5.jpg" alt="法瑞意德12日游"><img src="img/hot6.jpg" alt="巴厘岛5日自助游"><img src="img/hot7.jpg" alt="花样姐姐土耳其9日游"><img src="img/hot8.jpg" alt="杭州4日游"></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><p>航班类型<mark>单程</mark>往返</p><div class="form left"><p><label for="form_city">出发城市 </label><input type="text" name="form_city" id="form_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="form_date">出发日期 </label><input type="text" name="form_date" id="form_date" placeholder="日期/时间"></p><p><label for="to_date">返回日期 </label><input type="text" name="to_date" id="to_date" placeholder="日期/时间"></p></div><div><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></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">¥768</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">¥659</td><td>¥55</td><td>无</td><td>南方航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-深圳</td><td>10-15</td><td class="price">¥568</td><td>¥43</td><td>有</td><td>西部航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-杭州</td><td>10-15</td><td class="price">¥369</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">¥868</td><td>¥65</td><td>有</td><td>首都航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-重庆</td><td>10-15</td><td class="price">¥478</td><td>¥39</td><td>有</td><td>东方航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-昆明</td><td>10-15</td><td class="price">¥568</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">¥786</td><td>¥63</td><td>无</td><td>深圳航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-长沙</td><td>10-15</td><td class="price">¥669</td><td>¥42</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></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/jihuai</li><li>邮件：jihuai@jihuai.com</li><li>地址：重庆无名路233号</li></ul></div></div><div class="bottom">Copyright© 2017 Jihuailvxing.com.All Rights Reserved.京ICP证056787号</div></footer></body>
</html>

scenery.html

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战-PC端布局</title><link rel="stylesheet" href="basic.css"><link rel="stylesheet" href="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="###">凤凰山(5)</a></li><li><a href="###">海南(7)</a></li><li><a href="###">马尔代夫(12)</a></li><li><a href="###">巴厘岛(16)</a></li><li><a href="###">富山(7)</a></li><li><a href="###">东京(12)</a></li><li><a href="###">大阪(8)</a></li><li><a href="###">法瑞意(16)</a></li><li><a href="###">德国(7)</a></li><li><a href="###">土耳其(9)</a></li><li><a href="###">杭州(8)</a></li><li><a href="###">乌鲁木齐(5)</a></li><li><a href="###">吐鲁番(5)</a></li><li><a href="###">天山天池(7)</a></li><li><a href="###">鄯善(4)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="凤凰山6日游"><img src="img/hot2.jpg" alt="马尔代夫双鱼岛6日游"><img src="img/hot3.jpg" alt="海南双飞5日游"><img src="img/hot4.jpg" alt="富山-大阪-东京8日游"><img src="img/hot5.jpg" alt="法瑞意德12日游"><img src="img/hot6.jpg" alt="巴厘岛5日自助游"><img src="img/hot7.jpg" alt="花样姐姐土耳其9日游"><img src="img/hot8.jpg" alt="杭州4日游"></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/scenery1.jpg" alt="凤凰山"><figcaption>凤凰山[共6张]</figcaption></figure><figure><img src="img/scenery2.jpg" alt="马尔代夫双鱼岛"><figcaption>马尔代夫双鱼岛[共16张]</figcaption></figure><figure><img src="img/scenery3.jpg" alt="海南"><figcaption>海南[共8张]</figcaption></figure><figure><img src="img/scenery4.jpg" alt="富山-大阪-东京"><figcaption>富山-大阪-东京[共12张]</figcaption></figure><figure><img src="img/scenery5.jpg" alt="法瑞意德"><figcaption>法瑞意德[共18张]</figcaption></figure><figure><img src="img/scenery6.jpg" alt="巴厘岛"><figcaption>巴厘岛[共7张]</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></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/jihuai</li><li>邮件：jihuai@jihuai.com</li><li>地址：重庆无名路233号</li></ul></div></div><div class="bottom">Copyright© 2017 Jihuailvxing.com.All Rights Reserved.京ICP证056787号</div></footer></body>
</html>

about.html

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>项目实战-PC端布局</title><link rel="stylesheet" href="basic.css"><link rel="stylesheet" href="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="###">凤凰山(5)</a></li><li><a href="###">海南(7)</a></li><li><a href="###">马尔代夫(12)</a></li><li><a href="###">巴厘岛(16)</a></li><li><a href="###">富山(7)</a></li><li><a href="###">东京(12)</a></li><li><a href="###">大阪(8)</a></li><li><a href="###">法瑞意(16)</a></li><li><a href="###">德国(7)</a></li><li><a href="###">土耳其(9)</a></li><li><a href="###">杭州(8)</a></li><li><a href="###">乌鲁木齐(5)</a></li><li><a href="###">吐鲁番(5)</a></li><li><a href="###">天山天池(7)</a></li><li><a href="###">鄯善(4)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="凤凰山6日游"><img src="img/hot2.jpg" alt="马尔代夫双鱼岛6日游"><img src="img/hot3.jpg" alt="海南双飞5日游"><img src="img/hot4.jpg" alt="富山-大阪-东京8日游"><img src="img/hot5.jpg" alt="法瑞意德12日游"><img src="img/hot6.jpg" alt="巴厘岛5日自助游"><img src="img/hot7.jpg" alt="花样姐姐土耳其9日游"><img src="img/hot8.jpg" alt="杭州4日游"></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>季槐旅行社旅游网创立于2017年11月，以“让旅游更简单”为使命，为消费者提供由北京、上海、广州、深圳等64个城市出发的旅游城市产品预定服务，产品全面，价格透明，全年365天24小时666电话预定，并提供丰富的后续服务和保障。</p><p>目前，季槐旅行社旅游网提供8万多种旅游产品供消费者选择，涵盖跟团、自驾、自助、邮轮、签证、酒店、景区门票以及公司旅游等，已成功服务超过400万人次出游。</p><p>同时，基于季槐旅行社旅游网全球中文景点目录以及中文旅游社区，可以更好的帮助游客了解目的地信息，妥善制定好出游计划，并方便的预定旅程中的服务项目。</p></section><p> </p><section><h2>联系方式</h2><address><ul><li>季槐旅行社股份有限公司</li><li>地址：重庆市渝北区无名路233号</li><li>邮编：123456</li><li>电话：010-23336666</li><li>传真：010-88886666</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></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li>微博：weibo.com/jihuai</li><li>邮件：jihuai@jihuai.com</li><li>地址：重庆无名路233号</li></ul></div></div><div class="bottom">Copyright© 2017 Jihuailvxing.com.All Rights Reserved.京ICP证056787号</div></footer></body>
</html>

CSS部分：

style.css

@charset "utf-8";body,h1,h2,ul,p,figure {margin: 0;padding: 0;
}
body {background-color: #fff;
}
ul {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 2px 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/logoyuan.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;
}
#search {width: 100%;min-width: 1263px;height: 600px;background: url(img/search1.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: 52px;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;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;position: relative;text-align: left;
}
#tour .info {padding: 5px 0 0 0;
}
#tour figure img {vertical-align: middle;
}
#tour figcaption {color: #777;letter-spacing: 1px;line-height: 1.5;font-size: 14px;padding: 7px 0 5px 0;height: 40px;
}
#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 {font-size: 14px;color: #f60;
}
#tour .price strong {font-size: 20px;letter-spacing: 1px;
}
#tour .type {width: 90px;height: 25px;background-color: #59b200;line-height: 25px;text-align: center;font-size: 14px;color: #fff;border-bottom-right-radius: 4px;letter-spacing: 1px;position: absolute;top: 4px;left: 4px;
}
#footer {height: 360px;background-color: #222;
}
#footer .top {width: 1263px;height: 281px;margin: 0 auto;text-align: center;}
#footer .block {width: 410px;height: 280px;color: #ccc;display: inline-block;text-align: left;vertical-align: top;}#footer .bottom {height: 80px;background-color: #000;line-height: 80px;text-align: center;color: #777;border-top: 1px solid #444;
}
#footer h2 {font-size: 24px;font-weight: normal;padding: 20px 0 0 20px;
}
#footer hr {width: 90px;border: 1px dashed #333;
}
#footer ul {font-size: 18px;color: #777;text-indent:20px;line-height: 2;
}

basic.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 2px 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/logoyuan.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;color: #ccc;display: inline-block;text-align: left;vertical-align: top;}#footer .bottom {height: 80px;background-color: #000;line-height: 80px;text-align: center;color: #777;border-top: 1px solid #444;
}
#footer h2 {font-size: 24px;font-weight: normal;padding: 20px 0 0 20px;
}
#footer hr {width: 90px;border: 1px dashed #333;
}
#footer ul {font-size: 18px;color: #777;text-indent:20px;line-height: 2;
}

column.css

@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 {font-size: 36px;color: #eee;letter-spacing: 1px;
}
#headline h3 {font-size: 20px;color: #eee;letter-spacing: 1px;
}
#container {width: 1263px;height: 1200px;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;background-color: #eee;line-height: 35px;margin: 2px 0;text-align: left;text-indent: 4px;
}
#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;color: #999;text-indent: 35px;text-align: left;
}#container .box a.trea1 {background:#eee url(img/trea1.jpg) no-repeat 10px center;
}
#container .box a.trea2 {background:#eee url(img/trea2.jpg) no-repeat 10px center;
}
#container .box a.trea3 {background:#eee url(img/trea3.jpg) no-repeat 10px center;
}
#container .box a.trea4 {background:#eee url(img/trea4.jpg) no-repeat 10px center;
}
#container .list {width: 910px; float: left;
}
#container .info {background-color: #eee;height: 45px;line-height: 45px;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 a {color: #666;
}
#container .information .left li:first-child {background-color: #fff;border-top: 2px solid #458b00;position: relative;left: 1px;
}
#container .information .right {display: inline-block;float: right;padding: 0 20px 0 0;
}
#container .information .right li {display: inline-block;width: 60px;height: 45px;line-height: 45px;text-align: center;}
#container .information .right a {padding: 3px 8px;
}
#container .information .right a.selected, #container .information .right a:hover {background-color: #458b00;color: #fff;
}
#container .tour {width: 908px;padding: 0;margin: 20px 0 0 0;border: 1px solid #eee;position: relative;
}
#container .tour img {float: left;
}
#container .tour figcaption {width: 528px;height: 220px;float: right;
}
#container .tour hgroup {width: 300px;
}
#container .tour h2 {font-size: 24px;font-weight: normal;padding: 10px 0 10px 25px;color: #333;
}
#container .tour h3 {font-size: 16px;font-weight: normal;padding: 10px 0 10px 25px;color: #666;line-height: 1.5;
}
#container .tour ol {padding: 0 0 0 25px;line-height: 2;color: #666;
}
#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 {font-size: 20px;color: #f60;
}
#container .tour .price s {font-size: 16px;color: #999;
}
#container .tour strong {font-size: 36px;
}
#container .tour .reserve {margin: 10px 0 0 0;
}
#container .tour .reserve a {display: inline-block;width: 152px;height: 40px;line-height: 40px;border-radius: 4px;text-align: center;font-size: 20px;color: #fff;background-color: #f60;
}#container .tour footer {width: 528px;height: 35px;line-height: 35px;text-indent: 25px;color: #666;background-color: #fafafa;letter-spacing: 1px;position: absolute;bottom: 0;
}
#container .tour time {color: #458B00;
}
#container .type {width: 90px;height: 25px;background-color: #59b200;line-height: 25px;text-align: center;font-size: 14px;color: #fff;border-bottom-right-radius: 4px;letter-spacing: 1px;position: absolute;top: 0;left: 0;
}
#container .tour .disc {position: absolute;top: 0;right: 0;width: 52px;height: 52px;background: url(img/disc.jpg) no-repeat;
}
#container .tour .disc span {display: block;transform: rotate(45deg);width: 52px;height: 52px;padding: 5px 0 0 0;font-size: 14px;text-indent: 7px;color: #ff7a40;}#container .information .more, #container .scenery .more {width: 200px;height: 50px;line-height: 50px;text-align: center;margin: 0px auto;border: 1px solid #ccc;background-color: #fafafa;font-size: 18px;border-radius: 10px;cursor: pointer;color: #666;
}#container .ticket, #container .scenery, #container .about {color: #666;font-size: 20px;position: absolute;} #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;}
#container .ticket p {margin: 20px 0 10px 0;font-size: 20px;
}
#container .ticket mark {color: #fff;background-color: #458B00;padding: 5px 8px;border-radius: 4px;margin: 0 10px 0 16px;
}#container .ticket .left {float: left;width: 43%;}#container .ticket .right {float: left;width: 43%;}
#container .ticket .form p {line-height: 3;
}#container .ticket .form input {width: 250px;height: 30px;border:1px solid #ccc;background-color: #fff;border-radius: 4px;padding: 5px;font-size: 18px;color: #666;margin: 0 0 0 10px;
}
#container .ticket .button {float: left;width: 9%;}
#container .ticket .submit {display: block;width: 90px;height: 90px;line-height: 90px;border-radius: 4px;text-align: center;font-size: 20px;color: #fff;background-color: #f60;border:none;position: relative;top: 35px;cursor: pointer;
}
#container .ticket .new {clear: both;padding: 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 {border-bottom: 1px solid #ddd;height: 50px;line-height: 50px;
}
#container .ticket td {border-bottom: 1px solid #ddd;text-align: center;height: 50px;line-height: 50px;
}
#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;border-radius: 4px;text-align: center;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;position: relative;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.5;font-style: normal;
}

静态旅游网站（PC端）相关推荐

校园社交网站(PC端)
项目介绍校园社交网站是一个前后端分离的项目,项目采用Vue+Node+Mysql,elementUI组件库开发. 在这里插入图片描述项目技术栈前端技术栈 vue elementUI axios ...
网站PC端跟移动端有哪些不同的区别所在？
移动时代的来临,不断的发展手机.平板等移动端设备,帮助用户更快更高效的找到有价值的信息,移动端也确实能吸引更大的流量,助力企业高速发展.那么针对PC端网站和移动端的优化又有哪些区别呢?下面一起来了解一 ...
网站pc端分享QQ好友，空间，微博
在开发pc端网站的过程中,涉及到邀请好友的功能,之前单纯的复制粘贴已经无法满足用户的体验.故,仿照移动端添加自动分享到QQ好友,QQ空间,QQ微博的功能. 分享到QQ好友:http://connect ...
php技术网站PC端用手机APP扫码实现登录
去年做的功能,整理一下分享出来如淘宝,腾讯等网站登录页面,都有APP扫码登录这个功能,去年也做了一个,基于自己的APP实现, 并非第三方登陆. 思路:1. 生成一个二维码, 二维码链接带有密钥. 2 ...
网站pc端和手机端视频的处理
在网络流行,技术大牛遍地的时代,不被拷贝,不被复制成了大家梦寐以求的,今天雯雯木就来分享下视频的处理. 今天我要推荐的是ckplayer.js!官网是:http://www.ckplayer.com, ...
静态旅游网站（移动端）
HTML部分: index.html <!DOCTYPE html> <html lang="zh-cn"> <head><meta ch ...
vue+Element实现静态旅游网站
页面效果: 1.用vue脚手架:vue-cli,新建一个vue项目. 2.npm run dev后,给小颖了一句提示:Your application is running here:http://l ...
前端电商购物网站PC端案例的一些问题
网站首页与布局网站首页分为 3 个部分,顶部导航栏,底部网站信息栏,正文部分. 要求一:不同导航菜单底部网站信息栏显示与隐藏. 解决方法:路由元信息 meta 字段新增路由元信息 meta 字段 ...
网站PC端新年快乐灯笼源代码
复制以下代码,放入你的网站首页: <meta charset="utf-8"> <div class="deng-box2"><d ...

静态旅游网站（PC端）

静态旅游网站（PC端）相关推荐

最新文章

热门文章