devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

html静态页面案例_静态网页案例

作者：2023面试高手 | 2024-03-14 08:26:16

赞

踩

静态网页案例

前言

开始学习前端时适用的静态网页小案例 html+css

一、效果

二、页面分布

分为五个基础页面

index.html

information.html

scenery.html

ticket.html

about.html

1.index.html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. 		<title></title>
  7. 		<link rel="stylesheet" href="./css/public.css">
  8. 		<link rel="stylesheet" href="./css/index.css">
  9. 	</head>
  10. 	<body>
  11. 		<header id="header">
  12. 			<div class="center">
  13. 				<div class="logo"></div>
  14. 				<nav class="link">
  15. 					<ul>
  16. 						<li class="active"><a href="index.html">首页</a></li>
  17. 						<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
  18. 						<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
  19. 						<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
  20. 						<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
  21. 					</ul>
  22. 				</nav>
  23. 			</div>
  24. 		</header>
  25.  
  26. 		<div id="adver">
  27. 			<img src="img/adver.jpg" alt="">
  28. 			<div class="center copy">
  29. 				<input type="text" class="search" placeholder="请输入旅游景点或城市">
  30. 				<button class="button">搜索</button>
  31. 			</div>
  32. 		</div>
  33.  
  34. 		<!-- main -->
  35. 		<div id="tour">
  36. 			<section class="center">
  37. 				<h2>热门旅游</h2>
  38. 				<p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p>
  39. 			</section>
  40. 			<figure>
  41. 				<img src="img/tour6.jpg" alt="">
  42. 				<figcaption>
  43. 					<div class="tour_title">
  44. 						<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
  45. 					</div>
  46. 					<div class="info">
  47. 						<em class="sat">满意度 77%</em>
  48. 						<span class="price">￥ <strong>2864</strong> 起</span>
  49. 					</div>
  50. 					<div class="type">国内长线</div>
  51. 				</figcaption>
  52. 			</figure>
  53. 			<figure>
  54. 				<img src="img/tour6.jpg" alt="">
  55. 				<figcaption>
  56. 					<div class="tour_title">
  57. 						<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
  58. 					</div>
  59. 					<div class="info">
  60. 						<em class="sat">满意度 77%</em>
  61. 						<span class="price">￥ <strong>2864</strong> 起</span>
  62. 					</div>
  63. 					<div class="type">国内长线</div>
  64. 				</figcaption>
  65. 			</figure>
  66. 			<figure>
  67. 				<img src="img/tour6.jpg" alt="">
  68. 				<figcaption>
  69. 					<div class="tour_title">
  70. 						<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
  71. 					</div>
  72. 					<div class="info">
  73. 						<em class="sat">满意度 77%</em>
  74. 						<span class="price">￥ <strong>2864</strong> 起</span>
  75. 					</div>
  76. 					<div class="type">国内长线</div>
  77. 				</figcaption>
  78. 			</figure>
  79. 			<figure>
  80. 				<img src="img/tour6.jpg" alt="">
  81. 				<figcaption>
  82. 					<div class="tour_title">
  83. 						<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
  84. 					</div>
  85. 					<div class="info">
  86. 						<em class="sat">满意度 77%</em>
  87. 						<span class="price">￥ <strong>2864</strong> 起</span>
  88. 					</div>
  89. 					<div class="type">国内长线</div>
  90. 				</figcaption>
  91. 			</figure>
  92. 			<figure>
  93. 				<img src="img/tour6.jpg" alt="">
  94. 				<figcaption>
  95. 					<div class="tour_title">
  96. 						<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
  97. 					</div>
  98. 					<div class="info">
  99. 						<em class="sat">满意度 77%</em>
  100. 						<span class="price">￥ <strong>2864</strong> 起</span>
  101. 					</div>
  102. 					<div class="type">国内长线</div>
  103. 				</figcaption>
  104. 			</figure>
  105. 			<figure>
  106. 				<img src="img/tour6.jpg" alt="">
  107. 				<figcaption>
  108. 					<div class="tour_title">
  109. 						<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
  110. 					</div>
  111. 					<div class="info">
  112. 						<em class="sat">满意度 77%</em>
  113. 						<span class="price">￥ <strong>2864</strong> 起</span>
  114. 					</div>
  115. 					<div class="type">国内长线</div>
  116. 				</figcaption>
  117. 			</figure>
  118. 			<figure>
  119. 				<img src="img/tour6.jpg" alt="">
  120. 				<figcaption>
  121. 					<div class="tour_title">
  122. 						<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
  123. 					</div>
  124. 					<div class="info">
  125. 						<em class="sat">满意度 77%</em>
  126. 						<span class="price">￥ <strong>2864</strong> 起</span>
  127. 					</div>
  128. 					<div class="type">国内长线</div>
  129. 				</figcaption>
  130. 			</figure>
  131. 			<figure>
  132. 				<img src="img/tour6.jpg" alt="">
  133. 				<figcaption>
  134. 					<div class="tour_title">
  135. 						<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
  136. 					</div>
  137. 					<div class="info">
  138. 						<em class="sat">满意度 77%</em>
  139. 						<span class="price">￥ <strong>2864</strong> 起</span>
  140. 					</div>
  141. 					<div class="type">国内长线</div>
  142. 				</figcaption>
  143. 			</figure>
  144. 			<figure>
  145. 				<img src="img/tour6.jpg" alt="">
  146. 				<figcaption>
  147. 					<div class="tour_title">
  148. 						<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
  149. 					</div>
  150. 					<div class="info">
  151. 						<em class="sat">满意度 77%</em>
  152. 						<span class="price">￥ <strong>2864</strong> 起</span>
  153. 					</div>
  154. 					<div class="type">国内长线</div>
  155. 				</figcaption>
  156. 			</figure>
  157. 		</div>
  158.  
  159. 		<footer id="footer">
  160. 			<div class="top xs-hidden">
  161. 				<div class="block left">
  162. 					<h2>合作伙伴</h2>
  163. 					<hr>
  164. 					<ul>
  165. 						<li><a href="#">途牛旅游网</a></li>
  166. 						<li><a href="#">驴妈妈旅游网</a></li>
  167. 						<li><a href="#">携程旅游</a></li>
  168. 						<li><a href="#">中国青年旅行社</a></li>
  169. 					</ul>
  170. 				</div>
  171. 				<div class="block center">
  172. 					<h2>旅游FAQ</h2>
  173. 					<hr>
  174. 					<ul>
  175. 						<li><a href="#">旅游合同签订方式？</a></li>
  176. 						<li><a href="#">儿童价是基于什么制定的？</a></li>
  177. 						<li><a href="#">旅游的线路品质怎么界定的？</a></li>
  178. 						<li><a href="#">单房差是什么？</a></li>
  179. 						<li><a href="#">旅游保险有那些种类？</a></li>
  180. 					</ul>
  181. 				</div>
  182. 				<div class="block right">
  183. 					<h2>联系方式</h2>
  184. 					<hr>
  185. 					<ul>
  186. 						<li><a href="#">微博：weibo.com/ycku</a></li>
  187. 						<li><a href="#">邮件：ycku@ycku.com</a></li>
  188. 						<li><a href="#">地址：江苏盐城无名路123号</a></li>
  189. 					</ul>
  190. 				</div>
  191. 			</div>
  192. 			<div class="clearfix"></div>
  193. 			<div class="version sm-visible">
  194. 				客户端 | 触屏版 | 电脑版
  195. 			</div>
  196. 			<div class="bottom">
  197. 				Copyright &copy; YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证：L-YC-BK12345</span>
  198. 			</div>
  199. 		</footer>
  200. 	</body>
  201. </html>

