Base CSS

基础应用

Heading

在Html中, 可以使用 <h1> 到 <h6>作为标题。使用顺序一定是按照数字的顺序依次向下，并且不能跳跃使用。

example

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
格式: <h1>heding 1</h1>

有颜色的标题

使用 <class> “类”来定义标题的样式。h1和h2的样式固定为灰色。

example

h3. Heading 3

h4. Heading 4

h5. Heading 5
格式: <h3 class="blue">heding 1</h3>

红色背景的标题

在标题添加颜色背景样式

example

h2. Heading 2

h3. Heading 3

h4. Heading 4

  1. <h2 class="bg-red">heding 2</h2>
  2. <h3 class="bg-red">heding 3</h3>
  3. <h4 class="bg-red">heding 4</h4>

灰色背景的标题

背景为灰色

example

h2. Heading 2

h3. Heading 3

h4. Heading 4

  1. <h2 class="bg-gray">heding 2</h2>
  2. <h3 class="bg-gray">heding 3</h3>
  3. <h4 class="bg-gray">heding 4</h4>

Body copy

页面信息内容默文本认字体号数 <Font-size> 为 13px, 行高 <line-height> 是 20px. 这是应用到 <content-info>的. 此外, <p> 默认为每一段都与下一段有10px的距离。

example

Forêt de Pierre, Parc du Lac vert, Village de pierre de Xizhou, Ancienne ville de Dali, Trois Pagodes, Marché de Shaping, Ancienne ville de Lijiang, Etang profond de Dragon Noir, Fresque du Village de Baisha, Ancienne résidence de Rock dans le Village de Yuhu, Gorges du Saut du tigre, Village Shigu, Visite à une famille tibétaine, Experience Shangri-La, Lac de Bita et Lac de Shudu

Parc de Manting, Vallée des Elephants sauvages, Jardin botanique tropical à Menglun, Village Jinuo, La plaine d'olive, Festival d’aspersion, Pavillons octogonaux de Jung Zhen, Marché livre

Ancienne ville de Lijiang, Etang profond de Dragon Noir, Colline de lion, Fresque du Village de Baisha, Mont enneigé de Jade Dragon ( de Ganhaizi), Gorge du saut du Tigre, Village Shigu

格式: <p>sumary </p>

a

文字连接：<a href=“/”>连接文字</a>，<href=“/”>中，“/”为连接地址。

连接文字

格式: <a href="/"> 连接文字 </a>

斜体a

斜体<a><em>连接文字</em></a>,可以使有链接的斜体有以下效果。

连接文字

格式: <a href="/"><em> 连接文字</em></a>

Strong

为了强调一个重要的文本段.

example

The following snippet of text is rendered as bold text.

格式: <strong> rendered as bold text. </strong>

重要的颜色.添加 class="sblue" 或 class="sred" 改变粗体的颜色。

example

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as bold text.

格式: <strong class="sblue"> rendered as bold text. </strong>
        <strong class="sred"> rendered as bold text. </strong>

Italics

斜体

example

Circuit classique qui comprend 4 villes incontournables en Chine.

格式: <em> 4 villes incontournables en Chine. </em>

Lists

无序列表(ul)

该列表没有明确的序号标识

example

  • Une découverte profonde dans le Yunnan
  • Une découverte profonde dans le Yunnan
  • Une découverte profonde dans le Yunnan
  • Une découverte profonde dans le Yunnan
  • Une découverte profonde dans le Yunnan
  • Une découverte profonde dans le Yunnan
  1. <ul>
  2. <li> Une découverte profonde dans le Yunnan </li>
  3. </ul>

多列列表

example

  • Une découverte profonde dans
  • Une découverte profonde dans
  • Une découverte profonde dans
  • Une découverte profonde dans
  • Une découverte profonde dans
  • Une découverte profonde dans
  1. <ul>
  2. <li class="transverse"> Une découverte profonde dans le Yunnan </li>
  3. <li class="transverse"> Une découverte profonde dans le Yunnan </li>
  4. <div style="clear:both;"><div>
  5. <li class="transverse"> Une découverte profonde dans le Yunnan </li>
  6. <li class="transverse"> Une découverte profonde dans le Yunnan </li>
  7. <div style="clear:both;"><div>
  8. <li class="transverse"> Une découverte profonde dans le Yunnan </li>
  9. <li class="transverse"> Une découverte profonde dans le Yunnan </li>
  10. <div style="clear:both;"><div>
  11. </ul>

