当前位置：Gxlcms > html代码 > 第31章项目实战-PC端固定布局[4]

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

时间：2021-07-01 10:21:17 帮助过：25人阅读

学习要点：

1.热门旅游区

2.标题介绍区

3.旅游项目区

主讲教师：李炎恢

本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面，第一个项目采用 PC 端固定布局来实现。

一．热门旅游区

本节课，我们将探讨一下首页最核心的部分，旅游区。这块内容由两个部分组成，一个是大标题，表示热门旅游区域。其次就是旅游项目的图片展示区域。具体如下：

//热门旅游区父元素

  1. <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="tour"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
  2.     ...
  3. </span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

//旅游父元素

  1. <span style="color: #800000;">#tour </span>{<span style="color: #ff0000;">
  2.     width</span>:<span style="color: #0000ff;"> 1263px</span>;<span style="color: #ff0000;">
  3.     height</span>:<span style="color: #0000ff;"> 1200px</span>;<span style="color: #ff0000;">
  4.     margin</span>:<span style="color: #0000ff;"> 30px auto</span>;<span style="color: #ff0000;">
  5.     text-align</span>:<span style="color: #0000ff;"> center</span>;
  6. }

二．标题介绍区

标题区可以分为大标题和内容，那么

就比较适合了。

//标题

  1. <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="tour"</span><span style="color: #0000ff;">></span>
  2.     <span style="color: #0000ff;"><</span><span style="color: #800000;">section </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span>
  3.         <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>热门旅游<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
  4.         <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">
  5.             国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐
  6.         </span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
  7.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
  8. <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>

//标题 CSS

  1. <span style="color: #800000;">#tour .center </span>{<span style="color: #ff0000;">
  2.     text-align</span>:<span style="color: #0000ff;"> center</span>;
  3. }<span style="color: #800000;">
  4. #tour .center h2 </span>{<span style="color: #ff0000;">
  5.     margin</span>:<span style="color: #0000ff;"> 10px 0</span>;<span style="color: #ff0000;">
  6.     font-size</span>:<span style="color: #0000ff;"> 45px</span>;<span style="color: #ff0000;">
  7.     letter-spacing</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;">
  8.     color</span>:<span style="color: #0000ff;"> #666</span>;
  9. }<span style="color: #800000;">
  10. #tour .center p </span>{<span style="color: #ff0000;">
  11.     color</span>:<span style="color: #0000ff;"> #666</span>;<span style="color: #ff0000;">
  12.     margin</span>:<span style="color: #0000ff;"> 10px 0</span>;
  13. }

三．旅游项目区

项目区是一张图片和一段文本的阐述，共实现 9 个，3x3 排列。

