前言
开始学习前端时适用的静态网页小案例 html+css
一、效果
二、页面分布
分为五个基础页面
index.html
information.html
scenery.html
ticket.html
about.html
1.index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><link rel="stylesheet" href="./css/public.css"><link rel="stylesheet" href="./css/index.css"></head><body><header id="header"><div class="center"><div class="logo"></div><nav class="link"><ul><li class="active"><a href="index.html">首页</a></li><li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li><li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li><li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li><li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li></ul></nav></div></header><div id="adver"><img src="img/adver.jpg" alt=""><div class="center copy"><input type="text" class="search" placeholder="请输入旅游景点或城市"><button class="button">搜索</button></div></div><!-- main --><div id="tour"><section class="center"><h2>热门旅游</h2><p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p></section><figure><img src="img/tour6.jpg" alt=""><figcaption><div class="tour_title"><strong class="title"><曼谷-芭提雅6日游></strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</div><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/tour6.jpg" alt=""><figcaption><div class="tour_title"><strong class="title"><曼谷-芭提雅6日游></strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</div><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/tour6.jpg" alt=""><figcaption><div class="tour_title"><strong class="title"><曼谷-芭提雅6日游></strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</div><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/tour6.jpg" alt=""><figcaption><div class="tour_title"><strong class="title"><曼谷-芭提雅6日游></strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</div><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/tour6.jpg" alt=""><figcaption><div class="tour_title"><strong class="title"><曼谷-芭提雅6日游></strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</div><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/tour6.jpg" alt=""><figcaption><div class="tour_title"><strong class="title"><曼谷-芭提雅6日游></strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</div><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/tour6.jpg" alt=""><figcaption><div class="tour_title"><strong class="title"><曼谷-芭提雅6日游></strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</div><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/tour6.jpg" alt=""><figcaption><div class="tour_title"><strong class="title"><曼谷-芭提雅6日游></strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</div><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/tour6.jpg" alt=""><figcaption><div class="tour_title"><strong class="title"><曼谷-芭提雅6日游></strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</div><div class="info"><em class="sat">满意度 77%</em><span class="price">¥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure></div><footer id="footer"><div class="top xs-hidden"><div class="block left"><h2>合作伙伴</h2><hr><ul><li><a href="#">途牛旅游网</a></li><li><a href="#">驴妈妈旅游网</a></li><li><a href="#">携程旅游</a></li><li><a href="#">中国青年旅行社</a></li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li><a href="#">旅游合同签订方式?</a></li><li><a href="#">儿童价是基于什么制定的?</a></li><li><a href="#">旅游的线路品质怎么界定的?</a></li><li><a href="#">单房差是什么?</a></li><li><a href="#">旅游保险有那些种类?</a></li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li><a href="#">微博:weibo.com/ycku</a></li><li><a href="#">邮件:ycku@ycku.com</a></li><li><a href="#">地址:江苏盐城无名路123号</a></li></ul></div></div><div class="clearfix"></div><div class="version sm-visible">客户端 | 触屏版 | 电脑版</div><div class="bottom">Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证:L-YC-BK12345</span></div></footer></body>
</html>
2.information.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><link rel="stylesheet" href="./css/public.css"><link rel="stylesheet" href="./css/index.css"></head><body><header id="header"><div class="center"><div class="logo"></div><nav class="link"><ul><li><a href="index.html">首页</a></li><li class="active"><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li><li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li><li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li><li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li></ul></nav></div></header><div id="headline"><img src="img/headline.jpg" alt=""><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3></hgroup></div><!-- main --><div id="container"><!-- aside --><aside class="aside"><div class="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="hot"><h2>热卖旅游</h2><div class="figure"><figure><img src="img/hot6.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure></div></div><div class="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"><h2>旅游资讯</h2><figure class="tour"><img src="img/tour6.jpg" alt=""><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3></hgroup></header><ol class="xs-hidden"><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 xs-hidden"><a href="#">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer class="xs-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt=""><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3></hgroup></header><ol class="xs-hidden"><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 xs-hidden"><a href="#">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer class="xs-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt=""><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3></hgroup></header><ol class="xs-hidden"><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 xs-hidden"><a href="#">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer class="xs-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt=""><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3></hgroup></header><ol class="xs-hidden"><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 xs-hidden"><a href="#">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer class="xs-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt=""><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3></hgroup></header><ol class="xs-hidden"><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 xs-hidden"><a href="#">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer class="xs-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt=""><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3></hgroup></header><ol class="xs-hidden"><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 xs-hidden"><a href="#">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer class="xs-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt=""><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3></hgroup></header><ol class="xs-hidden"><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 xs-hidden"><a href="#">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer class="xs-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt=""><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3></hgroup></header><ol class="xs-hidden"><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 xs-hidden"><a href="#">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer class="xs-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer></article></figcaption></figure><figure class="tour"><img src="img/tour6.jpg" alt=""><figcaption><article><header><hgroup><h2>曼谷-芭提雅6日游</h2><h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3></hgroup></header><ol class="xs-hidden"><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 xs-hidden"><a href="#">立即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer class="xs-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer></article></figcaption></figure></div></div><!-- footer --><footer id="footer"><div class="top xs-hidden"><div class="block left"><h2>合作伙伴</h2><hr><ul><li><a href="#">途牛旅游网</a></li><li><a href="#">驴妈妈旅游网</a></li><li><a href="#">携程旅游</a></li><li><a href="#">中国青年旅行社</a></li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li><a href="#">旅游合同签订方式?</a></li><li><a href="#">儿童价是基于什么制定的?</a></li><li><a href="#">旅游的线路品质怎么界定的?</a></li><li><a href="#">单房差是什么?</a></li><li><a href="#">旅游保险有那些种类?</a></li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li><a href="#">微博:weibo.com/ycku</a></li><li><a href="#">邮件:ycku@ycku.com</a></li><li><a href="#">地址:江苏盐城无名路123号</a></li></ul></div></div><div class="clearfix"></div><div class="version sm-visible">客户端 | 触屏版 | 电脑版</div><div class="bottom">Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证:L-YC-BK12345</span></div></footer></body>
</html>
3.scenery.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="./css/information.css"><link rel="stylesheet" href="./css/public.css"></head><body><header id="header"><div class="center"><div class="logo"></div><nav class="link"><ul><li><a href="index.html">首页</a></li><li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li><li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li><li class="active xs-hidden"><a href="scenery.html">风景欣赏</a></li><li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li></ul></nav></div></header><div id="headline"><img src="img/headline.jpg" alt=""><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3></hgroup></div><!-- main --><div id="container"><!-- aside --><aside class="aside"><div class="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="hot"><h2>热卖旅游</h2><div class="figure"><figure><img src="img/hot6.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure></div></div><div class="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"><h2>风景欣赏</h2><figure><img src="img/s4.jpg" alt=""><figcaption><p>富山-大版-东京[共9张]</p></figcaption></figure><figure><img src="img/s4.jpg" alt=""><figcaption><p>富山-大版-东京[共9张]</p></figcaption></figure><figure><img src="img/s4.jpg" alt=""><figcaption><p>富山-大版-东京[共9张]</p></figcaption></figure><figure><img src="img/s4.jpg" alt=""><figcaption><p>富山-大版-东京[共9张]</p></figcaption></figure><figure><img src="img/s4.jpg" alt=""><figcaption><p>富山-大版-东京[共9张]</p></figcaption></figure><figure><img src="img/s4.jpg" alt=""><figcaption><p>富山-大版-东京[共9张]</p></figcaption></figure><figure><img src="img/s4.jpg" alt=""><figcaption><p>富山-大版-东京[共9张]</p></figcaption></figure><figure><img src="img/s4.jpg" alt=""><figcaption><p>富山-大版-东京[共9张]</p></figcaption></figure><figure><img src="img/s4.jpg" alt=""><figcaption><p>富山-大版-东京[共9张]</p></figcaption></figure><div class="more">加载更多...</div></div></div><!-- footer --><footer id="footer"><div class="top"><div class="block left"><h2>合作伙伴</h2><hr><ul><li><a href="#">途牛旅游网</a></li><li><a href="#">驴妈妈旅游网</a></li><li><a href="#">携程旅游</a></li><li><a href="#">中国青年旅行社</a></li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li><a href="#">旅游合同签订方式?</a></li><li><a href="#">儿童价是基于什么制定的?</a></li><li><a href="#">旅游的线路品质怎么界定的?</a></li><li><a href="#">单房差是什么?</a></li><li><a href="#">旅游保险有那些种类?</a></li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li><a href="#">微博:weibo.com/ycku</a></li><li><a href="#">邮件:ycku@ycku.com</a></li><li><a href="#">地址:江苏盐城无名路123号</a></li></ul></div></div><div class="clearfix"></div><div class="bottom">Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 | 旅行社经营许可证:L-YC-BK12345</div></footer></body>
</html>
4.ticket.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="./css/public.css"><link rel="stylesheet" href="./css/index.css"></head><body><header id="header"><div class="center"><div class="logo"></div><nav class="link"><ul><li><a href="index.html">首页</a></li><li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li><li class="active"><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li><li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li><li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li></ul></nav></div></header><div id="headline"><img src="img/headline.jpg" alt=""><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3></hgroup></div><!-- main --><div id="container"><!-- aside --><aside class="aside"><div class="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="hot"><h2>热卖旅游</h2><div class="figure"><figure><img src="img/hot6.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure></div></div><div class="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><fieldset class="type"><p>航程类型 <mark>单程</mark> 往返</p></fieldset><fieldset class="form left"><p><label for="from_city">出发城市</label><input type="text" name="from_city" id="from_city" placeholder="城市名"></p><p><label for="from_city">返回城市</label><input type="text" name="to_city" id="to_city" placeholder="城市名"></p></fieldset><fieldset class="form right"><p><label for="from_date">出发时间</label><input type="text" name="from_date" id="from_date" placeholder="时间/日期"></p><p><label for="from_date">返回时间</label><input type="text" name="to_date" id="to_date" placeholder="时间/日期"></p></fieldset><fieldset class="form button"><p><button type="submit" class="submit">预定</button></p></fieldset></form><div class="new"><h2>最新机票</h2><ul><li>热门城市:</li><li>北京</li><li>上海</li><li>广州</li><li>深圳</li><li>重庆</li><li>成都</li><li>杭州</li><li>南京</li></ul><table><thead><tr><th>路线</th><th>日期</th><th>价格</th><th class="xs-hidden">税费</th><th class="xs-hidden">餐食</th><th>航班</th><th>预定</th></tr></thead><tbody><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr><tr><td>北京-成都</td><td>10-15</td><td class="price">¥745</td><td class="xs-hidden">¥50</td><td class="xs-hidden">有</td><td>春秋航空</td><td><a href="###" class="reserve">预定</a></td></tr></tbody><tfoot><td colspan="7"><a href="###" class="more2">加载更多航班...</a></td></tfoot></table></div></div></div><!-- footer --><footer id="footer"><div class="top xs-hidden"><div class="block left"><h2>合作伙伴</h2><hr><ul><li><a href="#">途牛旅游网</a></li><li><a href="#">驴妈妈旅游网</a></li><li><a href="#">携程旅游</a></li><li><a href="#">中国青年旅行社</a></li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li><a href="#">旅游合同签订方式?</a></li><li><a href="#">儿童价是基于什么制定的?</a></li><li><a href="#">旅游的线路品质怎么界定的?</a></li><li><a href="#">单房差是什么?</a></li><li><a href="#">旅游保险有那些种类?</a></li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li><a href="#">微博:weibo.com/ycku</a></li><li><a href="#">邮件:ycku@ycku.com</a></li><li><a href="#">地址:江苏盐城无名路123号</a></li></ul></div></div><div class="clearfix"></div><div class="version sm-visible">客户端 | 触屏版 | 电脑版</div><div class="bottom">Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证:L-YC-BK12345</span></div></footer></body>
</html>
5.about.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="./css/public.css"><link rel="stylesheet" href="./css/index.css"></head><body><header id="header"><div class="center"><div class="logo"></div><nav class="link"><ul><li><a href="index.html">首页</a></li><li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li><li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li><li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li><li class="active"><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li></ul></nav></div></header><div id="headline"><img src="img/headline.jpg" alt=""><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3></hgroup></div><!-- main --><div id="container"><!-- aside --><aside class="aside"><div class="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="hot"><h2>热卖旅游</h2><div class="figure"><figure><img src="img/hot6.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure><figure><img src="img/hot8.jpg" alt=""><figcaption>曼谷-芭提雅6日游</figcaption></figure></div></div><div class="treasure"><h2>旅游百宝箱</h2><div class="box"><a href="###" class="trea1">天气预报</a><a href="###" class="trea2">火车票查询</a><a href="###" class="trea3">航空查询</a><a href="###" class="trea4">地铁线路查询</a></div></div></aside><!-- 主要内容 --><div class="list about"><section><h2>关于我们</h2><p>瓢城旅行社旅游网创立于2006年10月,以“让旅游更简单”为使命,为消费者提供由北京、上海、广州、深圳等64个城市出发的旅游产品预订服务,产品全面,价格透明,全年365天24小时400电话预订,并提供丰富的后续服务和保障。</p><p>目前,瓢城旅行社旅游网提供8万余种旅游产品供消费者选择,涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等,已成功服务累计超过400万人次出游。</p><p>同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区,可以更好地帮助游客了解目的地信息,妥善制定好出游计划,并方便地预订旅程中的服务项目。</p></section><p> </p><section><h2>联系我们</h2><address><ul><li>瓢城旅行社股份有限公司</li><li>地址:江苏省盐城市亭湖区大庆中路1234号</li><li>邮编:1234567</li><li>电话:010-88888888</li><li>传真:010-88666666</li></ul></address></section></div></div><!-- footer --><footer id="footer"><div class="top xs-hidden"><div class="block left"><h2>合作伙伴</h2><hr><ul><li><a href="#">途牛旅游网</a></li><li><a href="#">驴妈妈旅游网</a></li><li><a href="#">携程旅游</a></li><li><a href="#">中国青年旅行社</a></li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li><a href="#">旅游合同签订方式?</a></li><li><a href="#">儿童价是基于什么制定的?</a></li><li><a href="#">旅游的线路品质怎么界定的?</a></li><li><a href="#">单房差是什么?</a></li><li><a href="#">旅游保险有那些种类?</a></li></ul></div><div class="block right"><h2>联系方式</h2><hr><ul><li><a href="#">微博:weibo.com/ycku</a></li><li><a href="#">邮件:ycku@ycku.com</a></li><li><a href="#">地址:江苏盐城无名路123号</a></li></ul></div></div><div class="clearfix"></div><div class="version sm-visible">客户端 | 触屏版 | 电脑版</div><div class="bottom">Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证:L-YC-BK12345</span></div></footer></body>
</html>
css部分
*{padding: 0;margin: 0;
}
div,
figure,
img,
input,
button {box-sizing: border-box;
}
body{background-color: #f5f5f5;/* font-family: "Helvetica Neue",Arial, Helvetica; */
}
ul{list-style: outside none none;
}
a{text-decoration: none;
}
img {display: block;max-width: 100%;
}/* index */#tour{max-width: 1263px;height: auto;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;font-size: 16px;
}
#tour .tour_title{height: 40px;overflow: hidden;
}
#tour figure{border: 1px solid #ddd;display: block;padding: 4px;border-radius: 4px;width: 32.4%;margin: 15px 0.4%;text-align: center;float: left;position: relative;
}
#tour figure img{vertical-align: middle;/* 文字在图片所在行中间对齐 */
}
#tour figure figcaption{color: #777;font-size: 14px;padding: 7px 0 0 0;letter-spacing: 1px;line-height: 1.5;
}
#tour .title{color: #333;font-weight: normal;
}
#tour .info{padding: 5px 0 0 0;
}
#tour .price{color: #f60;font-size: 14px;float: left;
}
#tour .price strong{font-size: 20px;letter-spacing: 1px;
}
#tour .sat{color: #999;font-size: 13px;font-style: normal;float: right;position: relative;right: 5px;top: 5px;
}
#tour .type{width: 90px;height: 25px;line-height: 25px;text-align: center;border-bottom-right-radius: 4px;background-color: #59b200;font-size: 14px;letter-spacing: 1px;position: absolute;color: #fff;top: 4px;left: 4px;
}
#headline{max-width: 1920px;padding: 70px 0 0 0;margin: 0 auto;position: relative;
}
#headline hgroup{position: absolute;top: 45%;left: 18%;
}
#headline h2{color: #eee;font-size: 45px;letter-spacing: 1px;
}
#headline h3{color: #eee;letter-spacing: 1px;font-size: 24px;
}
#container{max-width: 1263px;margin: 30px auto;
}
#container .aside{width: 28%;float: right;
}
.list{width: 71%;float: left;
/* padding: 30px 0 0 80px; */
}
.list h2{height: 40px;line-height: 40px;font-size: 30px;font-weight: normal;border-bottom: 1px dashed #999;padding: 0 0 15px 0;margin: 0 0 20px 0;color: #666;
}
.tour{position: relative;border:1px solid #eee;margin: 0 0 20px 0;background-color: #fff;overflow: hidden;
}
.tour:after{content: ".";height: 0;visibility: hidden;display: block;clear:both;
}
.tour img{width: 45%;float: left;
}
.tour figcaption{width: 55%;float: right;
}
.tour hgroup{width: 300px;
}
.tour h2{font-size: 24px;font-weight: normal;padding: 10px 0 5px 25px;color: #333;border: none;
}
.tour h3{font-size: 16px;padding: 0 0 10px 25px;line-height: 1.5;font-weight: normal;color: #666;
}
.tour ol{padding: 0 0 0 25px;color: #666;line-height: 2;list-style: none;
}
.tour mark{background-color: #fff;padding: 0 5px;border-radius: 4px;color: #458B00;border: 1px solid #458B00;
}
.tour .buy{position: absolute;top: 55px;right: 30px;
}
.tour s{font-size: 16px;color: #999;
}
.tour .price{font-size: 20px;color: #f60;
}
.tour strong{font-size: 36px;
}
.tour .reserve{margin: 10px 0 0 0;
}
.tour .reserve a{display: inline-block;width: 152px;height: 40px;line-height: 40px;border-radius: 4px;background-color: #f60;text-align: center;font-size: 20px;color: #fff;
}
.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;
}
.tour .disc span{width: 52px;height: 52px;display: block;font-size: 14px;color: #ff7a4d;transform: rotate(45deg);position: absolute;top: 7px;right: 0;text-indent: 2px;padding: 5px 0 0 0;
}
.tour time{color: #458B00;
}
.tour footer{width: 55%;height: 35px;line-height: 35px;text-indent: 25px;color: #666;position: absolute;bottom: 0;background-color: #fafafa;letter-spacing: 1px;
}
#container .aside h2{height: 40px;line-height: 40px;font-size: 20px;font-weight: normal;letter-spacing: 1px;color: #666;text-indent: 10px;background-color: #fafafa;border-bottom: 1px solid #eee;text-align: left;
}
#container .recommend{border: 1px solid #eee;margin: 0 0 10px;color: #fff;
}
#container .tag{text-align: center;padding: 10px 0;
}
#container .tag li{display: inline-block;background-color: #eee;width: 100px;height: 35px;line-height: 35px;text-indent: 8px;text-align: left;margin: 2px 0;
}
#container .tag a{display: block;color: #999;
}
#container .tag a:hover{color: #fff;background-color: #458B00;
}
#container .hot{border: 1px solid #eee;margin: 0 0 10px;text-align: center;background-color: #fff;
}
#container .figure{padding: 10px 0;
}
#container .hot figure{display: inline-block;color: #666;padding: 4px;
}
#container .treasure{border: 1px solid #eee;margin: 0 0 10px;background-color: #fff;
}
#container .box{text-align: center;padding: 10px 0;
}
#container .box a{display: inline-block;background-color: #eee;width: 150px;height: 40px;line-height: 40px;text-indent: 35px;text-align: left;margin: 3px 0;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;
}/* ticket.html */
.ticket{color: #666;
}
.ticket .type{font-size: 20px;margin: 20px 0 10px 0;border: none;
}
.ticket .type mark{color: #fff;background-color: #458B00;padding: 5px 8px;border-radius: 4px;margin: 0 10px 0 16px;
}
.ticket .form{font-size: 20px;border: none;
}
.ticket .form p{line-height: 3;
}
.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 16px;
}
.ticket .left,
.right{width: 43%;display: inline-block;
}
.ticket .button{width: 9%;display: inline-block;
}
.ticket .submit{display: inline-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;
}
.ticket .new{margin: 20px 0 0 0;font-size: 20px;
}
.ticket .new ul{margin: 20px 0 0 0;
}
.ticket .new li{display: inline-block;padding: 5px 10px;
}
.ticket .new li:first-child{padding-left: 0;
}
.ticket .new li:nth-child(2){background-color: #458B00;border-radius: 4px;color: #fff;
}
.ticket table{width: 100%;border-collapse: collapse;margin: 20px 0 0 0;border: 1px solid #ddd;
}
.ticket table th{height: 50px;line-height: 50px;border-bottom: 1px solid #ddd;font-weight: normal;
}
.ticket table td{height: 50px;line-height: 50px;text-align: center;border-bottom: 1px solid #ddd;
}
.ticket table tr:nth-child(2n){background-color: #fafafa;
}
.ticket table tr:hover{background-color: #eee;
}
.ticket table td:hover{cursor: pointer;
}
.ticket .price{color: #f60;
}
.ticket .more2{text-align: center;font-size: 18px;margin: 0 auto;cursor: pointer;display: block;color: #666;
}
.ticket .reserve{display: inline-block;width: 80px;height: 35px;line-height: 35px;border-radius: 4px;background-color: pink;color: #fff;/* overflow: hidden; */
}/* about.html */
.about p{font-size: 20px;color: #666;line-height: 2;margin: 20px 0;
}
.about address{font-style: normal;color: #666;font-size: 20px;margin: 20px 0;line-height: 1.6;
}/* scenery.html */
.scenery figure{padding: 4px;border: 1px solid #ddd;width: 32.6%;margin: 5px 5px 15px 0;float: left;text-align: center;/* display: block; */
}
.scenery figcaption{text-align: center;color: #666;font-size: 20px;padding: 5px 0;
}
.scenery .more{width: 200px;height: 50px;line-height: 50px;border: 1px solid #ccc;background-color: #fafafa;font-size: 18px;border-radius: 10px;text-align: center;cursor: pointer;margin: 0 auto;clear: both;
}.sm-visible{color: #666;text-align: center;display: none;
}/* 当页面大于1200px时 */
@media (min-width: 1200px){}/* 当页面位于992-1199px时 */
@media (min-width: 992px) and (max-width: 1199px) {#container .aside{display: none;}#container .list{width: 99%;padding: 0 20px;}
}/* 当页面位于768-991px时 */
@media (min-width: 768px) and (max-width: 992px) {.xs-hidden,#container .aside{display: none;}#header .link ul li{width: 25%;}#headline hgroup{left: 8%;}#headline h2{font-size: 26px;}#headline h3{font-size: 14px;}.sm-visible{display: block;height: 36px;line-height: 36px;}#footer .bottom,#footer .version{font-size: 18px;}#container .list{width: 99%;padding: 0 20px;}#container .tour .buy {position: absolute;top: auto;right: auto;bottom: 0;padding: 0 0 0 25px;}#container .tour .buy strong{font-size: 32px;}.about p,.about address {font-size: 18px;}.ticket .left, .ticket .right, .ticket .button {width: 98%;display: block;}.ticket .form input {width: 98%;height: 35px;margin: 0;}.ticket .form p {line-height: 2;}.ticket .submit {display: block;width: 30%;height: auto;line-height: 2;position: static;margin:10px auto;}
}/* 当页面位于480-767px时 */
@media (min-width: 480px) and (max-width: 768px) {#header,#header .center,#header .link{height: 45px;}#header .logo,.xs-hidden,#container .aside{display: none;}/* #header .logo{display: none;}.xs-hidden{display: none;} */#header .link{width: 100%;line-height: 45px;}#header .link ul li{width: 25%;}#adver,#headline{padding: 45px 0 0 0;}#adver .center{width: 70%;height: 52px;margin: -10px 0 0 -15%;}#adver .search,#adver .button{font-size: 16px;height: 40px;}#tour .center h2{font-size: 30px;}#tour .center p{font-size: 16px;}.sm-visible{display: block;height: 38px;line-height: 38px;}#footer .bottom,#footer .version{font-size: 14px;}#tour figure{width: 49%;}#headline hgroup{left: 8%;}#headline h2{font-size: 26px;}#headline h3{font-size: 14px;}#container .list{width: 99%;padding: 0 20px;}#container .tour .buy {position: absolute;top: auto;right: auto;bottom: 0;padding: 0 0 0 25px;}#container .list h2{font-size: 25px;}#container .tour h2{font-size: 16px;height: 20px;padding: 5px 0 0 15px;}#container .tour h3{font-size: 14px;padding: 5px 0 0 15px;margin: -10px 0 0 0;}#container .tour .buy strong{font-size: 20px;}.about p,.about address {font-size: 15px;}/* scenery|ticket */.scenery figure {width: 48.2%;}.scenery figcaption {font-size: 18px;}.ticket .left, .ticket .right, .ticket .button {width: 98%;display: block;}.ticket .form input {width: 98%;height: 35px;margin: 0;}.ticket .form p {line-height: 2;}.ticket .submit {display: block;width: 30%;height: auto;line-height: 2;position: static;margin:10px auto;}
}/* 当页面小于480px时 */
@media (max-width: 480px) {#header,#header .center,#header .link{height: 45px;}#header .logo,.xs-hidden,#container .aside{display: none;}#header .link{width: 100%;line-height: 45px;}#header .link ul li{width: 25%;}#adver,#headline{padding: 45px 0 0 0;}#adver .center{width: 80%;height: 48px;margin: -10px 0 0 -20%;}#adver .search,#adver .button{font-size: 16px;height: 40px;}#tour .center h2{font-size: 26px;}#tour .center p{font-size: 14px;}.sm-visible{display: block;height: 36px;line-height: 36px;}#footer .bottom,#footer .version{font-size: 13px;}#tour figure{width: 99%;}#headline hgroup{left: 8%;}#headline h2{font-size: 20px;}#headline h3{font-size: 12px;}#container .list{width: 99%;padding: 0 20px;}#container .tour .buy {position: absolute;top: auto;right: auto;bottom: 0;padding: 0 0 0 25px;}#container .list h2{font-size: 20px;}#container .tour h2{font-size: 14px;height: 15px;line-height: 15px;padding: 5px 0 0 15px;}#container .tour h3{font-size: 12px;padding: 5px 0 0 15px;margin: -18px 0 0 0;height: 15px;overflow: hidden;}#container .tour .buy strong{font-size: 16px;}#container .tour .disc{display: none;}#container .tour .type{height: 20px;width: 72px;font-size: 10px;line-height: 20px;}#container .tour .buy .price s{font-size: 12px;}.about p,.about address {font-size: 14px;}/* scenery|ticket */.scenery figure {width: 99%;}.scenery figcaption {font-size: 16px;}.ticket .left, .ticket .right, .ticket .button {width: 98%;display: block;}.ticket .form input {width: 98%;height: 35px;margin: 0;}.ticket .form p {line-height: 2;}.ticket .submit {display: block;width: 30%;height: auto;line-height: 2;position: static;margin:10px auto;}.ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket .submit, .ticket .reserve {font-size: 14px;}.ticket .reserve {display: inline-block;width: auto;height: auto;line-height: 1;border-radius: 4px;background-color: #f60;color: #fff;padding: 8px;text-align: center;}
}
总结
代码量不大 做起来也比较简单 适合初学作为案例使用