第31章 项目实战-PC端固定布局9

第31 章项目实战-PC 端固定布局[8]
学习要点：
1.资讯内容
2.代码详解

本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面，第一个项目采用PC 端
固定布局来实现。
一．资讯内容
和首页一样，只不过这里，布局方式有所不同，具体如下：
二．代码详解
//全部代码
<figure class="tour">
<img src="img/tour1.jpg" alt="曼谷-芭提雅6 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6 日游</h2>
<h3>包团特惠，超丰富景点，升级1 晚国五，无自费，赠送600
元成人券...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>2864</strong>
<s>¥3980</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7 折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour2.jpg" alt="马尔代夫6 日自助游">
<figcaption>
<article>
<header>
<hgroup>
<h2>马尔代夫6 日自助游</h2>
<h3>双鱼岛Olhuveli4 晚，上海出发，机+酒包含:早晚餐+快
艇...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>8039</strong>
<s>¥9980</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">出境长线</div>
<div class="disc"><span>7.7 折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour3.jpg" alt="海南双飞5 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>海南双飞5 日游</h2>
<h3>含盐城接送，全程挂牌四星酒店，一价全含，零自费“自
费项目”免费送...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>2709</strong>
<s>¥3280</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">自助旅游</div>
<div class="disc"><span>6.5 折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour4.jpg" alt="富山-大阪-东京8 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>富山-大阪-东京8 日游</h2>
<h3>暑期亲子，2 天自由，无导游安排自费项目，全程不强迫购
物...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9499</strong>
<s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">自助旅游</div>
<div class="disc"><span>8.8 折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour5.jpg" alt="法瑞意德12 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>法瑞意德12 日游</h2>
<h3>4 至5 星，金色列车，少女峰，部分THE MALL...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9199</strong>
<s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内短线</div>
<div class="disc"><span>9.2 折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="巴厘岛6 日半自助游">
<figcaption>
<article>
<header>
<hgroup>
<h2>巴厘岛6 日半自助游</h2>
<h3>蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>6488</strong>
<s>¥8460</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内短线</div>
<div class="disc"><span>7.6 折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour7.jpg" alt="塞舌尔迪拜9 日自助游">
<figcaption>
<article>
<header>
<hgroup>
<h2>塞舌尔迪拜9 日自助游</h2>
<h3>一游两国，4 晚塞舌尔，2 晚迪拜，香港EK 往返...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9669</strong>
<s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">游轮观光</div>
<div class="disc"><span>9.6 折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour8.jpg" alt="花样姐姐土耳其9 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>花样姐姐土耳其9 日游</h2>
<h3>最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑
剔味蕾...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9999</strong>
<s>9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">出境长线</div>
<div class="disc"><span>10 折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour9.jpg" alt="大阪-京都-箱根双飞6 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>大阪-京都-箱根双飞6 日游</h2>
<h3>盐城直飞，不走回头路，境外无自费，超值之旅...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>5284</strong>
<s>8437</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内短线</div>
<div class="disc"><span>6.8 折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<div class="more">加载更多...</div>
//CSS 部分
#container .tour {
height: 230px;
position: relative;
border: 1px solid #eee;
margin: 0 0 20px 0;
}
#container .tour img {
float: left;
}
#container .tour figcaption {
width: 528px;
height: 230px;
float: right;
}
#container .tour hgroup {
width: 300px;
}
#container .tour h2 {
font-size: 24px;
font-weight: normal;
padding: 10px 0 10px 25px;
color: #333;
}
#container .tour h3 {
font-size: 16px;
padding: 10px 0 10px 25px;
line-height: 1.5;
font-weight: normal;
color: #666;
}
#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 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;
text-align: center;
border-bottom-right-radius: 4px;
background-color: #59b200;
font-size: 14px;
color: #fff;
letter-spacing: 1px;
position: absolute;
top: 0;
left: 0;
}
#container .tour .disc {
width: 52px;
height: 52px;
background: url(../img/disc.png) no-repeat;
position: absolute;
top: 0;
right: 0;
}
#container .tour .disc span {
width: 52px;
height: 52px;
display: block;
font-size: 14px;
color: #ff7a4d;
transform: rotate(45deg);
text-indent: 7px;
padding: 5px 0 0 0;
}
#container .tour footer {
width: 528px;
height: 35px;
line-height: 35px;
text-indent: 25px;
color: #666;
position: absolute;
bottom: 0;
background-color: #fafafa;
letter-spacing: 1px;
}
#container .tour time {
color: #458B00;
}
#container .list .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;
}

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>项目实战--PC端固定布局</title>
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行社</h1>
<nav class="link">
<h2 class="none">网站导航</h2>
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="information.html">旅游资讯</a></li>
<li><a href="###">机票订购</a></li>
<li><a href="###">风景欣赏</a></li>
<li><a href="###">公司简介</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" >
<figcaption>
<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
<div class="info">
<em class="sat">满意度 77%</em>
<span class="price">￥ <strong>2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour2.jpg" alt="马尔代夫双鱼岛Olhuveli4晚6日自助游">
<figcaption>
<strong class="title">&lt;马尔代夫双鱼岛Olhuveli4晚6日自助游&gt;</strong> 上海出发，机+酒包含:早晚餐+快艇
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>8039</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour3.jpg" alt="海南双飞5日游">
<figcaption>
<strong class="title">&lt;海南双飞5日游&gt;</strong> 含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送
<div class="info">
<em class="sat">满意度 90%</em>
<span class="price">¥ <strong>2709</strong> 起</span>
</div>
<div class="type">自助旅游</div>
</figcaption>
</figure>
<figure>
<img src="img/tour4.jpg" alt="富山-大阪-东京8日游">
<figcaption>
<strong class="title">&lt;富山-大阪-东京8日游&gt;</strong> 暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>9499</strong> 起</span>
</div>
<div class="type">自助旅游</div>
</figcaption>
</figure>
<figure>
<img src="img/tour5.jpg" alt="法瑞意德12日游">
<figcaption>
<strong class="title">&lt;法瑞意德12日游&gt;</strong> 4至5星，金色列车，少女峰，部分THE MALL
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>9199</strong> 起</span>
</div>
<div class="type">国内短线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour6.jpg" alt="巴厘岛6日半自助游">
<figcaption>
<strong class="title">&lt;巴厘岛6日半自助游&gt;</strong> 蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩
<div class="info">
<em class="sat">满意度 95%</em>
<span class="price">¥ <strong>6488</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour7.jpg" alt="塞舌尔迪拜9日自助游">
<figcaption>
<strong class="title">&lt;塞舌尔迪拜9日自助游&gt;</strong> 一游两国，4晚塞舌尔，2晚迪拜，香港EK往返
<div class="info">
<em class="sat">满意度 100%</em>
<span class="price">¥ <strong>9669</strong> 起</span>
</div>
<div class="type">游轮观光</div>
</figcaption>
</figure>
<figure>
<img src="img/tour8.jpg" alt="花样姐姐土耳其9日或10日游">
<figcaption>
<strong class="title">&lt;花样姐姐土耳其9日或10日游&gt;</strong> 最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾
<div class="info">
<em class="sat">满意度 93%</em>
<span class="price">¥ <strong>9999</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figcaption>