有背景的列表

example

  • China Highlights has more than 152 off the shelf Private China tour packages to all parts of China. We specialize in customizing or tailor making a package to make it do exactly what you want.
  • China Highlights has more than 152 off the shelf Private China tour packages to all parts of China.
  1. <ul>
  2.   <li class="liWithBackground">
  3.     <img class="liIcon" src="/Publicbin/pic/drop-1.GIF"/>
  4.      China Highlights has more than 152 off the shelf Private China tour packages to all parts of China. We specialize in customizing or tailor making a package to make it do exactly what you want.
  5.   </li>
  6.   <li class="liWithBackground">
  7.     <img class="liIcon" src="/Publicbin/pic/drop-1.GIF"/>
  8.      China Highlights has more than 152 off the shelf Private China tour packages to all parts of China. We specialize in customizing or tailor making a package to make it do exactly what you want.
  9.   </li>
  10. </ul>

有序列表(ol)

该列表有明确的序号标识

example

  1. Une découverte profonde dans le Yunnan
  2. Une découverte profonde dans le Yunnan
  3. Une découverte profonde dans le Yunnan
  4. Une découverte profonde dans le Yunnan
  5. Une découverte profonde dans le Yunnan
  6. Une découverte profonde dans le Yunnan
  1. <ol>
  2. <li> Une découverte profonde dans le Yunnan </li>
  3. </ol>

img

example

tibet

默认格式: <img src="图片路径地址/" alt="图片描述">

图片右对齐: <img class="floatright" src="图片路径地址/" alt="图片描述">

图片左对齐: <img class="floatleft" src="图片路径地址/" alt="图片描述">

图片默认为左对齐。大家可以选择在图片属性里选择图片位置，也可以添加class属性。

有标题的图片

example

beijing The Badaling Great Wall
  1. <div class="picWithTitle">
  2.   <img src="/" alt="greatwall"/>
  3.   <span class="photoTitle">The Badaling Great Wall </span>
  4. </div>

Table

默认样式

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table">
  2.   <thead>
  3.      <tr>
  4.          <th> # </th>
  5.          <th> First Name </th>
  6.          <th> Last Name </th>
  7.          <th> Username </th>
  8.      </tr>
  9.   </thead>

  10.   <tbody>
  11.      <tr>
  12.          <td> 1 </td>
  13.          <td> Mark </td>
  14.          <td> Otto </td>
  15.          <td> @mdo </td>
  16.      </tr>
  17.   </tbody>
  18. </table>

Table2

example

中文名： 国庆节
英文名： National Day
时间： 10月1日
节日象征： 国家独立
法定假期： 3天
庆祝缘由： 宣告中华人民共和国成立的日子
庆祝范围： 全国
纪念方式： 大规模、全民性庆典活动

节日活动

  1. <div class="infotable">
  2. <table class="tableleft">
  3.      <tr>
  4.          <th> 中文名： </th>
  5.          <td> 国庆节 </td>
  6.      </tr>
  7.      <tr>
  8.          <th> 英文名： </th>
  9.          <td> National Day </td>
  10.      </tr>
  11.      <tr>
  12.          <th> 时间： </th>
  13.          <td> 10月1日 </td>
  14.      </tr>
  15.      <tr>
  16.          <th class="border">节日特征： </th>
  17.          <td class="border"> 国家独立 </td>
  18.      </tr>
  19. </table>

  20. <table class="tableright">
  21.      <tr>
  22.          <th> 法定假期： </th>
  23.          <td> 3天 </td>
  24.      </tr>
  25.      <tr>
  26.          <th> 庆祝缘由： </th>
  27.          <td> 宣告中华人民共和国成立的日子 </td>
  28.      </tr>
  29.      <tr>
  30.          <th> 庆祝范围： </th>
  31.          <td> 全国 </td>
  32.      </tr>
  33.      <tr>
  34.          <th class="border">纪念方式： </th>
  35.          <td class="border">大规模、全民性庆典活动 </td>
  36.      </tr>
  37. </table>
  38. <div class="clear"></div>
  39.   <h2 class="summaryhead"> 节日活动 </h2>
  40. </div>