2.information.html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. 		<title></title>
  7. 		<link rel="stylesheet" href="./css/public.css">
  8. 		<link rel="stylesheet" href="./css/index.css">
  9. 	</head>
  10. 	<body>
  11. 		<header id="header">
  12. 			<div class="center">
  13. 				<div class="logo"></div>
  14. 				<nav class="link">
  15. 					<ul>
  16. 						<li><a href="index.html">首页</a></li>
  17. 						<li class="active"><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
  18. 						<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
  19. 						<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
  20. 						<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
  21. 					</ul>
  22. 				</nav>
  23. 			</div>
  24. 		</header>
  25.  
  26. 		<div id="headline">
  27. 			<img src="img/headline.jpg" alt="">
  28. 			<hgroup>
  29. 				<h2>旅游资讯</h2>
  30. 				<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
  31. 			</hgroup>
  32. 		</div>
  33.  
  34. 		<!-- main -->
  35. 		<div id="container">
  36. 			<!-- aside -->
  37. 			<aside class="aside">
  38.  
  39. 				<div class="recommend">
  40. 					<h2>景点推荐</h2>
  41. 					<div class="tag">
  42. 						<ul>
  43. 							<li><a href="###">曼谷(12)</a></li>
  44. 							<li><a href="###">东京(5)</a></li>
  45. 							<li><a href="###">西双版纳(8)</a></li>
  46. 							<li><a href="###">漓江(16)</a></li>
  47. 							<li><a href="###">呼伦贝尔(4)</a></li>
  48. 							<li><a href="###">首尔(9)</a></li>
  49. 							<li><a href="###">巴厘岛(15)</a></li>
  50. 							<li><a href="###">土耳其(22)</a></li>
  51. 							<li><a href="###">夏威夷(5)</a></li>
  52. 							<li><a href="###">巴厘岛(11)</a></li>
  53. 							<li><a href="###">毛里求斯(7)</a></li>
  54. 							<li><a href="###">吉普岛(4)</a></li>
  55. 							<li><a href="###">希腊(18)</a></li>
  56. 							<li><a href="###">法瑞意(8)</a></li>
  57. 							<li><a href="###">马尔代夫(9)</a></li>
  58. 							<li><a href="###">新西兰(16)</a></li>
  59. 							<li><a href="###">埃及(11)</a></li>
  60. 							<li><a href="###">迪拜(14)</a></li>
  61. 							<li><a href="###">斯里兰卡(7)</a></li>
  62. 							<li><a href="###">麦哈顿(3)</a></li>
  63. 							<li><a href="###">大阪(15)</a></li>
  64. 						</ul>
  65. 					</div>
  66. 				</div>
  67.  
  68. 				<div class="hot">
  69. 					<h2>热卖旅游</h2>
  70. 					<div class="figure">
  71. 						<figure>
  72. 							<img src="img/hot6.jpg" alt="">
  73. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  74. 						</figure>
  75. 						<figure>
  76. 							<img src="img/hot8.jpg" alt="">
  77. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  78. 						</figure>
  79. 						<figure>
  80. 							<img src="img/hot8.jpg" alt="">
  81. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  82. 						</figure>
  83. 						<figure>
  84. 							<img src="img/hot8.jpg" alt="">
  85. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  86. 						</figure>
  87. 						<figure>
  88. 							<img src="img/hot8.jpg" alt="">
  89. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  90. 						</figure>
  91. 						<figure>
  92. 							<img src="img/hot8.jpg" alt="">
  93. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  94. 						</figure>
  95. 						<figure>
  96. 							<img src="img/hot8.jpg" alt="">
  97. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  98. 						</figure>
  99. 						<figure>
  100. 							<img src="img/hot8.jpg" alt="">
  101. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  102. 						</figure>
  103. 					</div>
  104. 				</div>
  105.  
  106. 				<div class="treasure">
  107. 					<h2>旅游百宝箱</h2>
  108. 					<div class="box">
  109. 						<a href="###" class="trea1">天气预报</a>
  110. 						<a href="###" class="trea2">火车票查询</a>
  111. 						<a href="###" class="trea3">航空查询</a>
  112. 						<a href="###" class="trea4">地铁线路查询</a>
  113. 					</div>
  114. 				</div>
  115.  
  116. 			</aside>
  117. 			<!-- 主要内容 -->
  118. 			<div class="list information">
  119. 				<h2>旅游资讯</h2>
  120. 				<figure class="tour">
  121. 					<img src="img/tour6.jpg" alt="">
  122. 					<figcaption>
  123. 						<article>
  124.  
  125. 							<header>
  126. 								<hgroup>
  127. 									<h2>曼谷-芭提雅6日游</h2>
  128. 									<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
  129. 								</hgroup>
  130. 							</header>
  131.  
  132. 							<ol class="xs-hidden">
  133. 								<li><mark>交通</mark> 春秋航空，杭州出发，无需转机</li>
  134. 								<li><mark>团期</mark> 11/01、11/03、11/08...</li>
  135. 							</ol>
  136.  
  137. 							<div class="buy">
  138. 								<div class="price">￥<strong>2864</strong><s>3980</s></div>
  139. 								<div class="reserve xs-hidden"><a href="#">立即抢购</a></div>
  140. 							</div>
  141.  
  142. 							<div class="type">国内长线</div>
  143. 							<div class="disc"><span>4.7折</span></div>
  144. 							<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
  145.  
  146. 						</article>
  147. 					</figcaption>
  148. 				</figure>
  149. 				<figure class="tour">
  150. 					<img src="img/tour6.jpg" alt="">
  151. 					<figcaption>
  152. 						<article>
  153. 				
  154. 							<header>
  155. 								<hgroup>
  156. 									<h2>曼谷-芭提雅6日游</h2>
  157. 									<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
  158. 								</hgroup>
  159. 							</header>
  160. 				
  161. 							<ol class="xs-hidden">
  162. 								<li><mark>交通</mark> 春秋航空，杭州出发，无需转机</li>
  163. 								<li><mark>团期</mark> 11/01、11/03、11/08...</li>
  164. 							</ol>
  165. 				
  166. 							<div class="buy">
  167. 								<div class="price">￥<strong>2864</strong><s>3980</s></div>
  168. 								<div class="reserve xs-hidden"><a href="#">立即抢购</a></div>
  169. 							</div>
  170. 				
  171. 							<div class="type">国内长线</div>
  172. 							<div class="disc"><span>4.7折</span></div>
  173. 							<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
  174. 				
  175. 						</article>
  176. 					</figcaption>
  177. 				</figure>
  178. 				<figure class="tour">
  179. 					<img src="img/tour6.jpg" alt="">
  180. 					<figcaption>
  181. 						<article>
  182. 				
  183. 							<header>
  184. 								<hgroup>
  185. 									<h2>曼谷-芭提雅6日游</h2>
  186. 									<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
  187. 								</hgroup>
  188. 							</header>
  189. 				
  190. 							<ol class="xs-hidden">
  191. 								<li><mark>交通</mark> 春秋航空，杭州出发，无需转机</li>
  192. 								<li><mark>团期</mark> 11/01、11/03、11/08...</li>
  193. 							</ol>
  194. 				
  195. 							<div class="buy">
  196. 								<div class="price">￥<strong>2864</strong><s>3980</s></div>
  197. 								<div class="reserve xs-hidden"><a href="#">立即抢购</a></div>
  198. 							</div>
  199. 				
  200. 							<div class="type">国内长线</div>
  201. 							<div class="disc"><span>4.7折</span></div>
  202. 							<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
  203. 				
  204. 						</article>
  205. 					</figcaption>
  206. 				</figure>
  207. 				<figure class="tour">
  208. 					<img src="img/tour6.jpg" alt="">
  209. 					<figcaption>
  210. 						<article>
  211. 				
  212. 							<header>
  213. 								<hgroup>
  214. 									<h2>曼谷-芭提雅6日游</h2>
  215. 									<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
  216. 								</hgroup>
  217. 							</header>
  218. 				
  219. 							<ol class="xs-hidden">
  220. 								<li><mark>交通</mark> 春秋航空，杭州出发，无需转机</li>
  221. 								<li><mark>团期</mark> 11/01、11/03、11/08...</li>
  222. 							</ol>
  223. 				
  224. 							<div class="buy">
  225. 								<div class="price">￥<strong>2864</strong><s>3980</s></div>
  226. 								<div class="reserve xs-hidden"><a href="#">立即抢购</a></div>
  227. 							</div>
  228. 				
  229. 							<div class="type">国内长线</div>
  230. 							<div class="disc"><span>4.7折</span></div>
  231. 							<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
  232. 				
  233. 						</article>
  234. 					</figcaption>
  235. 				</figure>
  236. 				<figure class="tour">
  237. 					<img src="img/tour6.jpg" alt="">
  238. 					<figcaption>
  239. 						<article>
  240. 				
  241. 							<header>
  242. 								<hgroup>
  243. 									<h2>曼谷-芭提雅6日游</h2>
  244. 									<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
  245. 								</hgroup>
  246. 							</header>
  247. 				
  248. 							<ol class="xs-hidden">
  249. 								<li><mark>交通</mark> 春秋航空，杭州出发，无需转机</li>
  250. 								<li><mark>团期</mark> 11/01、11/03、11/08...</li>
  251. 							</ol>
  252. 				
  253. 							<div class="buy">
  254. 								<div class="price">￥<strong>2864</strong><s>3980</s></div>
  255. 								<div class="reserve xs-hidden"><a href="#">立即抢购</a></div>
  256. 							</div>
  257. 				
  258. 							<div class="type">国内长线</div>
  259. 							<div class="disc"><span>4.7折</span></div>
  260. 							<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
  261. 				
  262. 						</article>
  263. 					</figcaption>
  264. 				</figure>
  265. 				<figure class="tour">
  266. 					<img src="img/tour6.jpg" alt="">
  267. 					<figcaption>
  268. 						<article>
  269. 				
  270. 							<header>
  271. 								<hgroup>
  272. 									<h2>曼谷-芭提雅6日游</h2>
  273. 									<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
  274. 								</hgroup>
  275. 							</header>
  276. 				
  277. 							<ol class="xs-hidden">
  278. 								<li><mark>交通</mark> 春秋航空，杭州出发，无需转机</li>
  279. 								<li><mark>团期</mark> 11/01、11/03、11/08...</li>
  280. 							</ol>
  281. 				
  282. 							<div class="buy">
  283. 								<div class="price">￥<strong>2864</strong><s>3980</s></div>
  284. 								<div class="reserve xs-hidden"><a href="#">立即抢购</a></div>
  285. 							</div>
  286. 				
  287. 							<div class="type">国内长线</div>
  288. 							<div class="disc"><span>4.7折</span></div>
  289. 							<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
  290. 				
  291. 						</article>
  292. 					</figcaption>
  293. 				</figure>
  294. 				<figure class="tour">
  295. 					<img src="img/tour6.jpg" alt="">
  296. 					<figcaption>
  297. 						<article>
  298. 				
  299. 							<header>
  300. 								<hgroup>
  301. 									<h2>曼谷-芭提雅6日游</h2>
  302. 									<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
  303. 								</hgroup>
  304. 							</header>
  305. 				
  306. 							<ol class="xs-hidden">
  307. 								<li><mark>交通</mark> 春秋航空，杭州出发，无需转机</li>
  308. 								<li><mark>团期</mark> 11/01、11/03、11/08...</li>
  309. 							</ol>
  310. 				
  311. 							<div class="buy">
  312. 								<div class="price">￥<strong>2864</strong><s>3980</s></div>
  313. 								<div class="reserve xs-hidden"><a href="#">立即抢购</a></div>
  314. 							</div>
  315. 				
  316. 							<div class="type">国内长线</div>
  317. 							<div class="disc"><span>4.7折</span></div>
  318. 							<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
  319. 				
  320. 						</article>
  321. 					</figcaption>
  322. 				</figure>
  323. 				<figure class="tour">
  324. 					<img src="img/tour6.jpg" alt="">
  325. 					<figcaption>
  326. 						<article>
  327. 				
  328. 							<header>
  329. 								<hgroup>
  330. 									<h2>曼谷-芭提雅6日游</h2>
  331. 									<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
  332. 								</hgroup>
  333. 							</header>
  334. 				
  335. 							<ol class="xs-hidden">
  336. 								<li><mark>交通</mark> 春秋航空，杭州出发，无需转机</li>
  337. 								<li><mark>团期</mark> 11/01、11/03、11/08...</li>
  338. 							</ol>
  339. 				
  340. 							<div class="buy">
  341. 								<div class="price">￥<strong>2864</strong><s>3980</s></div>
  342. 								<div class="reserve xs-hidden"><a href="#">立即抢购</a></div>
  343. 							</div>
  344. 				
  345. 							<div class="type">国内长线</div>
  346. 							<div class="disc"><span>4.7折</span></div>
  347. 							<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
  348. 				
  349. 						</article>
  350. 					</figcaption>
  351. 				</figure>
  352. 				<figure class="tour">
  353. 					<img src="img/tour6.jpg" alt="">
  354. 					<figcaption>
  355. 						<article>
  356. 				
  357. 							<header>
  358. 								<hgroup>
  359. 									<h2>曼谷-芭提雅6日游</h2>
  360. 									<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
  361. 								</hgroup>
  362. 							</header>
  363. 				
  364. 							<ol class="xs-hidden">
  365. 								<li><mark>交通</mark> 春秋航空，杭州出发，无需转机</li>
  366. 								<li><mark>团期</mark> 11/01、11/03、11/08...</li>
  367. 							</ol>
  368. 				
  369. 							<div class="buy">
  370. 								<div class="price">￥<strong>2864</strong><s>3980</s></div>
  371. 								<div class="reserve xs-hidden"><a href="#">立即抢购</a></div>
  372. 							</div>
  373. 				
  374. 							<div class="type">国内长线</div>
  375. 							<div class="disc"><span>4.7折</span></div>
  376. 							<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
  377. 				
  378. 						</article>
  379. 					</figcaption>
  380. 				</figure>
  381. 			</div>
  382. 		</div>
  383.  
  384. 		<!-- footer -->
  385. 		<footer id="footer">
  386. 			<div class="top xs-hidden">
  387. 				<div class="block left">
  388. 					<h2>合作伙伴</h2>
  389. 					<hr>
  390. 					<ul>
  391. 						<li><a href="#">途牛旅游网</a></li>
  392. 						<li><a href="#">驴妈妈旅游网</a></li>
  393. 						<li><a href="#">携程旅游</a></li>
  394. 						<li><a href="#">中国青年旅行社</a></li>
  395. 					</ul>
  396. 				</div>
  397. 				<div class="block center">
  398. 					<h2>旅游FAQ</h2>
  399. 					<hr>
  400. 					<ul>
  401. 						<li><a href="#">旅游合同签订方式？</a></li>
  402. 						<li><a href="#">儿童价是基于什么制定的？</a></li>
  403. 						<li><a href="#">旅游的线路品质怎么界定的？</a></li>
  404. 						<li><a href="#">单房差是什么？</a></li>
  405. 						<li><a href="#">旅游保险有那些种类？</a></li>
  406. 					</ul>
  407. 				</div>
  408. 				<div class="block right">
  409. 					<h2>联系方式</h2>
  410. 					<hr>
  411. 					<ul>
  412. 						<li><a href="#">微博：weibo.com/ycku</a></li>
  413. 						<li><a href="#">邮件：ycku@ycku.com</a></li>
  414. 						<li><a href="#">地址：江苏盐城无名路123号</a></li>
  415. 					</ul>
  416. 				</div>
  417. 			</div>
  418. 			<div class="clearfix"></div>
  419. 			<div class="version sm-visible">
  420. 				客户端 | 触屏版 | 电脑版
  421. 			</div>
  422. 			<div class="bottom">
  423. 				Copyright &copy; YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证：L-YC-BK12345</span>
  424. 			</div>
  425. 		</footer>
  426. 	</body>
  427. </html>

