index.html:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>项目实战-PC端固定布局（1）</title>
<meta charset="utf-8">
<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>
<!-- <header>header</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/10.png" alt="">
<figcaption>
<strong class="title"><河南省-云台山8日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散
<div class="info">
<em class="sat">满意度：99%</em>
<span class="price"><strong>$666</strong>起</span>
<div class="type">国内景点</div>
</div>
</figcaption>
</figure>
<figure>
<img src="img/20.png" alt="">
<figcaption>
<strong class="title"><四川-九寨沟8日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散
<div class="info">
<em class="sat">满意度：99%</em>
<span class="price"><strong>$666</strong>起</span>
<div class="type">国内景点</div>
</div>
</figcaption>
</figure>
<figure>
<img src="img/21.png" alt="">
<figcaption>
<strong class="title"><山东-烟台6日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散
<div class="info">
<em class="sat">满意度：99%</em>
<span class="price"><strong>$666</strong>起</span>
<div class="type">国内景点</div>
</div>
</figcaption>
</figure>
<figure>
<img src="img/22.png" alt="">
<figcaption>
<strong class="title"><杭州-西湖9日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散
<div class="info">
<em class="sat">满意度：99%</em>
<span class="price"><strong>$666</strong>起</span>
<div class="type">国内景点</div>
</div>
</figcaption>
</figure>
<figure>
<img src="img/23.png" alt="">
<figcaption>
<strong class="title"><江西-庐山5日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散
<div class="info">
<em class="sat">满意度：99%</em>
<span class="price"><strong>$666</strong>起</span>
<div class="type">国内景点</div>
</div>
</figcaption>
</figure>
<figure>
<img src="img/24.png" alt="">
<figcaption>
<strong class="title"><北京-长城7日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散
<div class="info">
<em class="sat">满意度：99%</em>
<span class="price"><strong>$666</strong>起</span>
<div class="type">国内景点</div>
</div>
</figcaption>
</figure>
<figure>
<img src="img/25.png" alt="">
<figcaption>
<strong class="title"><江苏-扬州4日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散
<div class="info">
<em class="sat">满意度：99%</em>
<span class="price"><strong>$666</strong>起</span>
<div class="type">国内景点</div>
</div>
</figcaption>
</figure>
<figure>
<img src="img/26.png" alt="">
<figcaption>
<strong class="title"><浙江-杭州6日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散
<div class="info">
<em class="sat">满意度：99%</em>
<span class="price"><strong>$666</strong>起</span>
<div class="type">国内景点</div>
</div>
</figcaption>
</figure>
<figure>
<img src="img/27.png" alt="">
<figcaption>
<strong class="title"><福建-鼓浪屿5日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散
<div class="info">
<em class="sat">满意度：99%</em>
<span class="price"><strong>$666</strong>起</span>
<div class="type">国内景点</div>
</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>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li>微博：weibo.com</li>
<li>邮件：ycku@ycku.com</li>
<li>地址：河南省周口市郸城县振兴路</li>
</ul>
</div>
</div>
<div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div>
</footer>
</body>
</html>information.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>项目实战-PC端固定布局（1）</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/column.css">
<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="###">河南（20）</a></li>
<li><a href="###">曼谷（12）</a></li>
<li><a href="###">南京（6）</a></li>
<li><a href="###">江苏（7）</a></li>
<li><a href="###">山东（8）</a></li>
<li><a href="###">内蒙（19）</a></li>
<li><a href="###">埃及（9）</a></li>
<li><a href="###">迪拜（3）</a></li>
<li><a href="###">希腊（4）</a></li>
<li><a href="###">洛杉矶（15）</a></li>
<li><a href="###">纽约（18）</a></li>
<li><a href="###">新加坡（11）</a></li>
</ul>
</div>
</div>
<div class="sidebox hot">
<h2>热门旅游</h2>
<div class="figure">
<figure>
<img src="img/12.png" alt="河南-云台山8日游">
<figcaption>河南-云台山8日游</figcaption>
</figure>
<figure>
<img src="img/13.png" alt="山东-烟台6日游">
<figcaption>山东-烟台6日游</figcaption>
</figure>
<figure>
<img src="img/14.png" alt="杭州-西湖9日游">
<figcaption>杭州-西湖9日游</figcaption>
</figure>
<figure>
<img src="img/15.png" alt="江西-庐山5日游">
<figcaption>江西-庐山5日游</figcaption>
</figure>
<figure>
<img src="img/16.png" alt="北京-长城7日游">
<figcaption>北京-长城7日游</figcaption>
</figure>
<figure>
<img src="img/17.png" alt="江苏-扬州4日游">
<figcaption>江苏-扬州4日游</figcaption>
</figure>
<figure>
<img src="img/18.png" alt="浙江-杭州6日游">
<figcaption>浙江-杭州6日游</figcaption>
</figure>
<figure>
<img src="img/19.png" alt="福建-鼓浪屿5日游">
<figcaption>福建-鼓浪屿5日游</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/20.png" alt="河南-云台山8日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>河南-云台山8日游</h2>
<h3>抱团特惠，超丰富景点，惊喜多多，快来报名，人数越多，优惠越多，赠送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>600</strong><s>￥1200</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>5.0折</span></div>
<footer>本团游由星月旅行社赞助提供，截止于<time>2017-8-8</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/21.png" alt="山东-烟台6日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>山东-烟台6日游</h2>
<h3>蓬莱仙阁，人间仙境，人数越多，优惠越多，赠送1200元成人券...</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>800</strong><s>￥1500</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>5.3折</span></div>
<footer>本团游由星月旅行社赞助提供，截止于<time>2017-8-8</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/22.png" alt="浙江-杭州6日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>浙江-杭州6日游</h2>
<h3>山好水好，型男型女，惊喜多多，快来报名，人数越多，优惠越多，赠送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>600</strong><s>￥1200</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>5.0折</span></div>
<footer>本团游由星月旅行社赞助提供，截止于<time>2017-8-8</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</li>
<li>邮件：ycku@ycku.com</li>
<li>地址：河南省周口市郸城县振兴路</li>
</ul>
</div>
</div>
<div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div>
</footer>
</body>
</html>
ticket.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>项目实战-PC端固定布局（1）</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/column.css">
<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="###">河南（20）</a></li>
<li><a href="###">曼谷（12）</a></li>
<li><a href="###">南京（6）</a></li>
<li><a href="###">江苏（7）</a></li>
<li><a href="###">山东（8）</a></li>
<li><a href="###">内蒙（19）</a></li>
<li><a href="###">埃及（9）</a></li>
<li><a href="###">迪拜（3）</a></li>
<li><a href="###">希腊（4）</a></li>
<li><a href="###">洛杉矶（15）</a></li>
<li><a href="###">纽约（18）</a></li>
<li><a href="###">新加坡（11）</a></li>
</ul>
</div>
</div>
<div class="sidebox hot">
<h2>热门旅游</h2>
<div class="figure">
<figure>
<img src="img/12.png" alt="河南-云台山8日游">
<figcaption>河南-云台山8日游</figcaption>
</figure>
<figure>
<img src="img/13.png" alt="山东-烟台6日游">
<figcaption>山东-烟台6日游</figcaption>
</figure>
<figure>
<img src="img/14.png" alt="杭州-西湖9日游">
<figcaption>杭州-西湖9日游</figcaption>
</figure>
<figure>
<img src="img/15.png" alt="江西-庐山5日游">
<figcaption>江西-庐山5日游</figcaption>
</figure>
<figure>
<img src="img/16.png" alt="北京-长城7日游">
<figcaption>北京-长城7日游</figcaption>
</figure>
<figure>
<img src="img/17.png" alt="江苏-扬州4日游">
<figcaption>江苏-扬州4日游</figcaption>
</figure>
<figure>
<img src="img/18.png" alt="浙江-杭州6日游">
<figcaption>浙江-杭州6日游</figcaption>
</figure>
<figure>
<img src="img/19.png" alt="福建-鼓浪屿5日游">
<figcaption>福建-鼓浪屿5日游</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_time">出发时间</label>
<input type="text" name="from_time" id="from_time" placeholder="时间/日期">
</p>
<p>
<label for="to_time">返回时间</label>
<input type="text" name="to_time" id="to_time" 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>
<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">￥555</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">￥555</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">￥555</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">￥555</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">￥555</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">￥555</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">￥555</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">￥555</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">￥555</td>
<td>￥50</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</li>
<li>邮件：ycku@ycku.com</li>
<li>地址：河南省周口市郸城县振兴路</li>
</ul>
</div>
</div>
<div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>项目实战-PC端固定布局（1）</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/column.css">
<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="###">河南（20）</a></li>
<li><a href="###">曼谷（12）</a></li>
<li><a href="###">南京（6）</a></li>
<li><a href="###">江苏（7）</a></li>
<li><a href="###">山东（8）</a></li>
<li><a href="###">内蒙（19）</a></li>
<li><a href="###">埃及（9）</a></li>
<li><a href="###">迪拜（3）</a></li>
<li><a href="###">希腊（4）</a></li>
<li><a href="###">洛杉矶（15）</a></li>
<li><a href="###">纽约（18）</a></li>
<li><a href="###">新加坡（11）</a></li>
</ul>
</div>
</div>
<div class="sidebox hot">
<h2>热门旅游</h2>
<div class="figure">
<figure>
<img src="img/12.png" alt="河南-云台山8日游">
<figcaption>河南-云台山8日游</figcaption>
</figure>
<figure>
<img src="img/13.png" alt="山东-烟台6日游">
<figcaption>山东-烟台6日游</figcaption>
</figure>
<figure>
<img src="img/14.png" alt="杭州-西湖9日游">
<figcaption>杭州-西湖9日游</figcaption>
</figure>
<figure>
<img src="img/15.png" alt="江西-庐山5日游">
<figcaption>江西-庐山5日游</figcaption>
</figure>
<figure>
<img src="img/16.png" alt="北京-长城7日游">
<figcaption>北京-长城7日游</figcaption>
</figure>
<figure>
<img src="img/17.png" alt="江苏-扬州4日游">
<figcaption>江苏-扬州4日游</figcaption>
</figure>
<figure>
<img src="img/18.png" alt="浙江-杭州6日游">
<figcaption>浙江-杭州6日游</figcaption>
</figure>
<figure>
<img src="img/19.png" alt="福建-鼓浪屿5日游">
<figcaption>福建-鼓浪屿5日游</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/scenery1.png" alt="河南省-云台山">
<figcaption>河南省-云台山[共8张]</figcaption>
</figure>
<figure>
<img src="img/scenery2.png" alt="河南省-云台山">
<figcaption>河南省-云台山[共8张]</figcaption>
</figure>
<figure>
<img src="img/scenery3.png" alt="河南省-云台山">
<figcaption>河南省-云台山[共8张]</figcaption>
</figure>
<figure>
<img src="img/scenery4.png" alt="河南省-云台山">
<figcaption>河南省-云台山[共8张]</figcaption>
</figure>
<figure>
<img src="img/scenery5.png" alt="河南省-云台山">
<figcaption>河南省-云台山[共8张]</figcaption>
</figure>
<figure>
<img src="img/scenery6.png" alt="河南省-云台山">
<figcaption>河南省-云台山[共8张]</figcaption>
</figure>
<figure>
<img src="img/scenery7.png" alt="河南省-云台山">
<figcaption>河南省-云台山[共8张]</figcaption>
</figure>
<figure>
<img src="img/scenery8.png" alt="河南省-云台山">
<figcaption>河南省-云台山[共8张]</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</li>
<li>邮件：ycku@ycku.com</li>
<li>地址：河南省周口市郸城县振兴路</li>
</ul>
</div>
</div>
<div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div>
</footer>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>项目实战-PC端固定布局（1）</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/column.css">
<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="###">河南（20）</a></li>
<li><a href="###">曼谷（12）</a></li>
<li><a href="###">南京（6）</a></li>
<li><a href="###">江苏（7）</a></li>
<li><a href="###">山东（8）</a></li>
<li><a href="###">内蒙（19）</a></li>
<li><a href="###">埃及（9）</a></li>
<li><a href="###">迪拜（3）</a></li>
<li><a href="###">希腊（4）</a></li>
<li><a href="###">洛杉矶（15）</a></li>
<li><a href="###">纽约（18）</a></li>
<li><a href="###">新加坡（11）</a></li>
</ul>
</div>
</div>
<div class="sidebox hot">
<h2>热门旅游</h2>
<div class="figure">
<figure>
<img src="img/12.png" alt="河南-云台山8日游">
<figcaption>河南-云台山8日游</figcaption>
</figure>
<figure>
<img src="img/13.png" alt="山东-烟台6日游">
<figcaption>山东-烟台6日游</figcaption>
</figure>
<figure>
<img src="img/14.png" alt="杭州-西湖9日游">
<figcaption>杭州-西湖9日游</figcaption>
</figure>
<figure>
<img src="img/15.png" alt="江西-庐山5日游">
<figcaption>江西-庐山5日游</figcaption>
</figure>
<figure>
<img src="img/16.png" alt="北京-长城7日游">
<figcaption>北京-长城7日游</figcaption>
</figure>
<figure>
<img src="img/17.png" alt="江苏-扬州4日游">
<figcaption>江苏-扬州4日游</figcaption>
</figure>
<figure>
<img src="img/18.png" alt="浙江-杭州6日游">
<figcaption>浙江-杭州6日游</figcaption>
</figure>
<figure>
<img src="img/19.png" alt="福建-鼓浪屿5日游">
<figcaption>福建-鼓浪屿5日游</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>今天，爸爸给我两篇文章让我学习：一篇是欧阳修的《秋声赋》，一篇是毛泽东的《沁园春·长沙》。读完之后，我觉得两篇文章风格相差很大———欧阳修的《秋声赋》所描写的秋天是那么的凄凄惨惨，而毛泽东笔下的秋天却是那么迷人。我迷惑了：同样是秋天，为什么差别如此之大呢？看见窗外秋高气爽，我不由得心动了，出去走走或许能找到答案。</p>
<p>秋天是个丰收的季节，秋橘成熟了，麦子长高了。农民伯伯兴高采烈地把它们送到加工厂做成有营养的食品。</p>
<p>我用树枝一挑，一个果子“啪”的一声掉下来。我把它拿在手里一捏，软绵绵的。我忍不住咬了一口，甜丝丝的，透着一点涩，同时带着一丝秋的凉。我抬头向天空望去，透过稀疏的树叶，只见蔚蓝的天空中飘浮着朵朵白云，偶尔有一队大雁向那遥远而又温暖的南方飞去。</p>
<p> </p>
<h2>联系我们</h2>
<address>
<ul>
<li>星月旅行社股份有限公司</li>
<li>地址：河南省周口市郸城县振宇路1111号</li>
<li>邮编：477174</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</li>
<li>邮件：ycku@ycku.com</li>
<li>地址：河南省周口市郸城县振兴路</li>
</ul>
</div>
</div>
<div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div>
</footer>
</body>
</html>
style.css:
@charset "utf-8";
/*插入背景图片*/
#search{
width:100%;
min-width: 1263px;
height: 600px;
background:url(../img/8.png) 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: 480px;
height: 54px;
background-color: #fff;
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-size: bold;
}
#tour{
width: 1263px;
height: 1300px;
/*background-color: #ccc;*/
margin:30px auto;
text-align: center;
}
#tour .center h2{
margin:10px 0;
font-size: 45px;
letter-spacing: 2px;
color: #666;
}
#tour .center p{
color:#666;
margin:10px 0;
}
#tour figure{
border:1px solid #ddd;
/*block宽度占一行，inline-block只占用自身大小*/
display: inline-block;
background-color:
padding:4px;
border-radius: 4px;
margin:10px 5px;
width:400px;
text-align: left;
position: relative;
}
#tour figure img{
vertical-align: middle;
}
#tour .info{
padding :5px 0 0 0;
}
#tour figure figcaption{
color: #777;
line-height: 1.5;
letter-spacing: 1px;
font-size: 14px;
padding: 7px 0 5px 0;
}
#tour .title{
color: #333;
font-weight: normal;
}
/*999是淡淡的颜色*/
#tour .sat{
float: right;
font-size: 13px;
color: #999;
font-size: normal;
/*background-color: red;*/
position: relative;
top: 5px;
right: 5px;
}
/*#f60是橘红色*/
#tour .price{
color: #f60;
font-size: 14px;
}
#tour .price strong{
font-size: 20px;
letter-spacing: 1px;
}
/*与figure的相对点与绝对点*/
#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;
}
basic.css
@charset "utf-8";
/*内外边距都是0*/
body,h1,h2,ul,ol,p,h3,figure{
margin: 0;
padding: 0;
}
/*将ul前面的点去掉*/
ul,ol{
list-style: outside none none;
}
/*将链接的下划线去掉*/
a{
text-decoration: none;
}
.none{
display: none;
}
/*#333是黑色*/
#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: 9999px;
}
#header .center{
width: 1263px;
height: 70px;
margin: 0 auto;
}
/*将文本移走用到text-indent并插入logo*/
#header .logo{
width: 240px;
height: 70px;
background-image: url(../img/4.png);
text-indent: -9999px;
float:left;
}
/*#eee是灰色 line-height设置垂直居中*/
#header .link{
width: 650px;
color:#eee;
float: right;
height: 70px;
line-height: 70px;
}
/*水平居中*/
#header .link li{
float: left;
width:120px;
text-align: center;
}
/*将a由内联设置成块*/
#header .link a{
color:#eee;
display: block;
}
/*鼠标效果*/
#header .link a:hover,
#header .active a{
background-color: #aaa;
}
#footer{
height: 360px;
background-color: #222;
clear: both;
position: relative;
top:20px;
}
/*版权区CSS*/
#footer .bottom{
height: 80px;
line-height: 80px;
background-color: #000;
text-align:center;
color:#777;
border-top:1px solid #444;
text-align: center;
}
#footer .top{
width: 1263px;
height: 280px;
/*background-color: red;*/
margin:0 auto;
text-align: center;
}
#footer .block{
width: 410px;
height: 280px;
display: inline-block;
text-align: left;
color: #ccc;
/*垂直居顶*/
vertical-align: top;
}
#footer ul{
font-size: 18px;
color:#777;
/*文本首行缩进*/
text-indent:1px;
line-height: 2;
}
#footer h2{
font-size: 24px;
font-weight: normal;
padding: 20px;
}
#footer hr{
width: 99%;
border:1px dashed #333;
}colume.css
@charset "utf-8";
#headline{
width:100%;
min-width: 1263px;
height: 300px;
/*模糊度，使字迹清晰*/
background:linear-gradient(to bottom right,rgba(0,0,0,0.7),rgba(0,0,0,0.0)),url(../img/11.png) no-repeat center;
}
#headline .center{
width: 1263px;
height: 300px;
margin:0 auto;
/*background-color: red;*/
}
#headline hgroup{
/*上右下左*/
padding:100px 0 0 10px;
}
#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;
background-color: #eee;
float: right;
}
#container .sidebox{
border:1px solid #eee;
margin:0 0 10px 0;
background-color: red;
background-color: #fafafa;
color:#666;
text-align: center;
}
#container .sidebox h2{
font-size: 20px;
font-weight: normal;
letter-spacing: 1px;
text-indent: 8px;
height: 40px;
line-height: 40px;
text-align: left;
}
/*景点推荐*/
#container .tag{
padding: 10px 0;
}
#container .tag li{
/*a需要将其转化为内联块才能设置宽度高度*/
display: inline-block;
width: 100px;
height: 35px;
line-height: 35px;
margin:2px 0;
background-color:#eee;
color: #666;
/*text-indent: 8px;*/
text-align: left;
}
#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 .list{
width: 900px;
/*background-color: #ccc;*/
float: left;
}
/*旅游百宝箱*/
#container .box{
padding: 10px 0;
}
#container .box a{
display: inline-block;
width: 150px;
height: 40px;
line-height: 40px;
margin:2px 0;
background-color:#eee;
color: #666;
text-indent: 35px;
text-align: left;
}
#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 .infor{
height: 45px;
line-height: 45px;
background-color: #eee;
margin: 0 0 20px 0;
}
#container .information .left{
display: inline-block;
/* background-color: maroon;*/
float: left;
}
#container .information.left li{
display: inline-block;
/*background-color: #ccc;*/
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;
padding:0 20px 0 0;
float: right;
}
#container .information .right li{
display: inline-block;
/*background-color: green;*/
width: 60px;
height: 45px;
line-height: 45px;
text-align: center;
}
#container .information .right a{
color: #666;
padding:3px 8px;
}
#container .information .right a.selected{
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: 508px;
height:300px;
float: right;
}
#container .tour footer{
width: 508px;
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 .tour hgroop{
width: 300px;
}
#container .tour h2{
font-size: 24px;
font-weight: normal;
padding :20px 0 10px 25px;
color: #333;
}
#container .tour h3{
font-size: 16px;
padding: 20px 0 10px 25px;
line-height: 1.5;
font-weight: normal;
color: #666;
width: 250px;
}
#container .tour ol{
padding: 0 0 0 25px;
color:#666;
line-height: 2;
}
#container .tour mark{
padding:0px 5px;
border-radius: 4px;
color:#458b00;
border:1px solid #458b00;
background-color: #fff;
}
#container .tour .buy{
position: absolute;
top:55px;
right:30px;
}
#container .tour s{
font-size: 16px;
color:#999;
}
#container .tour .price{
font-size: 20px;
color: #f60;
}
#container .tour .price 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;
background-color: #f60;
color: #fff;
font-size: 20px;
text-align: center;
}
#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); */
}
#container .tour .disc span{
display: block;
transform: rotate(45deg);
text-indent:7px;
padding: 5px 0 0 0 ;
width: 52px;
height: 52px;
color: #ff7a4d;
font-size: 14px;
}
#container .information .more, #container .scenery .more{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
border:1px solid #ccc;
border-radius: 10px;
font-size: 18px;
margin: 0 auto;
cursor: pointer;
background-color: #fafafa;
}
#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;
font-size: 30px;
font-weight: normal;
padding:0 0 15px 0;
}
#container .ticket .type{
font-size: 20px;
margin:20px 0 10px 0;
}
#container .ticket .type mark{
color: #fff;
background: #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{
}
#container .ticket .form input{
width: 250px;
height: 30px;
border:1px solid #ccc;
background: #fff;
border-radius: 4px;
padding: 5px;
font-size: 18px;
color: #666;
margin:0 0 0 16px;
}
#container .ticket .form{
line-height: 3;
}
#container .ticket .submit{
display: block;
width: 90px;
height: 90px;
line-height: 90px;
border-radius: 4px;
background-color: #f60;
color: #fff;
font-size: 20px;
text-align: center;
border:none;
cursor:pointer;
position: relative;
top:-28px;
}
#container .ticket .new{
margin:20px 0 0 0;
font-size: 20px;
}
#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{
height: 50px;
line-height: 50px;
border:1px solid #ddd;
text-align: center;
border-bottom:1px solid #ddd;
}
#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;
background-color: #f60;
color: #fff;
font-size: 20px;
text-align: center;
}
#container .scenery figure{
border:1px solid #ddd;
/*block宽度占一行，inline-block只占用自身大小*/
display: inline-block;
background-color:
padding:4px;
border-radius: 4px;
margin:10px 5px 10px 0;
width:430px;
text-align: left;
}
#container .scenery figcaption{
text-align: center;
padding: 5px 0;
}
#container .about p{
font-size: 20px;
color:#666;
line-height: 2;
margin:20px 0;
}
#container .about address{
font-style: normal;
font-size: 20px;
color:#666;
margin:20px 0;
line-height: 1.6;
}
8652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