//旅游项目区

  1. <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="tour"</span><span style="color: #0000ff;">></span>
  2.     <span style="color: #0000ff;"><</span><span style="color: #800000;">section </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span>
  3.         <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>热门旅游<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
  4.         <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
  5.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
  6.     <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  7.         <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/tour1.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
  8.         <span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="title"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"><</span>曼谷-芭提雅6日游<span style="color: #ff0000;">></span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
  9.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  10.             <span style="color: #0000ff;"><</span><span style="color: #800000;">em </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sat"</span><span style="color: #0000ff;">></span>满意度 77%<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
  11.             <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></span>￥ <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>2864<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 起<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  12.         <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  13.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="type"</span><span style="color: #0000ff;">></span>国内长线<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  14.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  15.     <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  16.         <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/tour2.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="马尔代夫双鱼岛Olhuveli4晚6日自助游"</span><span style="color: #0000ff;">></span>
  17.         <span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="title"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"><</span>马尔代夫双鱼岛Olhuveli4晚6日自助游<span style="color: #ff0000;">></span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 上海出发，机+酒包含:早晚餐+快艇<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
  18.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  19.             <span style="color: #0000ff;"><</span><span style="color: #800000;">em </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sat"</span><span style="color: #0000ff;">></span>满意度97%<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
  20.             <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></span>¥ <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>8039<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 起<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  21.         <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  22.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="type"</span><span style="color: #0000ff;">></span>出境长线<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  23.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  24.     <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  25.         <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/tour3.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="海南双飞5日游"</span><span style="color: #0000ff;">></span>
  26.         <span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="title"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"><</span>海南双飞5日游<span style="color: #ff0000;">></span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
  27.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  28.             <span style="color: #0000ff;"><</span><span style="color: #800000;">em </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sat"</span><span style="color: #0000ff;">></span>满意度90%<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
  29.             <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></span>¥ <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>2709<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 起<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  30.         <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  31.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="type"</span><span style="color: #0000ff;">></span>自助旅游<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  32.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  33.     <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  34.         <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/tour4.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="富山-大阪-东京8日游"</span><span style="color: #0000ff;">></span>
  35.         <span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="title"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"><</span>富山-大阪-东京8日游<span style="color: #ff0000;">></span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
  36.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  37.             <span style="color: #0000ff;"><</span><span style="color: #800000;">em </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sat"</span><span style="color: #0000ff;">></span>满意度97%<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
  38.             <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></span>¥ <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>9499<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 起<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  39.         <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  40.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="type"</span><span style="color: #0000ff;">></span>自助旅游<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  41.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  42.     <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  43.         <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/tour5.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="法瑞意德12日游"</span><span style="color: #0000ff;">></span>
  44.         <span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="title"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"><</span>法瑞意德12日游<span style="color: #ff0000;">></span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 4至5星，金色列车，少女峰，部分THE MALL<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
  45.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  46.             <span style="color: #0000ff;"><</span><span style="color: #800000;">em </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sat"</span><span style="color: #0000ff;">></span>满意度97%<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
  47.             <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></span>¥ <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>9199<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 起<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  48.         <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  49.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="type"</span><span style="color: #0000ff;">></span>国内短线<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  50.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  51.     <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  52.         <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/tour6.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="巴厘岛6日半自助游"</span><span style="color: #0000ff;">></span>
  53.         <span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="title"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"><</span>巴厘岛6日半自助游<span style="color: #ff0000;">></span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
  54.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  55.             <span style="color: #0000ff;"><</span><span style="color: #800000;">em </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sat"</span><span style="color: #0000ff;">></span>满意度95%<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
  56.             <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></span>¥ <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>6488<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 起<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  57.         <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  58.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="type"</span><span style="color: #0000ff;">></span>出境长线<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  59.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  60.     <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  61.         <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/tour7.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="塞舌尔迪拜9日自助游"</span><span style="color: #0000ff;">></span>
  62.         <span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="title"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"><</span>塞舌尔迪拜9日自助游<span style="color: #ff0000;">></span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 一游两国，4晚塞舌尔，2晚迪拜，香港EK往返<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
  63.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  64.             <span style="color: #0000ff;"><</span><span style="color: #800000;">em </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sat"</span><span style="color: #0000ff;">></span>满意度100%<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
  65.             <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></span>¥ <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>9669<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 起<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  66.         <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  67.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="type"</span><span style="color: #0000ff;">></span>游轮观光<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  68.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  69.     <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  70.         <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/tour8.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="花样姐姐土耳其9日或10日游"</span><span style="color: #0000ff;">></span>
  71.         <span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="title"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"><</span>花样姐姐土耳其9日或10日游<span style="color: #ff0000;">></span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
  72.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  73.             <span style="color: #0000ff;"><</span><span style="color: #800000;">em </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sat"</span><span style="color: #0000ff;">></span>满意度93%<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
  74.             <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></span>¥ <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>9999<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 起<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  75.         <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  76.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="type"</span><span style="color: #0000ff;">></span>出境长线<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  77.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  78.     <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  79.         <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/tour9.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="大阪-京都-箱根双飞6日游"</span><span style="color: #0000ff;">></span>
  80.         <span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="title"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"><</span>大阪-京都-箱根双飞6日游<span style="color: #ff0000;">></span><span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 盐城直飞，不走回头路，境外无自费，超值之旅<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
  81.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  82.             <span style="color: #0000ff;"><</span><span style="color: #800000;">em </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sat"</span><span style="color: #0000ff;">></span>满意度100%<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
  83.             <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></span>¥ <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>5284<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> 起<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  84.         <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  85.         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="type"</span><span style="color: #0000ff;">></span>国内短线<span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  86.     <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
  87. <span style="color: #0000ff;"><!--</span--><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