3.scenery.html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="./css/information.css">
  7. 		<link rel="stylesheet" href="./css/public.css">
  8. 	</head>
  9. 	<body>
  10. 		<header id="header">
  11. 			<div class="center">
  12. 				<div class="logo"></div>
  13. 				<nav class="link">
  14. 					<ul>
  15. 						<li><a href="index.html">首页</a></li>
  16. 						<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
  17. 						<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
  18. 						<li class="active xs-hidden"><a href="scenery.html">风景欣赏</a></li>
  19. 						<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
  20. 					</ul>
  21. 				</nav>
  22. 			</div>
  23. 		</header>
  24.  
  25. 		<div id="headline">
  26. 			<img src="img/headline.jpg" alt="">
  27. 			<hgroup>
  28. 				<h2>旅游资讯</h2>
  29. 				<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
  30. 			</hgroup>
  31. 		</div>
  32.  
  33. 		<!-- main -->
  34. 		<div id="container">
  35. 			<!-- aside -->
  36. 			<aside class="aside">
  37.  
  38. 				<div class="recommend">
  39. 					<h2>景点推荐</h2>
  40. 					<div class="tag">
  41. 						<ul>
  42. 							<li><a href="###">曼谷(12)</a></li>
  43. 							<li><a href="###">东京(5)</a></li>
  44. 							<li><a href="###">西双版纳(8)</a></li>
  45. 							<li><a href="###">漓江(16)</a></li>
  46. 							<li><a href="###">呼伦贝尔(4)</a></li>
  47. 							<li><a href="###">首尔(9)</a></li>
  48. 							<li><a href="###">巴厘岛(15)</a></li>
  49. 							<li><a href="###">土耳其(22)</a></li>
  50. 							<li><a href="###">夏威夷(5)</a></li>
  51. 							<li><a href="###">巴厘岛(11)</a></li>
  52. 							<li><a href="###">毛里求斯(7)</a></li>
  53. 							<li><a href="###">吉普岛(4)</a></li>
  54. 							<li><a href="###">希腊(18)</a></li>
  55. 							<li><a href="###">法瑞意(8)</a></li>
  56. 							<li><a href="###">马尔代夫(9)</a></li>
  57. 							<li><a href="###">新西兰(16)</a></li>
  58. 							<li><a href="###">埃及(11)</a></li>
  59. 							<li><a href="###">迪拜(14)</a></li>
  60. 							<li><a href="###">斯里兰卡(7)</a></li>
  61. 							<li><a href="###">麦哈顿(3)</a></li>
  62. 							<li><a href="###">大阪(15)</a></li>
  63. 						</ul>
  64. 					</div>
  65. 				</div>
  66.  
  67. 				<div class="hot">
  68. 					<h2>热卖旅游</h2>
  69. 					<div class="figure">
  70. 						<figure>
  71. 							<img src="img/hot6.jpg" alt="">
  72. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  73. 						</figure>
  74. 						<figure>
  75. 							<img src="img/hot8.jpg" alt="">
  76. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  77. 						</figure>
  78. 						<figure>
  79. 							<img src="img/hot8.jpg" alt="">
  80. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  81. 						</figure>
  82. 						<figure>
  83. 							<img src="img/hot8.jpg" alt="">
  84. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  85. 						</figure>
  86. 						<figure>
  87. 							<img src="img/hot8.jpg" alt="">
  88. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  89. 						</figure>
  90. 						<figure>
  91. 							<img src="img/hot8.jpg" alt="">
  92. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  93. 						</figure>
  94. 						<figure>
  95. 							<img src="img/hot8.jpg" alt="">
  96. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  97. 						</figure>
  98. 						<figure>
  99. 							<img src="img/hot8.jpg" alt="">
  100. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  101. 						</figure>
  102. 					</div>
  103. 				</div>
  104.  
  105. 				<div class="treasure">
  106. 					<h2>旅游百宝箱</h2>
  107. 					<div class="box">
  108. 						<a href="###" class="trea1">天气预报</a>
  109. 						<a href="###" class="trea2">火车票查询</a>
  110. 						<a href="###" class="trea3">航空查询</a>
  111. 						<a href="###" class="trea4">地铁线路查询</a>
  112. 					</div>
  113. 				</div>
  114.  
  115. 			</aside>
  116. 			<!-- 主要内容 -->
  117. 			<div class="list scenery">
  118.  
  119. 				<h2>风景欣赏</h2>
  120.  
  121. 				<figure>
  122. 					<img src="img/s4.jpg" alt="">
  123. 					<figcaption>
  124. 						<p>富山-大版-东京[共9张]</p>
  125. 					</figcaption>
  126. 				</figure>
  127. 				<figure>
  128. 					<img src="img/s4.jpg" alt="">
  129. 					<figcaption>
  130. 						<p>富山-大版-东京[共9张]</p>
  131. 					</figcaption>
  132. 				</figure>
  133. 				<figure>
  134. 					<img src="img/s4.jpg" alt="">
  135. 					<figcaption>
  136. 						<p>富山-大版-东京[共9张]</p>
  137. 					</figcaption>
  138. 				</figure>
  139. 				<figure>
  140. 					<img src="img/s4.jpg" alt="">
  141. 					<figcaption>
  142. 						<p>富山-大版-东京[共9张]</p>
  143. 					</figcaption>
  144. 				</figure>
  145. 				<figure>
  146. 					<img src="img/s4.jpg" alt="">
  147. 					<figcaption>
  148. 						<p>富山-大版-东京[共9张]</p>
  149. 					</figcaption>
  150. 				</figure>
  151. 				<figure>
  152. 					<img src="img/s4.jpg" alt="">
  153. 					<figcaption>
  154. 						<p>富山-大版-东京[共9张]</p>
  155. 					</figcaption>
  156. 				</figure>
  157. 				<figure>
  158. 					<img src="img/s4.jpg" alt="">
  159. 					<figcaption>
  160. 						<p>富山-大版-东京[共9张]</p>
  161. 					</figcaption>
  162. 				</figure>
  163. 				<figure>
  164. 					<img src="img/s4.jpg" alt="">
  165. 					<figcaption>
  166. 						<p>富山-大版-东京[共9张]</p>
  167. 					</figcaption>
  168. 				</figure>
  169. 				<figure>
  170. 					<img src="img/s4.jpg" alt="">
  171. 					<figcaption>
  172. 						<p>富山-大版-东京[共9张]</p>
  173. 					</figcaption>
  174. 				</figure>
  175.  
  176. 				<div class="more">加载更多...</div>
  177.  
  178. 			</div>
  179.  
  180. 		</div>
  181.  
  182. 		<!-- footer -->
  183. 		<footer id="footer">
  184. 			<div class="top">
  185. 				<div class="block left">
  186. 					<h2>合作伙伴</h2>
  187. 					<hr>
  188. 					<ul>
  189. 						<li><a href="#">途牛旅游网</a></li>
  190. 						<li><a href="#">驴妈妈旅游网</a></li>
  191. 						<li><a href="#">携程旅游</a></li>
  192. 						<li><a href="#">中国青年旅行社</a></li>
  193. 					</ul>
  194. 				</div>
  195. 				<div class="block center">
  196. 					<h2>旅游FAQ</h2>
  197. 					<hr>
  198. 					<ul>
  199. 						<li><a href="#">旅游合同签订方式？</a></li>
  200. 						<li><a href="#">儿童价是基于什么制定的？</a></li>
  201. 						<li><a href="#">旅游的线路品质怎么界定的？</a></li>
  202. 						<li><a href="#">单房差是什么？</a></li>
  203. 						<li><a href="#">旅游保险有那些种类？</a></li>
  204. 					</ul>
  205. 				</div>
  206. 				<div class="block right">
  207. 					<h2>联系方式</h2>
  208. 					<hr>
  209. 					<ul>
  210. 						<li><a href="#">微博：weibo.com/ycku</a></li>
  211. 						<li><a href="#">邮件：ycku@ycku.com</a></li>
  212. 						<li><a href="#">地址：江苏盐城无名路123号</a></li>
  213. 					</ul>
  214. 				</div>
  215. 			</div>
  216. 			<div class="clearfix"></div>
  217. 			<div class="bottom">
  218. 				Copyright &copy; YCKU 仙草蜜旅行社 | 苏ICP备120110119号 | 旅行社经营许可证：L-YC-BK12345
  219. 			</div>
  220. 		</footer>
  221. 	</body>
  222. </html>