Table3——举例：北京地铁信息表格

example

Station Outer Ring Inner Ring
First Train Last Train First Train Last Train
Total Line To Jishuitan Total Line To Xizhimen
Xizhimen 05:09 22:14 22:59 05:33 22:41 ----
  1. <table cellspacing="1" class="tab1">
  2.   <tbody>
  3.      <tr>
  4.          <th width="155" rowspan="3" class="tac"> <strong class="sblue">Station </strong> </th>
  5.          <th width="271" colspan="3" class="tac"> <strong class="sblue">Outer Ring</strong> </th>
  6.          <th width="313" colspan="3" class="tac"> <strong class="sblue">Inner Ring</strong> </th>
  7.      </tr>
  8.      <tr>
  9.          <th width="83" rowspan="2" class="tac">First Train </th>
  10.          <th width="189" colspan="2" class="tac">Last Train </th>
  11.          <th width="104" rowspan="2" class="tac">First Train </th>
  12.          <th width="209" colspan="2" class="tac">Last Train </th>
  13.      </tr>
  14.      <tr>
  15.          <th width="84" class="tac">Total Line </th>
  16.          <th width="105" class="tac">To Jishuitan </th>
  17.          <th width="104" class="tac">Total Line </th>
  18.          <th width="105" class="tac">To Xizhimen </th>
  19.      </tr>
  20.      <tr>
  21.          <td width="155" class="tac">Xizhimen </td>
  22.          <td width="83" class="tac">05:09 </td>
  23.          <td width="84" class="tac">22:14 </td>
  24.          <td width="105" class="tac">22:59 </td>
  25.          <td width="104" class="tac">05:33 </td>
  26.          <td width="104" class="tac">22:41 </td>
  27.          <td width="105" class="tac">---- </td>
  28.      </tr>
  29.   </tbody>
  30. </table>
  31. 表格内容（白底部分）只展示了一排，需要往下添加的只需要复制

    这部分，然后修改里面的内容即可。

Table4——举例：北京地铁信息表格2

example

Station To Sihuidong To Pingguoyuan
First Train Last Train First Train Last Train
Pingguoyuan 05:10 22:55 05:40 00:11
  1. <table cellspacing="1" class="tab1">
  2.   <tbody>
  3.      <tr>
  4.          <th class="tac" width="156" rowspan="2"> <strong class="sblue">Station </strong> </th>
  5.          <th class="tac" width="280" colspan="2"> <strong class="sblue">To Sihuidong</strong> </th>
  6.          <th class="tac" width="272" colspan="2"> <strong class="sblue">To Pingguoyuan</strong> </th>
  7.      </tr>
  8.      <tr>
  9.          <th class="tac" width="133">First Train </th>
  10.          <th class="tac" width="147">Last Train </th>
  11.          <th class="tac" width="147">First Train </th>
  12.          <th class="tac" width="125">Last Train </th>
  13.      </tr>
  14.      <tr>
  15.          <td class="tac" width="156">Pingguoyuan </td>
  16.          <td class="tac" width="133">05:10 </td>
  17.          <td class="tac" width="147">22:55 </td>
  18.          <td class="tac" width="147">05:40 </td>
  19.          <td class="tac" width="125">00:11 </td>
  20.      </tr>
  21.   </tbody>
  22. </table>
  23. 表格内容（白底部分）只展示了一排，需要往下添加的只需要复制

    这部分，然后修改里面的内容即可。

Table5——举例：北京地铁信息表格3

example

