前言

开始学习前端时适用的静态网页小案例 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">&lt;曼谷-芭提雅6日游&gt;</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">&lt;曼谷-芭提雅6日游&gt;</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">&lt;曼谷-芭提雅6日游&gt;</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">&lt;曼谷-芭提雅6日游&gt;</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">&lt;曼谷-芭提雅6日游&gt;</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">&lt;曼谷-芭提雅6日游&gt;</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">&lt;曼谷-芭提雅6日游&gt;</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">&lt;曼谷-芭提雅6日游&gt;</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">&lt;曼谷-芭提雅6日游&gt;</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 &copy; 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 &copy; 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 &copy; 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 &copy; 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>&nbsp;</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 &copy; 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;}
}

总结

代码量不大做起来也比较简单适合初学作为案例使用

html静态页面案例相关推荐

小程序源码免费html5,微信小程序静态页面案例（附源码）
微信小程序出来有段时间了,最近抽空写了个静态案例练练手.由于没有公测名额,无法测试,没有接口,所以先这样吧. 首先上图,整个app的演示是这样的: 图一一.微信小程序和html5标签的区别: 二.w ...
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换在不同设备中显 ...
.html .php .asp,html静态页面中执行php、asp函数代码
启用服务器端包含 1.在IIS 管理器中,展开本地计算机,右键单击"网站"文件夹(在所有网站上启用 SSI),或者右键单击某个特定的网站,然后单击"属性". 2 ...
gulp+PC前端静态页面项目开发
前言: 现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地 gulp构建前言: 如今我们开发web网页的方式主要有几种,使用vue-cli.create-react- ...
静态页面实现include
静态页面实现include 原文地址:http://www.kevinlu98.cn/post/48 需求引入有时我们在开发纯静态页面或者前后端分离的静态页面时会遇到这样的问题,像导航栏或者网站的f ...
静态页面调用php数据,静态html页面如何更新点击数
有的时候为了追求网站的速度和SEO,我们通常会想到将自己的网页生成纯静态Html格式,但随之而来的问题也来了,因为有些内容需要在静态Html里面动态展示,比如点击的次数,每点击一次,点击数就加1次,这 ...
CSS+HTML实现学成在线静态页面
CSS3+HTML实现学成在线静态页面 1.使用工具 1.VScode 2.Chome浏览器 3.Adobe Photoshop CC 2019 2.CSS书写顺序 1.布局定位属性 display ...
Day210.服务端渲染技术NUXT、整合前台主页面、名师、课程静态页面、首页整合banner数据后端部分【创建banner微服务、接口、banner后台前端实现】 -谷粒学院
谷粒学院服务端渲染技术NUXT 一.服务端渲染技术NUXT 1.什么是服务端渲染服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获 ...

html静态页面案例

前言

一、效果

二、页面分布

1.index.html

2.information.html

3.scenery.html

4.ticket.html

5.about.html

css部分

总结

html静态页面案例相关推荐

最新文章

热门文章