</figure>
<figure>
<img src="img/tour9.jpg" alt="大阪-京都-箱根双飞6日游">
<figcaption>
<strong class="title">&lt;大阪-京都-箱根双飞6日游&gt;</strong> 盐城直飞，不走回头路，境外无自费，超值之旅
<div class="info">
<em class="sat">满意度 100%</em>
<span class="price">¥ <strong>5284</strong> 起</span>
</div>
<div class="type">国内短线</div>
</figcaption>
</figure>
</div>

<footer id="footer">
<div class="top">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅行社</li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li>旅游合同签订方式？</li>
<li>儿童价是基于什么制定的？</li>
<li>旅游的线路品质怎么界定的？</li>
<li>单房差是什么？</li>
<li>旅游保险有那些种类？</li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li>微博：weibo.com/ycku</li>
<li>邮件：[email protected]</li>
<li>地址：江苏盐城无名路123 号</li>
</ul>
</div>
</div>
<div class="bottom">Copyright © YCKU 瓢城旅行社| 苏ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345</div>
</footer>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>项目实战--PC端固定布局</title>
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" href="css/column.css">
</head>
<body>

<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行社</h1>
<nav class="link">
<h2 class="none">网站导航</h2>
<ul>
<li><a href="index.html">首页</a></li>
<li class="active"><a href="information.html">旅游资讯</a></li>
<li><a href="###">机票订购</a></li>
<li><a href="###">风景欣赏</a></li>
<li><a href="###">公司简介</a></li>
</ul>
</nav>
</div>
</header>

<div id="headline">
<div class="center">
<hgroup>
<h2>旅游资讯</h2>
<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
</hgroup>
</div>
</div>