Station Clockwise
(Baogou - Chedaogou)		 Station Counter-Clockwise
(Chedaogou - Bagou)
First Train Last Train First Train Last Train
Whole Line Terminal: Bagou Terminal: Songjiazhuang Whole Line Terminal: Chedaogou
Bagou 04:54 20:23 22:08 22:27 Suzhoujie 06:34 22:32 00:18
  1. <table cellspacing="1" class="tab1">
  2.   <tbody>
  3.      <tr>
  4.          <th class="tac" width="223" rowspan="3"> <strong class="sblue">Station </strong> </th>
  5.          <th class="tac" width="252" colspan="4"> <strong class="sblue">Clockwise <br/>(Baogou - Chedaogou) </strong> </th>
  6.          <th class="tac" width="252" rowspan="3"> <strong class="sblue">Station</strong> </th>
  7.          <th class="tac" colspan="3"> <strong class="sblue">Counter-Clockwise <br/>(Chedaogou - Bagou) </strong> </th>
  8.      </tr>
  9.      <tr>
  10.          <th class="tac" width="120" rowspan="2">First Train </th>
  11.          <th class="tac" width="132" colspan="3">Last Train </th>
  12.          <th class="tac" width="132" rowspan="2">First Train </th>
  13.          <th class="tac" width="132" colspan="2">Last Train </th>
  14.      </tr>
  15.      <tr>
  16.          <th class="tac" width="120">Whole line </th>
  17.          <th class="tac" width="120">Terminal: Bagou </th>
  18.          <th class="tac" width="132">Terminal: Songjiazhuang </th>
  19.          <th class="tac" width="120">Whole line </th>
  20.          <th class="tac" width="132">Terminal: Chedaogou </th>
  21.      </tr>
  22.      <tr>
  23.          <td width="223" class="tac">Bagou </td>
  24.          <td width="120" class="tac">04:54 </td>
  25.          <td width="120" class="tac">20:23 </td>
  26.          <td width="120" class="tac">22:08 </td>
  27.          <td width="132" class="tac">22:27 </td>
  28.          <td width="132" class="tac">Suzhoujie </td>
  29.          <td width="132" class="tac">06:34 </td>
  30.          <td width="120" class="tac">22:32 </td>
  31.          <td width="132" class="tac">00:18 </td>
  32.      </tr>
  33.   </tbody>
  34. </table>
  35. 表格内容（白底部分）只展示了一排，需要往下添加的只需要复制

    这部分，然后修改里面的内容即可。

Table6——举例：北京地铁信息表格4

example

Station

To Xiju

To Zhangguozhuang

First Train

Last Train

First Train

Last Train

To Zhangguozhuang (Omnidistance)

To Dawayao (Halfway)

Zhangguozhuang

05:30

22:10

---

---

---
  1. <table class="table1" cellspacing="1">
  2.   <tbody>
  3.      <tr>
  4.          <th rowspan="3"> <p style="width:120px;"> <strong class="sblue">Station </strong> </p> </th>
  5.          <th rowspan="2"> <p style="width:200px;"> <strong class="sblue">To Xiju </strong> </p> </th>
  6.          <th rowspan="3"> <p style="width:413px;"> <strong class="sblue">To Zhangguozhuang </strong> </th>
  7.      </tr>
  8.      <tr>
  9.          <th rowspan="2"> <p style="width:80px;"> First Train </p> </th>
  10.          <th rowspan="2"> <p style="width:80px;">Last Train </p> </th>
  11.          <th rowspan="2"> <p style="width:100px;"> First Train </p> </th>
  12.          <th colspan="3"> <p style="width:271px;">Last Train </p> </th>
  13.      </tr>
  14.      <tr>
  15.          <th> <p style="width:171px;">To Zhangguozhuang (Omnidistance) </p> </th>
  16.          <th> <p style="width:120px;">To Dawayao (Halfway) </p> </th>
  17.      </tr>
  18.      <tr>
  19.          <td> <p style="width:120px;">Bagou </p> </td>
  20.          <td> <p style="width:80px;">05:30 </p> </td>
  21.          <td> <p style="width:80px;">22:10 </p> </td>
  22.          <td> <p style="width:100px;">--- </p> </td>
  23.          <td> <p style="width:171px;">--- </p> </td>
  24.          <td> <p style="width:120px;">--- </p> </td>
  25.      </tr>
  26.   </tbody>
  27. </table>
  28. 表格内容（白底部分）只展示了一排，需要往下添加的只需要复制

    这部分，然后修改里面的内容即可。

Blockquotes

默认引用样式

用<blockquote>来写一段引用，直接引用我们推荐使用<p>标签。

example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. </blockquote>

引用的来源命名

添加<small>标签来表示来源，来源的名字写在<cite>标签里，

example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
  1. <blockquote>
  2.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3.   <small>Someone famous in <cite Title="Source Title">Source Title.</cite> </small>
  4. </blockquote>

Description

一个关于其描述的列表。

example

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
  1. <dl>
  2.   <dt>Description lists</dt>
  3.   <dd>A description list is perfect for defining terms.</dd>
  4. </dl>

