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>
<!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;
}
1191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