<div id="container">
<aside class="sidebar">
<div class="sidebox recommend">
<h2>景点推荐</h2>
<div class="tag">
<ul>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">东京(5)</a></li>
<li><a href="###">西双版纳(8)</a></li>
<li><a href="###">漓江(16)</a></li>
<li><a href="###">呼伦贝尔(4)</a></li>
<li><a href="###">首尔(9)</a></li>
<li><a href="###">巴厘岛(15)</a></li>
<li><a href="###">土耳其(22)</a></li>
<li><a href="###">夏威夷(5)</a></li>
<li><a href="###">巴厘岛(11)</a></li>
<li><a href="###">毛里求斯(7)</a></li>
<li><a href="###">吉普岛(4)</a></li>
<li><a href="###">希腊(18)</a></li>
<li><a href="###">法瑞意(8)</a></li>
<li><a href="###">马尔代夫(9)</a></li>
<li><a href="###">新西兰(16)</a></li>
<li><a href="###">埃及(11)</a></li>
<li><a href="###">迪拜(14)</a></li>
<li><a href="###">斯里兰卡(7)</a></li>
<li><a href="###">麦哈顿(3)</a></li>
<li><a href="###">大阪(15)</a></li>
</ul>
</div>
</div>
<div class="sidebox hot">
<h2>热门旅游</h2>
<div class="figure">
<figure>
<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot2.jpg" alt="马尔代夫双鱼6日游">
<figcaption>马尔代夫双鱼6日游</figcaption>
</figure>
<figure>
<img src="img/hot3.jpg" alt="海南双飞5日游">
<figcaption>海南双飞5日游</figcaption>
</figure>
<figure>
<img src="img/hot4.jpg" alt="富山大阪东京8日游">
<figcaption>富山大阪东京8日游</figcaption>
</figure>
<figure>
<img src="img/hot5.jpg" alt="法瑞意德12日游">
<figcaption>法瑞意德12日游</figcaption>
</figure>
<figure>
<img src="img/hot6.jpg" alt="巴厘岛6日半游">
<figcaption>巴厘岛6日半游</figcaption>
</figure>
<figure>
<img src="img/hot7.jpg" alt="塞舌尔迪拜9日游">
<figcaption>塞舌尔迪拜9日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="花样土耳其10日游">
<figcaption>花样土耳其10日游</figcaption>
</figure>
</div>
</div>
<div class="sidebox treasure">
<h2>旅游百宝箱</h2>
<div class="box">
<a href="###" class="trea1">天气预报</a>
<a href="###" class="trea2">火车票查询</a>
<a href="###" class="trea3">航空查询</a>
<a href="###" class="trea4">地铁线路查询</a>
</div>
</div>
</aside>
<div class="list">
<div class="infor">
<ul class="left">
<li><a href="###">限时特价</a></li>
<li><a href="###">热门推荐</a></li>
</ul>
<ul class="right">
<li><a href="###" class="selected">推荐</a></li>
<li><a href="###">折扣</a></li>
<li><a href="###">价格</a></li>
</ul>
</div>
<figure class="tour">
<img src="img/tour1.jpg" alt="曼谷-芭提雅6日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1 晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark>：春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark>：11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">￥<strong>2864</strong> <s>¥3980</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour2.jpg" alt="马尔代夫6日自助游">
<figcaption>
<article>
<header>
<hgroup>
<h2>马尔代夫6日自助游</h2>
<h3>双鱼岛Olhuveli4晚，上海出发，机+酒 包含:早晚餐+快艇...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>8039</strong> <s>¥9980</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">出境长线</div>
<div class="disc"><span>7.7折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour3.jpg" alt="海南双飞5日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>海南双飞5日游</h2>
<h3>含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>2709</strong> <s>¥3280</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">自助旅游</div>
<div class="disc"><span>6.5折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour4.jpg" alt="富山-大阪-东京8日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>富山-大阪-东京8日游</h2>
<h3>暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9499</strong> <s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">自助旅游</div>
<div class="disc"><span>8.8折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour5.jpg" alt="法瑞意德12日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>法瑞意德12日游</h2>
<h3>4至5星，金色列车，少女峰，部分THE MALL...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9199</strong> <s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内短线</div>
<div class="disc"><span>9.2折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="巴厘岛6日半自助游">
<figcaption>
<article>
<header>
<hgroup>
<h2>巴厘岛6日半自助游</h2>
<h3>蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>6488</strong> <s>¥8460</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内短线</div>
<div class="disc"><span>7.6折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour7.jpg" alt="塞舌尔迪拜9日自助游">
<figcaption>
<article>
<header>
<hgroup>
<h2>塞舌尔迪拜9日自助游</h2>
<h3>一游两国，4晚塞舌尔，2晚迪拜，香港EK往返...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9669</strong> <s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">游轮观光</div>
<div class="disc"><span>9.6折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour8.jpg" alt="花样姐姐土耳其9日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>花样姐姐土耳其9日游</h2>
<h3>最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9999</strong> <s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">出境长线</div>
<div class="disc"><span>10折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour9.jpg" alt="大阪-京都-箱根双飞6日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>大阪-京都-箱根双飞6日游</h2>
<h3>盐城直飞，不走回头路，境外无自费，超值之旅...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>5284</strong> <s>¥8437</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内短线</div>
<div class="disc"><span>6.8折</span></div>
<footer>本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<div class="more">加载更多...</div>
</div>
</div>