横向描述

example

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  1. <dl class="dl-horizontal">
  2.   <dt>Description lists</dt>
  3.   <dd>A description list is perfect for defining terms.</dd>
  4.   <dt>Euismod</dt>
  5.   <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
  6.     <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  7. </dl>

Addresses

example

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
Phone: (123) 456-7890
Full Name
first.last@gmail.com
  1. <address>
  2.   <strong>Twitter, Inc.</strong><br>
  3.      795 Folsom Ave, Suite 600<br>
  4.      San Francisco, CA 94107<br>
  5.      P: (123) 456-7890
  6. </address>
  8. <address>
  9.   <strong>Full Name</strong><br>
  10.      <a href="/">first.last@gmail.com</a>
  11. </address>

Tours-info 1

example

秋に宏村へ紅葉観賞2898元/人より

塔川の紅葉

黄山・屯渓・宏村（4日間）

毎年11月は塔川紅葉のベスト観賞時期です。烏[木臼]（ナンキンハゼ）の葉は霜降節気後、緑から黄色、赤色になり、古い民居と互いに照り映えて、とても綺麗です。絶対に見逃せない撮影スポットです。

  1. <div class="tourinfo">
  2.   <div class="tourinfotit">
  3.      <p class="tourname"> <a href="/">秋に宏村へ紅葉観賞</a>
  4.      <span class="tourprice">2898元/人より</span>
  5.      </p>
  6.      </div>
  8. <div class="tourimg">
  9. <a href="/"><img width="250px" height="130px" src="image/tachuan.jpg" alt="塔川の紅葉"></a>
  10. </div>
  11. <div class="tourtxt">
  12. <h3>黄山・屯渓・宏村（4日間）</h3>
  13. <p>毎年11月は塔川紅葉のベスト観賞時期です。烏[木臼]（ナンキンハゼ）の葉は霜降節気後、緑から黄色、赤色になり、古い民居と互いに照り映えて、とても綺麗です。絶対に見逃せない撮影スポットです。</p>
  14. <p class="pricebut">
  15. <a href="/"><img src="/pic/pricedetails.jpg"></a>
  16. </p>
  17. </div>
  18. <div class="clear"></div>
  19. </div>

Tours-info 2

example

秋に宏村へ紅葉観賞

塔川の紅葉

黄山・屯渓・宏村（4日間）

价格： 2898元/人より

毎年11月は塔川紅葉のベスト観賞時期です。烏[木臼]（ナンキンハゼ）の葉は霜降節気後、緑から黄色、赤色になり、古い民居と互いに照り映えて、とても綺麗です。絶対に見逃せない撮影スポットです。

  1. <div class="tourinfo2">
  2.      <h2>秋に宏村へ紅葉観賞</h2>
  3. <div class="tourimg2">
  4. <a href="/"><img width="250px" height="130px" src="image/tachuan.jpg" alt="塔川の紅葉"></a>
  5. </div>
  6. <div class="tourtxt2">
  7. <h3>黄山・屯渓・宏村（4日間）</h3>
  8. <div class="price"><span>价格： <strong class="redprice">2898元/人より </strong></span></div>
  9. <p>毎年11月は塔川紅葉のベスト観賞時期です。烏[木臼]（ナンキンハゼ）の葉は霜降節気後、緑から黄色、赤色になり、古い民居と互いに照り映えて、とても綺麗です。絶対に見逃せない撮影スポットです。</p>
  10. <p class="pricebut2">
  11. <a href="/"><img src="/pic/pricedetails.jpg"></a>
  12. </p>
  13. </div>
  14. <div class="clear"></div>
  15. </div>

带边框的文章

example

tibet

Pékin, la capitale de la Chine, une ancienne ville historique brille à nouveau et devient une ville moderne qui fournit les équipements modernes et confortables et il vous offre un image de la nouvelle Chine.