4.ticket.html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="./css/public.css">
  7. 		<link rel="stylesheet" href="./css/index.css">
  8. 	</head>
  9. 	<body>
  10. 		<header id="header">
  11. 			<div class="center">
  12. 				<div class="logo"></div>
  13. 				<nav class="link">
  14. 					<ul>
  15. 						<li><a href="index.html">首页</a></li>
  16. 						<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
  17. 						<li class="active"><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
  18. 						<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
  19. 						<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
  20. 					</ul>
  21. 				</nav>
  22. 			</div>
  23. 		</header>
  24.  
  25. 		<div id="headline">
  26. 			<img src="img/headline.jpg" alt="">
  27. 			<hgroup>
  28. 				<h2>旅游资讯</h2>
  29. 				<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
  30. 			</hgroup>
  31. 		</div>
  32.  
  33. 		<!-- main -->
  34. 		<div id="container">
  35. 			<!-- aside -->
  36. 			<aside class="aside">
  37.  
  38. 				<div class="recommend">
  39. 					<h2>景点推荐</h2>
  40. 					<div class="tag">
  41. 						<ul>
  42. 							<li><a href="###">曼谷(12)</a></li>
  43. 							<li><a href="###">东京(5)</a></li>
  44. 							<li><a href="###">西双版纳(8)</a></li>
  45. 							<li><a href="###">漓江(16)</a></li>
  46. 							<li><a href="###">呼伦贝尔(4)</a></li>
  47. 							<li><a href="###">首尔(9)</a></li>
  48. 							<li><a href="###">巴厘岛(15)</a></li>
  49. 							<li><a href="###">土耳其(22)</a></li>
  50. 							<li><a href="###">夏威夷(5)</a></li>
  51. 							<li><a href="###">巴厘岛(11)</a></li>
  52. 							<li><a href="###">毛里求斯(7)</a></li>
  53. 							<li><a href="###">吉普岛(4)</a></li>
  54. 							<li><a href="###">希腊(18)</a></li>
  55. 							<li><a href="###">法瑞意(8)</a></li>
  56. 							<li><a href="###">马尔代夫(9)</a></li>
  57. 							<li><a href="###">新西兰(16)</a></li>
  58. 							<li><a href="###">埃及(11)</a></li>
  59. 							<li><a href="###">迪拜(14)</a></li>
  60. 							<li><a href="###">斯里兰卡(7)</a></li>
  61. 							<li><a href="###">麦哈顿(3)</a></li>
  62. 							<li><a href="###">大阪(15)</a></li>
  63. 						</ul>
  64. 					</div>
  65. 				</div>
  66.  
  67. 				<div class="hot">
  68. 					<h2>热卖旅游</h2>
  69. 					<div class="figure">
  70. 						<figure>
  71. 							<img src="img/hot6.jpg" alt="">
  72. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  73. 						</figure>
  74. 						<figure>
  75. 							<img src="img/hot8.jpg" alt="">
  76. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  77. 						</figure>
  78. 						<figure>
  79. 							<img src="img/hot8.jpg" alt="">
  80. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  81. 						</figure>
  82. 						<figure>
  83. 							<img src="img/hot8.jpg" alt="">
  84. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  85. 						</figure>
  86. 						<figure>
  87. 							<img src="img/hot8.jpg" alt="">
  88. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  89. 						</figure>
  90. 						<figure>
  91. 							<img src="img/hot8.jpg" alt="">
  92. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  93. 						</figure>
  94. 						<figure>
  95. 							<img src="img/hot8.jpg" alt="">
  96. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  97. 						</figure>
  98. 						<figure>
  99. 							<img src="img/hot8.jpg" alt="">
  100. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  101. 						</figure>
  102. 					</div>
  103. 				</div>
  104.  
  105. 				<div class="treasure">
  106. 					<h2>旅游百宝箱</h2>
  107. 					<div class="box">
  108. 						<a href="###" class="trea1">天气预报</a>
  109. 						<a href="###" class="trea2">火车票查询</a>
  110. 						<a href="###" class="trea3">航空查询</a>
  111. 						<a href="###" class="trea4">地铁线路查询</a>
  112. 					</div>
  113. 				</div>
  114.  
  115. 			</aside>
  116. 			<!-- 主要内容 -->
  117. 			<div class="list ticket">
  118.  
  119. 				<form action="###">
  120. 					<h2>机票预定</h2>
  121. 					<fieldset class="type">
  122. 						<p>航程类型 <mark>单程</mark> 往返</p>
  123. 					</fieldset>
  124. 					<fieldset class="form left">
  125. 						<p>
  126. 							<label for="from_city">出发城市</label>
  127. 							<input type="text" name="from_city" id="from_city" placeholder="城市名">
  128. 						</p>
  129. 						<p>
  130. 							<label for="from_city">返回城市</label>
  131. 							<input type="text" name="to_city" id="to_city" placeholder="城市名">
  132. 						</p>
  133. 					</fieldset>
  134. 					<fieldset class="form right">
  135. 						<p>
  136. 							<label for="from_date">出发时间</label>
  137. 							<input type="text" name="from_date" id="from_date" placeholder="时间/日期">
  138. 						</p>
  139. 						<p>
  140. 							<label for="from_date">返回时间</label>
  141. 							<input type="text" name="to_date" id="to_date" placeholder="时间/日期">
  142. 						</p>
  143. 					</fieldset>
  144. 					<fieldset class="form button">
  145. 						<p>
  146. 							<button type="submit" class="submit">预定</button>
  147. 						</p>
  148. 					</fieldset>
  149. 				</form>
  150.  
  151. 				<div class="new">
  152. 					<h2>最新机票</h2>
  153. 					<ul>
  154. 						<li>热门城市:</li>
  155. 						<li>北京</li>
  156. 						<li>上海</li>
  157. 						<li>广州</li>
  158. 						<li>深圳</li>
  159. 						<li>重庆</li>
  160. 						<li>成都</li>
  161. 						<li>杭州</li>
  162. 						<li>南京</li>
  163. 					</ul>
  164. 					<table>
  165. 						<thead>
  166. 							<tr>
  167. 								<th>路线</th>
  168. 								<th>日期</th>
  169. 								<th>价格</th>
  170. 								<th class="xs-hidden">税费</th>
  171. 								<th class="xs-hidden">餐食</th>
  172. 								<th>航班</th>
  173. 								<th>预定</th>
  174. 							</tr>
  175. 						</thead>
  176. 						<tbody>
  177. 							<tr>
  178. 								<td>北京-成都</td>
  179. 								<td>10-15</td>
  180. 								<td class="price">￥745</td>
  181. 								<td class="xs-hidden">￥50</td>
  182. 								<td class="xs-hidden">有</td>
  183. 								<td>春秋航空</td>
  184. 								<td><a href="###" class="reserve">预定</a></td>
  185. 							</tr>
  186. 							<tr>
  187. 								<td>北京-成都</td>
  188. 								<td>10-15</td>
  189. 								<td class="price">￥745</td>
  190. 								<td class="xs-hidden">￥50</td>
  191. 								<td class="xs-hidden">有</td>
  192. 								<td>春秋航空</td>
  193. 								<td><a href="###" class="reserve">预定</a></td>
  194. 							</tr>
  195. 							<tr>
  196. 								<td>北京-成都</td>
  197. 								<td>10-15</td>
  198. 								<td class="price">￥745</td>
  199. 								<td class="xs-hidden">￥50</td>
  200. 								<td class="xs-hidden">有</td>
  201. 								<td>春秋航空</td>
  202. 								<td><a href="###" class="reserve">预定</a></td>
  203. 							</tr>
  204. 							<tr>
  205. 								<td>北京-成都</td>
  206. 								<td>10-15</td>
  207. 								<td class="price">￥745</td>
  208. 								<td class="xs-hidden">￥50</td>
  209. 								<td class="xs-hidden">有</td>
  210. 								<td>春秋航空</td>
  211. 								<td><a href="###" class="reserve">预定</a></td>
  212. 							</tr>
  213. 							<tr>
  214. 								<td>北京-成都</td>
  215. 								<td>10-15</td>
  216. 								<td class="price">￥745</td>
  217. 								<td class="xs-hidden">￥50</td>
  218. 								<td class="xs-hidden">有</td>
  219. 								<td>春秋航空</td>
  220. 								<td><a href="###" class="reserve">预定</a></td>
  221. 							</tr>
  222. 							<tr>
  223. 								<td>北京-成都</td>
  224. 								<td>10-15</td>
  225. 								<td class="price">￥745</td>
  226. 								<td class="xs-hidden">￥50</td>
  227. 								<td class="xs-hidden">有</td>
  228. 								<td>春秋航空</td>
  229. 								<td><a href="###" class="reserve">预定</a></td>
  230. 							</tr>
  231. 							<tr>
  232. 								<td>北京-成都</td>
  233. 								<td>10-15</td>
  234. 								<td class="price">￥745</td>
  235. 								<td class="xs-hidden">￥50</td>
  236. 								<td class="xs-hidden">有</td>
  237. 								<td>春秋航空</td>
  238. 								<td><a href="###" class="reserve">预定</a></td>
  239. 							</tr>
  240. 							<tr>
  241. 								<td>北京-成都</td>
  242. 								<td>10-15</td>
  243. 								<td class="price">￥745</td>
  244. 								<td class="xs-hidden">￥50</td>
  245. 								<td class="xs-hidden">有</td>
  246. 								<td>春秋航空</td>
  247. 								<td><a href="###" class="reserve">预定</a></td>
  248. 							</tr>
  249. 							<tr>
  250. 								<td>北京-成都</td>
  251. 								<td>10-15</td>
  252. 								<td class="price">￥745</td>
  253. 								<td class="xs-hidden">￥50</td>
  254. 								<td class="xs-hidden">有</td>
  255. 								<td>春秋航空</td>
  256. 								<td><a href="###" class="reserve">预定</a></td>
  257. 							</tr>
  258. 							<tr>
  259. 								<td>北京-成都</td>
  260. 								<td>10-15</td>
  261. 								<td class="price">￥745</td>
  262. 								<td class="xs-hidden">￥50</td>
  263. 								<td class="xs-hidden">有</td>
  264. 								<td>春秋航空</td>
  265. 								<td><a href="###" class="reserve">预定</a></td>
  266. 							</tr>
  267. 							<tr>
  268. 								<td>北京-成都</td>
  269. 								<td>10-15</td>
  270. 								<td class="price">￥745</td>
  271. 								<td class="xs-hidden">￥50</td>
  272. 								<td class="xs-hidden">有</td>
  273. 								<td>春秋航空</td>
  274. 								<td><a href="###" class="reserve">预定</a></td>
  275. 							</tr>
  276. 							<tr>
  277. 								<td>北京-成都</td>
  278. 								<td>10-15</td>
  279. 								<td class="price">￥745</td>
  280. 								<td class="xs-hidden">￥50</td>
  281. 								<td class="xs-hidden">有</td>
  282. 								<td>春秋航空</td>
  283. 								<td><a href="###" class="reserve">预定</a></td>
  284. 							</tr>
  285. 							<tr>
  286. 								<td>北京-成都</td>
  287. 								<td>10-15</td>
  288. 								<td class="price">￥745</td>
  289. 								<td class="xs-hidden">￥50</td>
  290. 								<td class="xs-hidden">有</td>
  291. 								<td>春秋航空</td>
  292. 								<td><a href="###" class="reserve">预定</a></td>
  293. 							</tr>
  294. 						</tbody>
  295. 						<tfoot>
  296. 							<td colspan="7"><a href="###" class="more2">加载更多航班...</a></td>
  297. 						</tfoot>
  298. 					</table>
  299. 				</div>
  300. 			</div>
  301.  
  302. 		</div>
  303.  
  304. 		<!-- footer -->
  305. 		<footer id="footer">
  306. 			<div class="top xs-hidden">
  307. 				<div class="block left">
  308. 					<h2>合作伙伴</h2>
  309. 					<hr>
  310. 					<ul>
  311. 						<li><a href="#">途牛旅游网</a></li>
  312. 						<li><a href="#">驴妈妈旅游网</a></li>
  313. 						<li><a href="#">携程旅游</a></li>
  314. 						<li><a href="#">中国青年旅行社</a></li>
  315. 					</ul>
  316. 				</div>
  317. 				<div class="block center">
  318. 					<h2>旅游FAQ</h2>
  319. 					<hr>
  320. 					<ul>
  321. 						<li><a href="#">旅游合同签订方式？</a></li>
  322. 						<li><a href="#">儿童价是基于什么制定的？</a></li>
  323. 						<li><a href="#">旅游的线路品质怎么界定的？</a></li>
  324. 						<li><a href="#">单房差是什么？</a></li>
  325. 						<li><a href="#">旅游保险有那些种类？</a></li>
  326. 					</ul>
  327. 				</div>
  328. 				<div class="block right">
  329. 					<h2>联系方式</h2>
  330. 					<hr>
  331. 					<ul>
  332. 						<li><a href="#">微博：weibo.com/ycku</a></li>
  333. 						<li><a href="#">邮件：ycku@ycku.com</a></li>
  334. 						<li><a href="#">地址：江苏盐城无名路123号</a></li>
  335. 					</ul>
  336. 				</div>
  337. 			</div>
  338. 			<div class="clearfix"></div>
  339. 			<div class="version sm-visible">
  340. 				客户端 | 触屏版 | 电脑版
  341. 			</div>
  342. 			<div class="bottom">
  343. 				Copyright &copy; YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证：L-YC-BK12345</span>
  344. 			</div>
  345. 		</footer>
  346. 	</body>
  347. </html>

