9. CSS的位置控制
9-1 上課範例：index4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
</head>
<body>
<div id="page">
<ul id="menu">
<li><a href="#">回首頁</a></li>
<li><a href="#">新聞區</a></li>
<li><a href="#">討論區</a></li>
<li><a href="#">影片區</a></li>
<li><a href="#">相片區</a></li>
</ul>
<div style="clear:both;"></div>
<h1 id="title">紫斑蝶季來臨 明道中學校園「蝶舞翩翩」</h1>
<div id="content">
<p id="first">
台中明道中學發現第一批紫斑蝶蒞臨，宣告紫斑蝶季來臨。使校園內蝶舞翩翩，學生志工們21日發現了一隻標記編號UK409「斯氏紫斑蝶」，經查證是由紫斑蝶協會志工於4月9日在雲林縣林內鄉所標放，此發現印證了紫斑蝶的飛行旅程，也證實烏日確為紫斑蝶北遷蝶道的一站，明道校園更是紫蝶嬌客過境的棲息點。
</p>
<p>
明道中學環保組長林漢民指出，近日天氣溫暖，是最適合紫斑蝶飛行的氣候，校園每小時可發現6到8隻蝶蹤，志工們甚至一日可完成20隻紫斑蝶的標放工作。21日上午，師生發現一隻斯氏紫斑蝶，身上帶著「UK409」的編號，他們向台灣紫斑蝶生態保育協會求證，證實該蝶為協會志工李凱翔先生4月9日在雲林縣林內鄉觸口水利站所標放。
</p>
<p>
林漢民組長表示，所謂「標放」，是將昆蟲補抓後，先進行標記，然後再野放，這是不破壞大自然生態的兼顧保育及紀錄研究的好方法。這隻9日在林內被標放的蝴蝶，經過11日的飛行，從林內來到烏日，再被師生志工發現，飛行距離約70多公里。此消息可說是對明道志工的莫大鼓勵，也為解開紫斑蝶生態密碼及北遷蝶道之研究，提供最佳的資料！
</p>
<table id="tbl">
<tr class="odd">
<th>別名</th>
<td>6</td>
</tr>
<tr class="even">
<th>生物學分類</th>
<td>斑蝶科</td>
</tr>
<tr class="odd">
<th>寄主植物</th>
<td>蘿藦科之羊角藤</td>
</tr>
<tr class="even">
<th>蜜源植物</th>
<td>
<ul class="list">
<li>馬櫻丹</li>
<li>繁星花</li>
<li>金露花</li>
<li>澤蘭及多種菊科野花澤蘭及多種菊科野花澤蘭及多種菊科野花澤蘭及多種菊科野花澤蘭及多種菊科野花澤蘭及多種菊科野花</li>
</ul>
</td>
</tr>
<tr class="odd">
<th>台灣分佈</th>
<td>廣泛分布於台灣全島平地到低山地區，中、南部山區海拔 1500 公尺左右山區均可見到</td>
</tr>
<tr class="even">
<th>其他國家分佈</th>
<td>中國大陸南部、中南半島、緬甸、阿薩姆、馬來半島、印度南部、斯里蘭卡、蘇門達臘、菲律賓、蘇拉維西、爪哇、婆羅洲及小巽他群島等東洋區一直到新幾內亞、所羅門群島、昆士藍等澳洲地區皆有分佈</font></td>
</tr>
<tr class="odd">
<th>備註</th>
<td></td>
</table>
</div>
<p id="info">
原文網址: 紫斑蝶季來臨 明道中學校園「蝶舞翩翩」 | 頭條新聞 | NOWnews 今日新聞網 http://www.nownews.com/2011/04/21/11490-2706682.htm#ixzz1J7jytoVy
</p>
</div>
</body>
</html>