Pékin est intournable pour tous les visiteurs qui veulent voyager en Chine. Comme l'une des anciennes grandes capitales mondiales, elle abrite de beaux vestiges de l’ancienne Chine. Nous vous proposons de différents circuit à Pékin. Suivez le lien pour jeter un coup d’oeil sur les voyages organisés les plus populaires.la capitale de la Chine, une ancienne ville historique brille à nouveau et devient une ville moderne qui fournit les équipements modernes et confortables et il vous offre un image de la nouvelle Chine. Pékin est intournable pour tous les visiteurs qui veulent voyager en Chine. Comme l'une des anciennes grandes capitales mondiales, elle abrite de beaux vestiges de l’ancienne Chine. Nous vous proposons de différents circuit à Pékin. Suivez le lien pour jeter un coup d’oeil sur les voyages organisés les plus populaires.

  1. 默认图片靠左：
  2. <div class="box-760">
  3.   <img src="image/tibet.jpg" alt="tibet"/>
  4.   <p>txt content</p>
  5. </div>
  6. 图片靠右的类添加：
  7. <div class="box-760">
  8.   <img class="floatright" src="image/tibet.jpg" alt="tibet"/>
  9.   <p>txt content</p>
  10. </div>

Top things to do

example

HuTong

hutong

La voie sud des « Gong et des Tambours » se classe parmi les plus anciennes rues de Pékin. Sa popularité a grandi avec la venue des touristes et de...

  1. <div class="top-todo">
  2.   <p class="titleCenter">Hutong</p>
  3.   <img class="normal" src="/information-view/information/image/top-todo-titlebg.png"/>
  4.   <a href="/"><img class="normal-pic" src="image/hutong.jpg" alt="hutong"/></a>
  5.     <p class="infoCenter"><a href="/"> La voie sud des « Gong et des Tambours » se classe parmi les plus anciennes rues de Pékin. Sa popularité a grandi avec la venue des touristes et de... </a></p>
  6. <ul>
  7.   <li><a href="/"> La voie sud des « Gong et des Tambours » </a></li>
  8.   <li><a href="/"> La voie sud des « Gong et des Tambours » </a></li>
  9. </ul>
  10. </div>

  11. <div class="top-todo">
  12.   <p class="titleCenter">Hutong</p>
  13.   <img class="normal" src="/information-view/information/image/top-todo-titlebg.png"/>
  14.   <img class="normal-pic" src="image/hutong.jpg" alt="hutong"/>
  15.     <p class="infoCenter"> La voie sud des « Gong et des Tambours » se classe parmi les plus anciennes rues de Pékin. Sa popularité a grandi avec la venue des touristes et de... </p>
  16. <ul>
  17.   <li><a href="/"> La voie sud des « Gong et des Tambours » </a></li>
  18.   <li><a href="/"> La voie sud des « Gong et des Tambours » </a></li>
  19. </ul>
  20. </div> <div style="clear:both;"></div>

Top things to do样式2

example

1. Visit Ruins of St. Paul Cathedra

tibet

St. Paul Cathedral is the greatest church in Macau combined with the architectural styles of Europe and the East, but it was burned down in 1835, only leaving its large and beautiful fa?ade and the front stairway.

  1. <div class="top-todostyle2">
  2.   <h2 class="bg-gray">1. Visit Ruins of St. Paul Cathedra</h2>
  3.  <div class="pictureleft"><img src="image/tibet.jpg" alt="tibet" /> </div>
  4.   <div class="txtright">
  5.     <p>St. Paul Cathedral is the greatest church in Macau combined with the architectural styles of Europe and the East, but it was burned down in 1835, only leaving its large and beautiful fa?ade and the front stairway.</p>
  6. <ul>
  7.   <li><a href="/"> Macau Shopping </a></li>
  8.   <li><a href="/"> Macau Shopping </a></li>
  9.   <li><a href="/"> Macau Shopping </a></li>
  10.   <li><a href="/"> Macau Shopping </a></li>
  11.   <li><a href="/"> Macau Shopping </a></li>
  12. </ul>
  13. </div><div style="clear:both;"></div>

  14. </div>

Weather Form

example

  Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