5.about.html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="./css/public.css">
  7. 		<link rel="stylesheet" href="./css/index.css">
  8. 		
  9. 	</head>
  10. 	<body>
  11. 		<header id="header">
  12. 			<div class="center">
  13. 				<div class="logo"></div>
  14. 				<nav class="link">
  15. 					<ul>
  16. 						<li><a href="index.html">首页</a></li>
  17. 						<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
  18. 						<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
  19. 						<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
  20. 						<li class="active"><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
  21. 					</ul>
  22. 				</nav>
  23. 			</div>
  24. 		</header>
  25.  
  26. 		<div id="headline">
  27. 			<img src="img/headline.jpg" alt="">
  28. 			<hgroup>
  29. 				<h2>旅游资讯</h2>
  30. 				<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
  31. 			</hgroup>
  32. 		</div>
  33.  
  34. 		<!-- main -->
  35. 		<div id="container">
  36. 			<!-- aside -->
  37. 			<aside class="aside">
  38.  
  39. 				<div class="recommend">
  40. 					<h2>景点推荐</h2>
  41. 					<div class="tag">
  42. 						<ul>
  43. 							<li><a href="###">曼谷(12)</a></li>
  44. 							<li><a href="###">东京(5)</a></li>
  45. 							<li><a href="###">西双版纳(8)</a></li>
  46. 							<li><a href="###">漓江(16)</a></li>
  47. 							<li><a href="###">呼伦贝尔(4)</a></li>
  48. 							<li><a href="###">首尔(9)</a></li>
  49. 							<li><a href="###">巴厘岛(15)</a></li>
  50. 							<li><a href="###">土耳其(22)</a></li>
  51. 							<li><a href="###">夏威夷(5)</a></li>
  52. 							<li><a href="###">巴厘岛(11)</a></li>
  53. 							<li><a href="###">毛里求斯(7)</a></li>
  54. 							<li><a href="###">吉普岛(4)</a></li>
  55. 							<li><a href="###">希腊(18)</a></li>
  56. 							<li><a href="###">法瑞意(8)</a></li>
  57. 							<li><a href="###">马尔代夫(9)</a></li>
  58. 							<li><a href="###">新西兰(16)</a></li>
  59. 							<li><a href="###">埃及(11)</a></li>
  60. 							<li><a href="###">迪拜(14)</a></li>
  61. 							<li><a href="###">斯里兰卡(7)</a></li>
  62. 							<li><a href="###">麦哈顿(3)</a></li>
  63. 							<li><a href="###">大阪(15)</a></li>
  64. 						</ul>
  65. 					</div>
  66. 				</div>
  67.  
  68. 				<div class="hot">
  69. 					<h2>热卖旅游</h2>
  70. 					<div class="figure">
  71. 						<figure>
  72. 							<img src="img/hot6.jpg" alt="">
  73. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  74. 						</figure>
  75. 						<figure>
  76. 							<img src="img/hot8.jpg" alt="">
  77. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  78. 						</figure>
  79. 						<figure>
  80. 							<img src="img/hot8.jpg" alt="">
  81. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  82. 						</figure>
  83. 						<figure>
  84. 							<img src="img/hot8.jpg" alt="">
  85. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  86. 						</figure>
  87. 						<figure>
  88. 							<img src="img/hot8.jpg" alt="">
  89. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  90. 						</figure>
  91. 						<figure>
  92. 							<img src="img/hot8.jpg" alt="">
  93. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  94. 						</figure>
  95. 						<figure>
  96. 							<img src="img/hot8.jpg" alt="">
  97. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  98. 						</figure>
  99. 						<figure>
  100. 							<img src="img/hot8.jpg" alt="">
  101. 							<figcaption>曼谷-芭提雅6日游</figcaption>
  102. 						</figure>
  103. 					</div>
  104. 				</div>
  105.  
  106. 				<div class="treasure">
  107. 					<h2>旅游百宝箱</h2>
  108. 					<div class="box">
  109. 						<a href="###" class="trea1">天气预报</a>
  110. 						<a href="###" class="trea2">火车票查询</a>
  111. 						<a href="###" class="trea3">航空查询</a>
  112. 						<a href="###" class="trea4">地铁线路查询</a>
  113. 					</div>
  114. 				</div>
  115.  
  116. 			</aside>
  117. 			<!-- 主要内容 -->
  118. 			<div class="list about">
  119.  
  120. 				<section>
  121. 					<h2>关于我们</h2>
  122. 					<p>瓢城旅行社旅游网创立于2006年10月，以“让旅游更简单”为使命，为消费者提供由北京、上海、广州、深圳等64个城市出发的旅游产品预订服务，产品全面，价格透明，全年365天24小时400电话预订，并提供丰富的后续服务和保障。
  123. 					</p>
  124. 					<p>目前，瓢城旅行社旅游网提供8万余种旅游产品供消费者选择，涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等，已成功服务累计超过400万人次出游。</p>
  125. 					<p>同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区，可以更好地帮助游客了解目的地信息，妥善制定好出游计划，并方便地预订旅程中的服务项目。</p>
  126. 				</section>
  127.  
  128. 				<p>&nbsp;</p>
  129.  
  130. 				<section>
  131. 					<h2>联系我们</h2>
  132. 					<address>
  133. 						<ul>
  134. 							<li>瓢城旅行社股份有限公司</li>
  135. 							<li>地址：江苏省盐城市亭湖区大庆中路1234号</li>
  136. 							<li>邮编：1234567</li>
  137. 							<li>电话：010-88888888</li>
  138. 							<li>传真：010-88666666</li>
  139. 						</ul>
  140. 					</address>
  141. 				</section>
  142.  
  143. 			</div>
  144.  
  145. 		</div>
  146.  
  147. 		<!-- footer -->
  148. 		<footer id="footer">
  149. 			<div class="top xs-hidden">
  150. 				<div class="block left">
  151. 					<h2>合作伙伴</h2>
  152. 					<hr>
  153. 					<ul>
  154. 						<li><a href="#">途牛旅游网</a></li>
  155. 						<li><a href="#">驴妈妈旅游网</a></li>
  156. 						<li><a href="#">携程旅游</a></li>
  157. 						<li><a href="#">中国青年旅行社</a></li>
  158. 					</ul>
  159. 				</div>
  160. 				<div class="block center">
  161. 					<h2>旅游FAQ</h2>
  162. 					<hr>
  163. 					<ul>
  164. 						<li><a href="#">旅游合同签订方式？</a></li>
  165. 						<li><a href="#">儿童价是基于什么制定的？</a></li>
  166. 						<li><a href="#">旅游的线路品质怎么界定的？</a></li>
  167. 						<li><a href="#">单房差是什么？</a></li>
  168. 						<li><a href="#">旅游保险有那些种类？</a></li>
  169. 					</ul>
  170. 				</div>
  171. 				<div class="block right">
  172. 					<h2>联系方式</h2>
  173. 					<hr>
  174. 					<ul>
  175. 						<li><a href="#">微博：weibo.com/ycku</a></li>
  176. 						<li><a href="#">邮件：ycku@ycku.com</a></li>
  177. 						<li><a href="#">地址：江苏盐城无名路123号</a></li>
  178. 					</ul>
  179. 				</div>
  180. 			</div>
  181. 			<div class="clearfix"></div>
  182. 			<div class="version sm-visible">
  183. 				客户端 | 触屏版 | 电脑版
  184. 			</div>
  185. 			<div class="bottom">
  186. 				Copyright &copy; YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证：L-YC-BK12345</span>
  187. 			</div>
  188. 		</footer>
  189. 	</body>
  190. </html>