<footer id="footer">
<div class="top">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅行社</li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li>旅游合同签订方式？</li>
<li>儿童价是基于什么制定的？</li>
<li>旅游的线路品质怎么界定的？</li>
<li>单房差是什么？</li>
<li>旅游保险有那些种类？</li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li>微博：weibo.com/ycku</li>
<li>邮件：[email protected]</li>
<li>地址：江苏盐城无名路123 号</li>
</ul>
</div>
</div>
<div class="bottom">Copyright © YCKU 瓢城旅行社| 苏ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345</div>
</footer>

</body>
</html>

@charset "utf-8";

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

@charset "utf-8";

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

@charset "utf-8";

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

时间： 2024-11-07 09:19:28

第31章 项目实战-PC端固定布局9的相关文章

第31章 项目实战-PC端固定布局8

第31 章项目实战-PC 端固定布局[8]学习要点:1.归类合并2.子导航 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．归类合并在前面几节课中,有一部分HTML 代码比较松散,没有统一到一个类别块里.比如:很多的标签超链接没有归类到UL 里,导致一些问题等.//松散的<a>标签<a href="###">曼谷(12)</a><a href="###">东京

第31章 项目实战-PC端固定布局7

第31 章项目实战-PC 端固定布局[7]学习要点:1.侧栏制作2.详细代码 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．侧栏制作本节课,主要设计一下内容页面的侧栏部分,分三个小块.经过思考,侧栏会包含一些图片,而主要部分也会包含图片,那么侧栏放在左边可能会和主栏的图片冲突导致不协调,所以,我们把侧栏更换到右边.//实际上,还去掉了高度,让其自适应#container {width: 1263px;margin: 30px auto

第31章 项目实战-PC端固定布局3

第31 章项目实战-PC 端固定布局[3]学习要点:1.搜索区2.插入大图3.搜索框 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．搜索区本节课,我们接着header 头部往下,来设计一块搜索区.这个区域,可以是广告大图,也可以是用户注册,也可以是一个搜索条,都是一个大幅背景,内嵌一个表单.具体造型如下:从表面上来分析,就是插入一张背景大图,然后居中一个搜索条.但是,我们要求最小在1280 分辨率.最大在1920 分辨率能保持最佳的观

第31章 项目实战-PC端固定布局5

第31 章项目实战-PC 端固定布局[5]学习要点:1.底部区域2.说明区域3.版权及证件区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．底部区域本节课,我们将探讨一下首页中最底部的区域.这部分区域由两个部分组成,一个是说明内容,有:合作伙伴.旅游FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号.//底部区域父元素<footer id="footer">...</footer>//底部父元

第31章 项目实战-PC端固定布局4

第31 章项目实战-PC 端固定布局[4]学习要点:1.热门旅游区2.标题介绍区3.旅游项目区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．热门旅游区本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下://热门旅游区父元素<div id="tour">...</div>//旅游父元素#tour {width

第31 章项目实战-PC 端固定布局10

第31 章项目实战-PC 端固定布局[10]学习要点:1.机票预定2.代码详解 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．机票预定机票预定页面,具体如下:二．代码详解//全部代码<form action="###"><h2>机票预定</h2><div class="type"><p>航程类型<mark>单程</mark>

第31章 项目实战-PC端固定布局6

第31 章项目实战-PC 端固定布局[6]学习要点:1.分离CSS2.头部区域3.内容区域 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．分离CSS本节课,我们将要创建一个新的页面:旅游资讯.那么,现在需要解决的问题是,如果把首页重复的部分移植到新的页面而减少冗余.最恰当的方法就是:将CSS 部分中重复的部分分离出来,单独创建一个CSS,以便后续的页面重复调用.而首页的HTML 重复的部分,一般是通过动态网页,比如PHP 等解决重复问

第 31 章 项目实战-PC 端固定布局[4]

学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．热门旅游区 本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下: //热门旅游区父元素 <div id="tour"> ... </div> //旅游父元素 #tour { w

第31章 项目实战-PC端固定布局[1]

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计