High (oC) -1 5 14 22 28 32 33 32 27 19 8 -0
Low (oC) -15 -11 -3 4 10 14 17 15 9 1 -6 -12
Rain (mm) 2.54 2.54 2.54 3.81 3.81 6.35 10.16 5.08 2.54 2.54 2.54 2.54
High (oF) 30 40 56 70 81 88 91 89 80 66 46 31
Low (oF) 5 12 26 39 49 57 61 58 47 33 21 9
Rain (in) 0.1 0.1 0.1 0.15 0.15 0.25 0.4 0.2 0.1 0.1 0.1 0.1
  1. <table width="100%" cellspacing="0" cellpadding="0" border="0" class="averageWeather roundCorner">
  2.   <tbody>
  3.   <tr>
  4.   <img class="normal-pic" src="image/hutong.jpg" alt="hutong"/>
  5.     <th>   </th>
  6.     <th class="month jan"> Jan </th>
  7.     <th class="month feb"> Feb </th>
  8.     <th class="month mar"> Mar </th>
  9.     <th class="month apr"> Apr </th>
  10.     <th class="month may"> May </th>
  11.     <th class="month jun"> Jun </th>
  12.     <th class="month jul"> Jul </th>
  13.     <th class="month aug"> Aug </th>
  14.     <th class="month sep"> Sep </th>
  15.     <th class="month oct"> Oct </th>
  16.     <th class="month nov"> Nov </th>
  17.     <th class="month dec"> Dec </th>
  18. </tr>
  19.   <tr class="gray">
  20.   <td valign="top"><strong> High (oC) </strong></td>
  21.   <td> -15</td>
  22.   <td> -11 </td>
  23.   <td> -3 </td>
  24.   <td> 4 </td>
  25.   <td> 10 </td>
  26.   <td> 14 </td>
  27.   <td> 17 </td>
  28.   <td> 15 </td>
  29.   <td> 9 </td>
  30.   <td> 1 </td>
  31.   <td> -6 </td>
  32.   <td> -12 </td>
  33. </tr>
  34.   <tr>
  35.   <td valign="top"><strong> Low (oC) </strong></td>
  36.   <td> -1 </td>
  37.   <td> 5 </td>
  38.   <td> 14 </td>
  39.   <td> 22 </td>
  40.   <td> 28 </td>
  41.   <td> 32 </td>
  42.   <td> 33 </td>
  43.   <td> 32 </td>
  44.   <td> 27 </td>
  45.   <td> 19 </td>
  46.   <td> 8 </td>
  47.   <td> -0 </td>
  48. </tr>
  49.   <tr>
  50.   <td valign="top"><strong> Rain (mm) </strong></td>
  51.   <td> 2.54 </td>
  52.   <td> 2.54 </td>
  53.   <td> 2.54 </td>
  54.   <td> 3.81 </td>
  55.   <td> 3.81 </td>
  56.   <td> 6.35 </td>
  57.   <td> 10.16 </td>
  58.   <td> 5.08 </td>
  59.   <td> 2.54 </td>
  60.   <td> 2.54</td>
  61.   <td> 2.54</td>
  62.   <td> 2.54</td>
  63. </tr>
  64.   <tr class="gray">
  65.   <td valign="top"><strong> High (oF) </strong></td>
  66.   <td> 30</td>
  67.   <td> 40 </td>
  68.   <td> 56 </td>
  69.   <td> 70 </td>
  70.   <td> 81 </td>
  71.   <td> 88 </td>
  72.   <td> 91 </td>
  73.   <td> 89 </td>
  74.   <td> 80 </td>
  75.   <td> 66 </td>
  76.   <td> 46 </td>
  77.   <td> 31 </td>
  78. </tr>
  79.   <tr>
  80.   <td valign="top"><strong> Low (oF) </strong></td>
  81.   <td> 5 </td>
  82.   <td> 12 </td>
  83.   <td> 26 </td>
  84.   <td> 39 </td>
  85.   <td> 49 </td>
  86.   <td> 57 </td>
  87.   <td> 61 </td>
  88.   <td> 58 </td>
  89.   <td> 47 </td>
  90.   <td> 33 </td>
  91.   <td> 21</td>
  92.   <td> 9 </td>
  93. </tr>
  94.   <tr>
  95.   <td valign="top"><strong> Rain (in) </strong></td>
  96.   <td> 0.1 </td>
  97.   <td> 0.1</td>
  98.   <td> 0.1</td>
  99.   <td> 0.15</td>
  100.   <td> 0.15 </td>
  101.   <td> 0.25 </td>
  102.   <td> 0.4 </td>
  103.   <td> 0.2</td>
  104.   <td> 0.1 </td>
  105.   <td> 0.1</td>
  106.   <td> 0.1</td>
  107.   <td> 0.1</td>
  108. </tr>
  109. </tbody>
  110. </table>