css部分

  1. *{
  2. 	padding: 0;
  3. 	margin: 0;
  4. }
  5. div,
  6. figure,
  7. img,
  8. input,
  9. button {
  10.     box-sizing: border-box;
  11. }
  12. body{
  13. 	background-color: #f5f5f5;
  14. 	/* font-family: "Helvetica Neue",Arial, Helvetica; */
  15. }
  16. ul{
  17. 	list-style: outside none none;
  18. }
  19. a{
  20. 	text-decoration: none;
  21. }
  22. img {
  23.     display: block;
  24.     max-width: 100%;
  25. }
  26.  
  27. /* index */
  28.  
  29.  
  30. #tour{
  31. 	max-width: 1263px;
  32. 	height: auto;
  33. 	margin: 30px auto;
  34. 	text-align: center;
  35. }
  36. #tour .center h2{
  37. 	margin: 10px 0;
  38. 	font-size: 45px;
  39. 	letter-spacing: 2px;
  40. 	color: #666;
  41. }
  42. #tour .center p{
  43. 	color: #666;
  44. 	margin: 10px;
  45. 	font-size: 16px;
  46. }
  47. #tour .tour_title{
  48. 	height: 40px;
  49. 	overflow: hidden;
  50. }
  51. #tour figure{
  52. 	border: 1px solid #ddd;
  53. 	display: block;
  54. 	padding: 4px;
  55. 	border-radius: 4px;
  56. 	width: 32.4%;
  57. 	margin: 15px 0.4%;
  58. 	text-align: center;
  59. 	float: left;
  60. 	position: relative;
  61. }
  62. #tour figure img{
  63. 	vertical-align: middle;
  64. 	/* 文字在图片所在行中间对齐 */
  65. }
  66. #tour figure figcaption{
  67. 	color: #777;
  68. 	font-size: 14px;
  69. 	padding: 7px 0 0 0;
  70. 	letter-spacing: 1px;
  71. 	line-height: 1.5;
  72. }
  73. #tour .title{
  74. 	color: #333;
  75. 	font-weight: normal;
  76. }
  77. #tour .info{
  78. 	padding: 5px 0 0 0;
  79. }
  80. #tour .price{
  81. 	color: #f60;
  82. 	font-size: 14px;
  83. 	float: left;
  84. }
  85. #tour .price strong{
  86. 	font-size: 20px;
  87. 	letter-spacing: 1px;
  88. }
  89. #tour .sat{
  90. 	color: #999;
  91. 	font-size: 13px;
  92. 	font-style: normal;
  93. 	float: right;
  94. 	position: relative;
  95. 	right: 5px;
  96. 	top: 5px;
  97. }
  98. #tour .type{
  99. 	width: 90px;
  100. 	height: 25px;
  101. 	line-height: 25px;
  102. 	text-align: center;
  103. 	border-bottom-right-radius: 4px;
  104. 	background-color: #59b200;
  105. 	font-size: 14px;
  106. 	letter-spacing: 1px;
  107. 	position: absolute;
  108. 	color: #fff;
  109. 	top: 4px;
  110. 	left: 4px;
  111. }
  112. #headline{
  113. 	max-width: 1920px;
  114. 	padding: 70px 0 0 0;
  115. 	margin: 0 auto;
  116. 	position: relative;
  117. }
  118. #headline hgroup{
  119. 	position: absolute;
  120. 	top: 45%;
  121. 	left: 18%;
  122. }
  123. #headline h2{
  124. 	color: #eee;
  125. 	font-size: 45px;
  126. 	letter-spacing: 1px;
  127. }
  128. #headline h3{
  129. 	color: #eee;
  130. 	letter-spacing: 1px;
  131. 	font-size: 24px;
  132. }
  133. #container{
  134. 	max-width: 1263px;
  135. 	margin: 30px auto;
  136. }
  137. #container .aside{
  138. 	width: 28%;
  139. 	float: right;
  140. }
  141. .list{
  142. 	width: 71%;
  143. 	float: left;
  144. /* 	padding: 30px 0 0 80px; */
  145. }
  146. .list h2{
  147. 	height: 40px;
  148. 	line-height: 40px;
  149. 	font-size: 30px;
  150. 	font-weight: normal;
  151. 	border-bottom: 1px dashed #999;
  152. 	padding: 0 0 15px 0;
  153. 	margin: 0 0 20px 0;
  154. 	color: #666;
  155. }
  156. .tour{
  157. 	position: relative;
  158. 	border:1px solid #eee;
  159. 	margin: 0 0 20px 0;
  160. 	background-color: #fff;
  161. 	overflow: hidden;
  162. }
  163. .tour:after{
  164. 	content: ".";
  165. 	height: 0;
  166. 	visibility: hidden;
  167. 	display: block;
  168. 	clear:both;
  169. }
  170. .tour img{
  171. 	width: 45%;
  172. 	float: left;
  173. }
  174. .tour figcaption{
  175. 	width: 55%;
  176. 	float: right;
  177. }
  178. .tour hgroup{
  179. 	width: 300px;
  180. }
  181. .tour h2{
  182. 	font-size: 24px;
  183. 	font-weight: normal;
  184. 	padding: 10px 0 5px 25px;
  185. 	color: #333;
  186. 	border: none;
  187. }
  188. .tour h3{
  189. 	font-size: 16px;
  190. 	padding: 0 0 10px 25px;
  191. 	line-height: 1.5;
  192. 	font-weight: normal;
  193. 	color: #666;
  194. }
  195. .tour ol{
  196. 	padding: 0 0 0 25px;
  197. 	color: #666;
  198. 	line-height: 2;
  199. 	list-style: none;
  200. }
  201. .tour mark{
  202. 	background-color: #fff;
  203. 	padding: 0 5px;
  204. 	border-radius: 4px;
  205. 	color: #458B00;
  206. 	border: 1px solid #458B00;
  207. }
  208. .tour .buy{
  209. 	position: absolute;
  210. 	top: 55px;
  211. 	right: 30px;
  212. }
  213. .tour s{
  214. 	font-size: 16px;
  215. 	color: #999;
  216. }
  217. .tour .price{
  218. 	font-size: 20px;
  219. 	color: #f60;
  220. }
  221. .tour strong{
  222. 	font-size: 36px;
  223. }
  224. .tour .reserve{
  225. 	margin: 10px 0 0 0;
  226. }
  227. .tour .reserve a{
  228. 	display: inline-block;
  229. 	width: 152px;
  230. 	height: 40px;
  231. 	line-height: 40px;
  232. 	border-radius: 4px;
  233. 	background-color: #f60;
  234. 	text-align: center;
  235. 	font-size: 20px;
  236. 	color: #fff;
  237. }
  238. .tour .type{
  239. 	width: 90px;
  240. 	height: 25px;
  241. 	line-height: 25px;
  242. 	text-align: center;
  243. 	border-bottom-right-radius: 4px;
  244. 	background-color: #59b200;
  245. 	font-size: 14px;
  246. 	color: #fff;
  247. 	letter-spacing: 1px;
  248. 	position: absolute;
  249. 	top: 0;
  250. 	left: 0;
  251. }
  252. .tour .disc span{
  253. 	width: 52px;
  254. 	height: 52px;
  255. 	display: block;
  256. 	font-size: 14px;
  257. 	color: #ff7a4d;
  258. 	transform: rotate(45deg);
  259. 	position: absolute;
  260. 	top: 7px;
  261. 	right: 0;
  262. 	text-indent: 2px;
  263. 	padding: 5px 0 0 0;
  264. }
  265. .tour time{
  266. 	color: #458B00;
  267. }
  268. .tour footer{
  269. 	width: 55%;
  270. 	height: 35px;
  271. 	line-height: 35px;
  272. 	text-indent: 25px;
  273. 	color: #666;
  274. 	position: absolute;
  275. 	bottom: 0;
  276. 	background-color: #fafafa;
  277. 	letter-spacing: 1px;
  278. }
  279. #container .aside h2{
  280. 	height: 40px;
  281. 	line-height: 40px;
  282. 	font-size: 20px;
  283. 	font-weight: normal;
  284. 	letter-spacing: 1px;
  285. 	color: #666;
  286. 	text-indent: 10px;
  287. 	background-color: #fafafa;
  288. 	border-bottom: 1px solid #eee;
  289. 	text-align: left;
  290. }
  291. #container .recommend{
  292. 	border: 1px solid #eee;
  293. 	margin: 0 0 10px;
  294. 	color: #fff;
  295. }
  296. #container .tag{
  297. 	text-align: center;
  298. 	padding: 10px 0;
  299. }
  300. #container .tag li{
  301. 	display: inline-block;
  302. 	background-color: #eee;
  303. 	width: 100px;
  304. 	height: 35px;
  305. 	line-height: 35px;
  306. 	text-indent: 8px;
  307. 	text-align: left;
  308. 	margin: 2px 0;
  309. }
  310. #container .tag a{
  311. 	display: block;
  312. 	color: #999;
  313. }
  314. #container .tag a:hover{
  315. 	color: #fff;
  316. 	background-color: #458B00;
  317. }
  318. #container .hot{
  319. 	border: 1px solid #eee;
  320. 	margin: 0 0 10px;
  321. 	text-align: center;
  322. 	background-color: #fff;
  323. }
  324. #container .figure{
  325. 	padding: 10px 0;
  326. }
  327. #container .hot figure{
  328. 	display: inline-block;
  329. 	color: #666;
  330. 	padding: 4px;
  331. }
  332. #container .treasure{
  333. 	border: 1px solid #eee;
  334. 	margin: 0 0 10px;
  335. 	background-color: #fff;
  336. }
  337. #container .box{
  338. 	text-align: center;
  339. 	padding: 10px 0;
  340. }
  341. #container .box a{
  342. 	display: inline-block;
  343. 	background-color: #eee;
  344. 	width: 150px;
  345. 	height: 40px;
  346. 	line-height: 40px;
  347. 	text-indent: 35px;
  348. 	text-align: left;
  349. 	margin: 3px 0;
  350. 	color: #999;
  351. }
  352. #container .box a.trea1{
  353. 	background: #eee url(../img/trea1.png) no-repeat 10px center;
  354. }
  355. #container .box a.trea2{
  356. 	background: #eee url(../img/trea2.png) no-repeat 10px center;
  357. }
  358. #container .box a.trea3{
  359. 	background: #eee url(../img/trea3.png) no-repeat 10px center;
  360. }
  361. #container .box a.trea4{
  362. 	background: #eee url(../img/trea4.png) no-repeat 10px center;
  363. }
  364.  
  365.  
  366.  
  367. /* ticket.html */
  368. .ticket{
  369. 	color: #666;
  370. }
  371. .ticket .type{
  372. 	font-size: 20px;
  373. 	margin: 20px 0 10px 0;
  374. 	border: none;
  375. }
  376. .ticket .type mark{
  377. 	color: #fff;
  378. 	background-color: #458B00;
  379. 	padding: 5px 8px;
  380. 	border-radius: 4px;
  381. 	margin: 0 10px 0 16px;
  382. }
  383. .ticket .form{
  384. 	font-size: 20px;
  385. 	border: none;
  386. }
  387. .ticket .form p{
  388. 	line-height: 3;
  389. }
  390. .ticket .form input{
  391. 	width: 250px;
  392. 	height: 30px;
  393. 	border: 1px solid #ccc;
  394. 	background-color: #fff;
  395. 	border-radius: 4px;
  396. 	padding: 5px;
  397. 	font-size: 18px;
  398. 	color: #666;
  399. 	margin: 0 0 0 16px;
  400. }
  401. .ticket .left,
  402. .right{
  403. 	width: 43%;
  404. 	display: inline-block;
  405. }
  406. .ticket .button{
  407. 	width: 9%;
  408. 	display: inline-block;
  409. }
  410. .ticket .submit{
  411. 	display: inline-block;
  412. 	width: 90px;
  413. 	height: 90px;
  414. 	line-height: 90px;
  415. 	border-radius: 4px;
  416. 	background-color: #f60;
  417. 	color: #fff;
  418. 	font-size: 20px;
  419. 	text-align: center;
  420. 	border: none;
  421. 	cursor: pointer;
  422. 	position: relative;
  423. 	top: -28px;
  424. }
  425. .ticket .new{
  426. 	margin: 20px 0 0 0;
  427. 	font-size: 20px;
  428. }
  429. .ticket .new ul{
  430. 	margin: 20px 0 0 0;
  431. }
  432. .ticket .new li{
  433. 	display: inline-block;
  434. 	padding: 5px 10px;
  435. }
  436. .ticket .new li:first-child{
  437. 	padding-left: 0;
  438. }
  439. .ticket .new li:nth-child(2){
  440. 	background-color: #458B00;
  441. 	border-radius: 4px;
  442. 	color: #fff;
  443. }
  444. .ticket table{
  445. 	width: 100%;
  446. 	border-collapse: collapse;
  447. 	margin: 20px 0 0 0;
  448. 	border: 1px solid #ddd;
  449. }
  450. .ticket table th{
  451. 	height: 50px;
  452. 	line-height: 50px;
  453. 	border-bottom: 1px solid #ddd;
  454. 	font-weight: normal;
  455. }
  456. .ticket table td{
  457. 	height: 50px;
  458. 	line-height: 50px;
  459. 	text-align: center;
  460. 	border-bottom: 1px solid #ddd;
  461. }
  462. .ticket table tr:nth-child(2n){
  463. 	background-color: #fafafa;
  464. }
  465. .ticket table tr:hover{
  466. 	background-color: #eee;
  467. }
  468. .ticket table td:hover{
  469. 	cursor: pointer;
  470. }
  471. .ticket .price{
  472. 	color: #f60;
  473. }
  474. .ticket .more2{
  475. 	text-align: center;
  476. 	font-size: 18px;
  477. 	margin: 0 auto;
  478. 	cursor: pointer;
  479. 	display: block;
  480. 	color: #666;
  481. }
  482. .ticket .reserve{
  483. 	display: inline-block;
  484. 	width: 80px;
  485. 	height: 35px;
  486. 	line-height: 35px;
  487. 	border-radius: 4px;
  488. 	background-color: pink;
  489. 	color: #fff;
  490. 	/* overflow: hidden; */
  491. }
  492.  
  493.  
  494. /* about.html */
  495. .about p{
  496. 	font-size: 20px;
  497. 	color: #666;
  498. 	line-height: 2;
  499. 	margin: 20px 0;
  500. }
  501. .about address{
  502. 	font-style: normal;
  503. 	color: #666;
  504. 	font-size: 20px;
  505. 	margin: 20px 0;
  506. 	line-height: 1.6;
  507. }
  508.  
  509. /* scenery.html */
  510. .scenery figure{
  511. 	padding: 4px;
  512. 	border: 1px solid #ddd;
  513. 	width: 32.6%;
  514. 	margin: 5px 5px 15px 0;
  515. 	float: left;
  516. 	text-align: center;
  517. 	/* display: block; */
  518. }
  519. .scenery figcaption{
  520. 	text-align: center;
  521. 	color: #666;
  522. 	font-size: 20px;
  523. 	padding: 5px 0;
  524. }
  525. .scenery .more{
  526. 	width: 200px;
  527. 	height: 50px;
  528. 	line-height: 50px;
  529. 	border: 1px solid #ccc;
  530. 	background-color: #fafafa;
  531. 	font-size: 18px;
  532. 	border-radius: 10px;
  533. 	text-align: center;
  534. 	cursor: pointer;
  535. 	margin: 0 auto;
  536. 	clear: both;
  537. }
  538.  
  539. .sm-visible{
  540. 	color: #666;
  541. 	text-align: center;
  542. 	display: none;
  543. }
  544.  
  545.  
  546. /* 当页面大于1200px时 */
  547. @media (min-width: 1200px){
  548. 	
  549. }
  550.  
  551. /* 当页面位于992-1199px时 */
  552. @media (min-width: 992px) and (max-width: 1199px) {
  553. 	#container .aside{
  554. 		display: none;
  555. 	}
  556. 	#container .list{
  557. 		width: 99%;
  558. 		padding: 0 20px;
  559. 	}
  560. }
  561.  
  562. /* 当页面位于768-991px时 */
  563. @media (min-width: 768px) and (max-width: 992px) {
  564. 	.xs-hidden,#container .aside{
  565. 		display: none;
  566. 	}
  567. 	#header .link ul li{
  568. 		width: 25%;
  569. 	}
  570. 	#headline hgroup{
  571. 		left: 8%;
  572. 	}
  573. 	#headline h2{
  574. 		font-size: 26px;
  575. 	}
  576. 	#headline h3{
  577. 		font-size: 14px;
  578. 	}
  579. 	.sm-visible{
  580. 		display: block;
  581. 		height: 36px;
  582. 		line-height: 36px;
  583. 	}
  584. 	#footer .bottom,#footer .version{
  585. 		font-size: 18px;
  586. 	}
  587. 	#container .list{
  588. 		width: 99%;
  589. 		padding: 0 20px;
  590. 	}
  591. 	#container .tour .buy {
  592. 		position: absolute;
  593. 		top: auto;
  594. 		right: auto;
  595. 		bottom: 0;
  596. 		padding: 0 0 0 25px;
  597. 	}
  598. 	#container .tour .buy strong{
  599. 		font-size: 32px;
  600. 	}
  601. 	.about p,.about address {
  602. 		font-size: 18px;
  603. 	}
  604. 	
  605. 	.ticket .left, .ticket .right, .ticket .button {
  606. 		width: 98%;
  607. 		display: block;
  608. 	}
  609. 	.ticket .form input {
  610. 		width: 98%;
  611. 		height: 35px;
  612. 		margin: 0;
  613. 	}
  614. 	.ticket .form p {
  615. 		line-height: 2;
  616. 	}
  617. 	.ticket .submit {
  618. 		display: block;
  619. 		width: 30%;
  620. 		height: auto;
  621. 		line-height: 2;
  622. 		position: static;
  623. 		margin:10px auto;
  624. 	}
  625. }
  626.  
  627. /* 当页面位于480-767px时 */
  628. @media (min-width: 480px) and (max-width: 768px) {
  629. 	#header,#header .center,#header .link{
  630. 		height: 45px;
  631. 	}
  632. 	#header .logo,.xs-hidden,#container .aside{
  633. 		display: none;
  634. 	}
  635. 	/* #header .logo{
  636. 		display: none;
  637. 	}
  638. 	.xs-hidden{
  639. 		display: none;
  640. 	} */
  641. 	#header .link{
  642. 		width: 100%;
  643. 		line-height: 45px;
  644. 	}
  645. 	#header .link ul li{
  646. 		width: 25%;
  647. 	}
  648. 	#adver,#headline{
  649. 		padding: 45px 0 0 0;
  650. 	}
  651. 	#adver .center{
  652. 		width: 70%;
  653. 		height: 52px;
  654. 		margin: -10px 0 0 -15%;
  655. 	}
  656. 	#adver .search,#adver .button{
  657. 		font-size: 16px;
  658. 		height: 40px;
  659. 	}
  660. 	#tour .center h2{
  661. 		font-size: 30px;
  662. 	}
  663. 	#tour .center p{
  664. 		font-size: 16px;
  665. 	}
  666. 	.sm-visible{
  667. 		display: block;
  668. 		height: 38px;
  669. 		line-height: 38px;
  670. 	}
  671. 	#footer .bottom,#footer .version{
  672. 		font-size: 14px;
  673. 	}
  674. 	#tour figure{
  675. 		width: 49%;
  676. 	}
  677. 	#headline hgroup{
  678. 		left: 8%;
  679. 	}
  680. 	#headline h2{
  681. 		font-size: 26px;
  682. 	}
  683. 	#headline h3{
  684. 		font-size: 14px;
  685. 	}
  686. 	#container .list{
  687. 		width: 99%;
  688. 		padding: 0 20px;
  689. 	}
  690. 	#container .tour .buy {
  691. 		position: absolute;
  692. 		top: auto;
  693. 		right: auto;
  694. 		bottom: 0;
  695. 		padding: 0 0 0 25px;
  696. 	}
  697. 	#container .list h2{
  698. 		font-size: 25px;
  699. 	}
  700. 	#container .tour h2{
  701. 		font-size: 16px;
  702. 		height: 20px;
  703. 		padding: 5px 0 0 15px;
  704. 	}
  705. 	#container .tour h3{
  706. 		font-size: 14px;
  707. 		padding: 5px 0 0 15px;
  708. 		margin: -10px 0 0 0;
  709. 	}
  710. 	#container .tour .buy strong{
  711. 		font-size: 20px;
  712. 	}
  713. 	.about p,.about address {
  714. 		font-size: 15px;
  715. 	}
  716. 	/* scenery|ticket */
  717. 	.scenery figure {
  718. 		width: 48.2%;
  719. 	}
  720. 	.scenery figcaption {
  721. 		font-size: 18px;
  722. 	}
  723. 	.ticket .left, .ticket .right, .ticket .button {
  724. 		width: 98%;
  725. 		display: block;
  726. 	}
  727. 	.ticket .form input {
  728. 		width: 98%;
  729. 		height: 35px;
  730. 		margin: 0;
  731. 	}
  732. 	.ticket .form p {
  733. 		line-height: 2;
  734. 	}
  735. 	.ticket .submit {
  736. 		display: block;
  737. 		width: 30%;
  738. 		height: auto;
  739. 		line-height: 2;
  740. 		position: static;
  741. 		margin:10px auto;
  742. 	}
  743. }
  744.  
  745. /* 当页面小于480px时 */
  746. @media (max-width: 480px) {
  747. 	#header,#header .center,#header .link{
  748. 		height: 45px;
  749. 	}
  750. 	#header .logo,.xs-hidden,#container .aside{
  751. 		display: none;
  752. 	}
  753. 	#header .link{
  754. 		width: 100%;
  755. 		line-height: 45px;
  756. 	}
  757. 	#header .link ul li{
  758. 		width: 25%;
  759. 	}
  760. 	#adver,#headline{
  761. 		padding: 45px 0 0 0;
  762. 	}
  763. 	#adver .center{
  764. 		width: 80%;
  765. 		height: 48px;
  766. 		margin: -10px 0 0 -20%;
  767. 	}
  768. 	#adver .search,#adver .button{
  769. 		font-size: 16px;
  770. 		height: 40px;
  771. 	}
  772. 	#tour .center h2{
  773. 		font-size: 26px;
  774. 	}
  775. 	#tour .center p{
  776. 		font-size: 14px;
  777. 	}
  778. 	.sm-visible{
  779. 		display: block;
  780. 		height: 36px;
  781. 		line-height: 36px;
  782. 	}
  783. 	#footer .bottom,#footer .version{
  784. 		font-size: 13px;
  785. 	}
  786. 	#tour figure{
  787. 		width: 99%;
  788. 	}
  789. 	#headline hgroup{
  790. 		left: 8%;
  791. 	}
  792. 	#headline h2{
  793. 		font-size: 20px;
  794. 	}
  795. 	#headline h3{
  796. 		font-size: 12px;
  797. 	}
  798. 	#container .list{
  799. 		width: 99%;
  800. 		padding: 0 20px;
  801. 	}
  802. 	#container .tour .buy {
  803. 		position: absolute;
  804. 		top: auto;
  805. 		right: auto;
  806. 		bottom: 0;
  807. 		padding: 0 0 0 25px;
  808. 	}
  809. 	#container .list h2{
  810. 		font-size: 20px;
  811. 	}
  812. 	#container .tour h2{
  813. 		font-size: 14px;
  814. 		height: 15px;
  815. 		line-height: 15px;
  816. 		padding: 5px 0 0 15px;
  817. 	}
  818. 	#container .tour h3{
  819. 		font-size: 12px;
  820. 		padding: 5px 0 0 15px;
  821. 		margin: -18px 0 0 0;
  822. 		height: 15px;
  823. 		overflow: hidden;
  824. 	}
  825. 	#container .tour .buy strong{
  826. 		font-size: 16px;
  827. 	}
  828. 	#container .tour .disc{
  829. 		display: none;
  830. 	}
  831. 	#container .tour .type{
  832. 		height: 20px;
  833. 		width: 72px;
  834. 		font-size: 10px;
  835. 		line-height: 20px;
  836. 	}
  837. 	#container .tour .buy .price s{
  838. 		font-size: 12px;
  839. 	}
  840. 	.about p,.about address {
  841. 		font-size: 14px;
  842. 	}
  843. 	/* scenery|ticket */
  844. 	.scenery figure {
  845. 		width: 99%;
  846. 	}
  847. 	.scenery figcaption {
  848. 		font-size: 16px;
  849. 	}
  850. 	.ticket .left, .ticket .right, .ticket .button {
  851. 		width: 98%;
  852. 		display: block;
  853. 	}
  854. 	.ticket .form input {
  855. 		width: 98%;
  856. 		height: 35px;
  857. 		margin: 0;
  858. 	}
  859. 	.ticket .form p {
  860. 		line-height: 2;
  861. 	}
  862. 	.ticket .submit {
  863. 		display: block;
  864. 		width: 30%;
  865. 		height: auto;
  866. 		line-height: 2;
  867. 		position: static;
  868. 		margin:10px auto;
  869. 	}
  870. 	.ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket .submit, .ticket .reserve {
  871. 		font-size: 14px;
  872. 	}
  873. 	.ticket .reserve {
  874. 		display: inline-block;
  875. 		width: auto;
  876. 		height: auto;
  877. 		line-height: 1;
  878. 		border-radius: 4px;
  879. 		background-color: #f60;
  880. 		color: #fff;
  881. 		padding: 8px;
  882. 		text-align: center;
  883. 	}
  884. }
  885.

总结

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/232771
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号