//旅游项目区 CSS 

  1. <span style="color: #800000;">#tour </span>{<span style="color: #ff0000;">
  2.     width</span>:<span style="color: #0000ff;"> 1263px</span>;<span style="color: #ff0000;">
  3.     height</span>:<span style="color: #0000ff;"> 1200px</span>;
  4.     <span style="color: #008000;">/*</span><span style="color: #008000;">background-color: #ccc;</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  5.     margin</span>:<span style="color: #0000ff;"> 30px auto</span>;<span style="color: #ff0000;">
  6.     text-align</span>:<span style="color: #0000ff;"> center</span>;
  7. }<span style="color: #800000;">
  8. #tour .center h2 </span>{<span style="color: #ff0000;">
  9.     font-size</span>:<span style="color: #0000ff;"> 45px</span>;<span style="color: #ff0000;">
  10.     letter-spacing</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;">
  11.     color</span>:<span style="color: #0000ff;"> #666</span>;<span style="color: #ff0000;">
  12.     margin</span>:<span style="color: #0000ff;"> 10px 0</span>;
  13. }<span style="color: #800000;">
  14. #tour .center p </span>{<span style="color: #ff0000;">
  15.     color</span>:<span style="color: #0000ff;"> #666</span>;<span style="color: #ff0000;">
  16.     margin</span>:<span style="color: #0000ff;"> 10px 0</span>;
  17. }<span style="color: #800000;">
  18. #tour figure </span>{<span style="color: #ff0000;">
  19.     border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;<span style="color: #ff0000;">
  20.     display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  21.     padding</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  22.     border-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  23.     margin</span>:<span style="color: #0000ff;"> 15px 12px</span>;<span style="color: #ff0000;">
  24.     width</span>:<span style="color: #0000ff;"> 380px</span>;<span style="color: #ff0000;">
  25.     text-align</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
  26.     position</span>:<span style="color: #0000ff;"> relative</span>;
  27. }<span style="color: #800000;">
  28. #tour figure img </span>{<span style="color: #ff0000;">
  29.     vertical-align</span>:<span style="color: #0000ff;"> middle</span>;
  30. }<span style="color: #800000;">
  31. #tour figcaption </span>{<span style="color: #ff0000;">
  32.     color</span>:<span style="color: #0000ff;"> #777</span>;<span style="color: #ff0000;">
  33.     line-height</span>:<span style="color: #0000ff;"> 1.5</span>;<span style="color: #ff0000;">
  34.     letter-spacing</span>:<span style="color: #0000ff;"> 1px</span>;<span style="color: #ff0000;">
  35.     font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
  36.     padding</span>:<span style="color: #0000ff;"> 7px 0 5px 0</span>;
  37. }<span style="color: #800000;">
  38. #tour .title </span>{<span style="color: #ff0000;">
  39.     color</span>:<span style="color: #0000ff;"> #333</span>;<span style="color: #ff0000;">
  40.     font-weight</span>:<span style="color: #0000ff;"> normal</span>;
  41. }<span style="color: #800000;">
  42. #tour .sat </span>{<span style="color: #ff0000;">
  43.     float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
  44.     font-size</span>:<span style="color: #0000ff;"> 13px</span>;<span style="color: #ff0000;">
  45.     color</span>:<span style="color: #0000ff;"> #999</span>;<span style="color: #ff0000;">
  46.     font-style</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
  47.     position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
  48.     top</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
  49.     right</span>:<span style="color: #0000ff;"> 5px</span>;
  50. }<span style="color: #800000;">
  51. #tour .price </span>{<span style="color: #ff0000;">
  52.     color</span>:<span style="color: #0000ff;"> #f60</span>;<span style="color: #ff0000;">
  53.     font-size</span>:<span style="color: #0000ff;"> 14px</span>;
  54. }<span style="color: #800000;">
  55. #tour .price strong </span>{<span style="color: #ff0000;">
  56.     font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
  57.     letter-spacing</span>:<span style="color: #0000ff;"> 1px</span>;
  58. }<span style="color: #800000;">
  59. #tour .type </span>{<span style="color: #ff0000;">
  60.     width</span>:<span style="color: #0000ff;"> 90px</span>;<span style="color: #ff0000;">
  61.     height</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
  62.     line-height</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
  63.     font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
  64.     text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  65.     color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  66.     background-color</span>:<span style="color: #0000ff;"> #59b200</span>;<span style="color: #ff0000;">
  67.     position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
  68.     top</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  69.     left</span>:<span style="color: #0000ff;"> 4px</span>;
  70. }

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！