4-1.html
<html>
<head>
<title>邊框</title>
<style>
<!--
img.test1{
border-style:dotted; /* 點畫線 */
border-color:#FF9900; /* 邊框顏色 */
border-width:5px; /* 邊框粗細 */
}
img.test2{
border-style:dashed; /* 虛線 */
border-color:blue; /* 邊框顏色 */
border-width:2px; /* 邊框粗細 */
}
-->
</style>
</head>
<body>
<img src="banana.jpg" class="test1">
<img src="banana.jpg" class="test2">
</body>
</html>
<head>
<title>邊框</title>
<style>
<!--
img.test1{
border-style:dotted; /* 點畫線 */
border-color:#FF9900; /* 邊框顏色 */
border-width:5px; /* 邊框粗細 */
}
img.test2{
border-style:dashed; /* 虛線 */
border-color:blue; /* 邊框顏色 */
border-width:2px; /* 邊框粗細 */
}
-->
</style>
</head>
<body>
<img src="banana.jpg" class="test1">
<img src="banana.jpg" class="test2">
</body>
</html>
<html>
<head>
<title>分別設置4邊框</title>
<style>
<!--
img{
border-left-style:dotted; /* 左點畫線 */
border-left-color:#FF9900; /* 左邊框顏色 */
border-left-width:5px; /* 左邊框粗細 */
border-right-style:dashed;
border-right-color:#33CC33;
border-right-width:2px;
border-top-style:solid; /* 上實線 */
border-top-color:#CC00FF; /* 上邊框顏色 */
border-top-width:10px; /* 上邊框粗細 */
border-bottom-style:groove;
border-bottom-color:#666666;
border-bottom-width:15px;
}
-->
</style>
</head>
<body>
<img src="grape.jpg">
</body>
</html>
<head>
<title>分別設置4邊框</title>
<style>
<!--
img{
border-left-style:dotted; /* 左點畫線 */
border-left-color:#FF9900; /* 左邊框顏色 */
border-left-width:5px; /* 左邊框粗細 */
border-right-style:dashed;
border-right-color:#33CC33;
border-right-width:2px;
border-top-style:solid; /* 上實線 */
border-top-color:#CC00FF; /* 上邊框顏色 */
border-top-width:10px; /* 上邊框粗細 */
border-bottom-style:groove;
border-bottom-color:#666666;
border-bottom-width:15px;
}
-->
</style>
</head>
<body>
<img src="grape.jpg">
</body>
</html>
<html>
<head>
<title>合併各CSS值</title>
<style>
<!--
img.test1{
border:5px double #FF00FF; /* 將各個值合併 */
}
img.test2{
border-right:5px double #FF00FF;
border-left:8px solid #0033FF;
}
-->
</style>
</head>
<body>
<img src="peach.jpg" class="test1">
<img src="peach.jpg" class="test2">
</body>
</html>
<head>
<title>合併各CSS值</title>
<style>
<!--
img.test1{
border:5px double #FF00FF; /* 將各個值合併 */
}
img.test2{
border-right:5px double #FF00FF;
border-left:8px solid #0033FF;
}
-->
</style>
</head>
<body>
<img src="peach.jpg" class="test1">
<img src="peach.jpg" class="test2">
</body>
</html>
<html>
<head>
<title>圖片縮放</title>
<style>
<!--
img.test1{
width:50%; /* 相對寬度 */
}
-->
</style>
</head>
<body>
<img src="pear.jpg" class="test1">
</body>
</html>
<head>
<title>圖片縮放</title>
<style>
<!--
img.test1{
width:50%; /* 相對寬度 */
}
-->
</style>
</head>
<body>
<img src="pear.jpg" class="test1">
</body>
</html>
<html>
<head>
<title>不等比例縮放</title>
<style>
<!--
img.test1{
width:70%; /* 相對寬度 */
height:110px; /* 絕對高度 */
}
-->
</style>
</head>
<body>
<img src="cup.jpg" class="test1">
</body>
</html>
<head>
<title>不等比例縮放</title>
<style>
<!--
img.test1{
width:70%; /* 相對寬度 */
height:110px; /* 絕對高度 */
}
-->
</style>
</head>
<body>
<img src="cup.jpg" class="test1">
</body>
</html>
<html>
<head>
<title>水平對齊</title>
</head>
<body>
<table width="100%" border="1">
<tr><td style="text-align:left;"><img src="building.jpg"></td></tr>
<tr><td style="text-align:center;"><img src="building.jpg"></td></tr>
<tr><td style="text-align:right;"><img src="building.jpg"></td></tr>
</table>
</body>
</html>
<head>
<title>水平對齊</title>
</head>
<body>
<table width="100%" border="1">
<tr><td style="text-align:left;"><img src="building.jpg"></td></tr>
<tr><td style="text-align:center;"><img src="building.jpg"></td></tr>
<tr><td style="text-align:right;"><img src="building.jpg"></td></tr>
</table>
</body>
</html>
<html>
<head>
<title>豎直對齊</title>
<style type="text/css">
<!--
p{ font-size:15px; }
img{ border: 1px solid #000055; }
-->
</style>
</head>
<body>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:baseline;">方式:baseline<img src="miki.jpg" style="vertical-align:baseline;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:bottom;">方式:bottom<img src="miki.jpg" style="vertical-align:bottom;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:middle;">方式:middle<img src="miki.jpg" style="vertical-align:middle;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:sub;">方式:sub<img src="miki.jpg" style="vertical-align:sub;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:super;">方式:super<img src="miki.jpg" style="vertical-align:super;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:text-bottom;">方式:text-bottom<img src="miki.jpg" style="vertical-align:text-bottom;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:text-top;">方式:text-top<img src="miki.jpg" style="vertical-align:text-top;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:top">方式:top<img src="miki.jpg" style="vertical-align:top">方式</p>
</body>
</html>
<head>
<title>豎直對齊</title>
<style type="text/css">
<!--
p{ font-size:15px; }
img{ border: 1px solid #000055; }
-->
</style>
</head>
<body>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:baseline;">方式:baseline<img src="miki.jpg" style="vertical-align:baseline;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:bottom;">方式:bottom<img src="miki.jpg" style="vertical-align:bottom;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:middle;">方式:middle<img src="miki.jpg" style="vertical-align:middle;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:sub;">方式:sub<img src="miki.jpg" style="vertical-align:sub;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:super;">方式:super<img src="miki.jpg" style="vertical-align:super;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:text-bottom;">方式:text-bottom<img src="miki.jpg" style="vertical-align:text-bottom;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:text-top;">方式:text-top<img src="miki.jpg" style="vertical-align:text-top;">方式</p>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:top">方式:top<img src="miki.jpg" style="vertical-align:top">方式</p>
</body>
</html>
<html>
<head>
<title>豎直對齊，具體數值</title>
<style type="text/css">
<!--
p{ font-size:15px; }
img{ border: 1px solid #000055; }
-->
</style>
</head>
<body>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:5px;">方式: 5px</p>
<p>豎直對齊<img src="miki.jpg" style="vertical-align:-10px;">方式: -10px</p>
</body>
</html>
<head>
<title>豎直對齊，具體數值</title>
<style type="text/css">
<!--
p{ font-size:15px; }
img{ border: 1px solid #000055; }
-->
</style>
</head>
<body>
<p>豎直對齊<img src="donkey.jpg" style="vertical-align:5px;">方式: 5px</p>
<p>豎直對齊<img src="miki.jpg" style="vertical-align:-10px;">方式: -10px</p>
</body>
</html>
<html>
<head>
<title>圖文混排</title>
<style type="text/css">
<!--
body{
background-color:bb0102; /* 頁面背景顏色 */
margin:0px;
padding:0px;
}
img{
float:left; /* 文字環繞圖片 */
/*margin-right:50px; /* 右側距離 */
/*margin-bottom:25px; /* 下端距離 */
}
p{
color:#FFFF00; /* 文字顏色 */
margin:0px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
span{
float:left; /* 首字放大 */
font-size:85px;
font-family:黑體;
margin:0px;
padding-right:5px;
}
-->
</style>
</head>
<body>
<img src="chunjie.jpg" border="0">
<p><span>春</span>節古時叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一個早晨。《爾雅》，對“年”的註解是：“夏曰歲，商曰祀，周曰年。”自殷商起，把月圓缺一次爲一月，初一爲朔，十五爲望。每年的開始從正月朔日子夜算起，叫“元旦”或“元日”。到了漢武帝時，由於“觀象授時”的經驗越來越豐富，司馬遷創造了《太初曆》，確定了正月爲歲首，正月初一爲新年。此後，農曆年的習俗就一直流傳下來。</p>
<p>據《詩經》記載，每到農曆新年，農民喝“春酒”，祝“改歲”，盡情歡樂，慶祝一年的豐收。到了晉朝，還增添了放爆竹的節目，即燃起堆堆烈火，將竹子放在火裏燒，發出噼噼啪啪的爆竹聲，使節日氣氛更濃。到了清朝，放爆竹，張燈結綵，送舊迎新的活動更加熱鬧了。清代潘榮升《帝京歲時記勝》中記載：“除夕之次，夜子初交，門外寶炬爭輝，玉珂競響。……聞爆竹聲如擊浪轟雷，遍於朝野，徹夜無停。”</p>
<p>在我國古代的不同歷史時期，春節，有着不同的含義。在漢代，人們把二十四節氣中的“立春”這一天定爲春節。南北朝時，人們則將整個春季稱爲春節。1911年，辛亥革命推翻了清朝統治，爲了“行夏曆，所以順農時，從西曆，所以便統計”，各省都督府代表在南京召開會議，決定使用公曆。這樣就把農曆正月初一定爲春節。至今，人們仍沿用春節這一習慣稱呼。</p>
</body>
</html>
<head>
<title>圖文混排</title>
<style type="text/css">
<!--
body{
background-color:bb0102; /* 頁面背景顏色 */
margin:0px;
padding:0px;
}
img{
float:left; /* 文字環繞圖片 */
/*margin-right:50px; /* 右側距離 */
/*margin-bottom:25px; /* 下端距離 */
}
p{
color:#FFFF00; /* 文字顏色 */
margin:0px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
span{
float:left; /* 首字放大 */
font-size:85px;
font-family:黑體;
margin:0px;
padding-right:5px;
}
-->
</style>
</head>
<body>
<img src="chunjie.jpg" border="0">
<p><span>春</span>節古時叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一個早晨。《爾雅》，對“年”的註解是：“夏曰歲，商曰祀，周曰年。”自殷商起，把月圓缺一次爲一月，初一爲朔，十五爲望。每年的開始從正月朔日子夜算起，叫“元旦”或“元日”。到了漢武帝時，由於“觀象授時”的經驗越來越豐富，司馬遷創造了《太初曆》，確定了正月爲歲首，正月初一爲新年。此後，農曆年的習俗就一直流傳下來。</p>
<p>據《詩經》記載，每到農曆新年，農民喝“春酒”，祝“改歲”，盡情歡樂，慶祝一年的豐收。到了晉朝，還增添了放爆竹的節目，即燃起堆堆烈火，將竹子放在火裏燒，發出噼噼啪啪的爆竹聲，使節日氣氛更濃。到了清朝，放爆竹，張燈結綵，送舊迎新的活動更加熱鬧了。清代潘榮升《帝京歲時記勝》中記載：“除夕之次，夜子初交，門外寶炬爭輝，玉珂競響。……聞爆竹聲如擊浪轟雷，遍於朝野，徹夜無停。”</p>
<p>在我國古代的不同歷史時期，春節，有着不同的含義。在漢代，人們把二十四節氣中的“立春”這一天定爲春節。南北朝時，人們則將整個春季稱爲春節。1911年，辛亥革命推翻了清朝統治，爲了“行夏曆，所以順農時，從西曆，所以便統計”，各省都督府代表在南京召開會議，決定使用公曆。這樣就把農曆正月初一定爲春節。至今，人們仍沿用春節這一習慣稱呼。</p>
</body>
</html>
<html>
<head>
<title>八仙</title>
<style type="text/css">
<!--
body{
background-color:#d8c7b4; /* 頁面背景色 */
}
p{
font-size:13px; /* 段落文字大小 */
}
p.title1{ /* 左側標題 */
text-decoration:underline; /* 下劃線 */
font-size:18px;
font-weight:bold; /* 粗體*/
text-align:left; /* 左對齊 */
color:#59340a; /* 標題顏色 */
}
p.title2{ /* 右側標題 */
text-decoration:underline;
font-size:18px;
font-weight:bold;
text-align:right;
color:#59340a;
}
p.content{ /* 正文內容 */
line-height:1.2em; /* 正文行間距 */
margin:0px;
}
img{
border:1px solid #664a2c; /* 圖片邊框 */
}
img.pic1{
float:left; /* 左側圖片混排 */
margin-right:10px; /* 圖片右端與文字的距離 */
margin-bottom:5px;
}
img.pic2{
float:right; /* 右側圖片混排 */
margin-left:10px; /* 圖片左端與文字的距離 */
margin-bottom:5px;
}
span.first{ /* 首字放大 */
font-size:60px;
font-family:黑體;
float:left;
font-weight:bold;
color:#59340a; /* 首字顏色 */
}
-->
</style>
</head>
<body>
<img src="baall.jpg" class="pic2">
<p><span class="first">八</span>仙在蓬萊閣上聚會飲酒，酒至酣時，鐵柺李提議乘興到海上一遊。衆仙齊聲附合，並言定各憑道法渡海，不得乘舟。
漢鍾離率先把大芭蕉扇往海里一扔，坦胸露腹仰躺在扇子上，向遠處漂去。何仙姑將荷花往水中一拋，頓時紅光萬道，何仙姑佇立荷花之上，隨波漂游。隨後，呂洞賓、張果老、曹國舅、鐵柺李、韓湘子、藍采和也紛紛將各自寶物拋人水中，藉助寶物大顯神通，傲遊東侮。</p>
<p class="title1">漢鍾離</p>
<img src="ba1.jpg" class="pic1">
<p class="content">元代全真教奉爲“正陽祖師”，北五祖之一。其說始於五代、宋初。相傳姓鍾離名權，號“正陽子”，又號“雲房先生”。《列仙全傳》說：鍾離權，燕臺人，號雲房先生，爲漢朝大將，在征討吐蕃中，被上司粱翼妒嫉，只配給他老弱殘兵三萬人，剛到達目的地就被吐蕃軍劫營，軍士落荒而逃。鍾離權也逃至一山谷，而且中途還迷路了。可是“吉人自有天相”，遇上一胡僧，將他帶至一小村莊說：“這是東華先生的住處。”然後告別而去。過了一會兒，忽聽有人說：“這必定是那碧眼的胡人多嘴的緣故。”見一老人披着白色的鹿裘，扶着青色的藜杖，問鍾離漢道：“來者可是漢大將軍鍾離權 ? 爲什麼不來宿於山僧之所?”鍾離權大驚，知道遇上了異人，於是誠心學道，向老者哀求學習救世之道。老者傳授鍾離權“長真決”，及金丹火候和青龍劍法。鍾離漢後來遇見華陽真人，又遇上仙王玄甫，學得“長生決”。最後在崆峒山紫金四皓峯居住，得到“玉匣祕訣”，修成真仙。玉皇大帝封他爲“太極左宮真人”。另一說鍾離漢爲唐朝人，與呂洞賓同時，自稱“天下都散漢鍾離權”，後人或以“漢”字屬下讀，故一稱“漢鍾離”。王重陽創立全真教，奉“鍾離漢”爲“正陽祖師”，位列北五祖之二（王玄甫，鍾離權，呂洞賓，劉操，王重陽）。</p>
<p class="title2">張果老</p>
<img src="ba2.jpg" class="pic2">
<p class="content">亦作張果。據《唐書》記載，確有其人，本是民間的江湖術士，因民間相傳逐爲神仙。居山西中條山，自言生於堯時，有長生不老之法。唐太宗，唐高宗（武則天的丈夫）不時徵召他，都被他婉拒了。武則天也召他出山，張果老就在廟前裝死，時值盛夏，不一會，他的身體腐爛發臭。武則天聽後，只好作罷。但不久就有人在恆山的山中再次見到他。有一次，唐玄宗去打獵，捕獲一頭大鹿，此鹿與尋常的鹿相比，稍有差異。廚師剛要開刀宰鹿，張果老看見了，就連忙阻止，說“這是仙鹿，已經有一千多歲了，當初漢武帝狩獵時，我曾跟隨其後，漢武帝雖然捕獲了此鹿，但後來把它放生了。”玄宗說：“天下之大，鹿多的是，時遷境異，你這麼知道他就是你說的那頭鹿呢 ? ”張果老說：“武帝放生時，用銅牌在它左角下做了標誌。”於是玄宗命人查檢。果然有一個二寸大小的銅牌，只是字跡已經模糊不清了。玄宗又問：“漢武帝狩獵是哪年 ? 到現在已經有多少年了 ? ”張果老說：“至今有八百五十二年了。”唐玄宗命人覈對，果然無誤。張果老回山後不久就仙逝了，唐玄宗爲他建“棲霞觀”。張果老有一怪癖，平日他倒騎着一頭白毛驢，日能行萬里，當然這驢子也是一匹“神驢”，據說不騎的時候，就可以把它摺疊起來，放在皮囊裏。</p>
<p class="title1">韓湘子</p>
<img src="ba3.jpg" class="pic1">
<p class="content">唐朝韓愈的侄孫子。生性放蕩不拘，不好讀書，只好飲酒，世傳其學道成仙，在二十歲時去洛下探親的時候，傾慕山川之趣而一去不返，二十多年音訊全無。在唐元和年間，忽然回到長安，衣衫破舊，行爲怪異，韓愈讓他入學校和學生們讀書，但韓湘子和學員討論時一言不發，只跟下人賭博，喝醉了就睡在馬房中睡三天五日，或露宿街頭，韓愈擔心不已，問他“人各有所長，就算小販也有一技之長，你如此胡鬧，將來能做什麼呢?”韓湘子說：“我也有一門技巧。只是你不知道。”韓愈問：“那你能做什麼?”當時正當初冬季節，令牡丹開花數色，又嘗令聚盆覆土，頃刻開花。韓湘子後傳說跟呂洞賓學道。位列仙班。</p>
<p class="title2">鐵柺李</p>
<img src="ba4.jpg" class="pic2">
<p class="content">八仙中，鐵柺李是年代最久，資歷最深者，見諸於文獻則較晚。亦作“李鐵柺”。元劇《呂洞賓度鐵柺李嶽》始有其名。身世由來傳說頗多，一說乃西王母點化成仙，封東華教主，授鐵杖一根。一說本名洪水，常行乞於市，爲人所賤，後以鐵杖擲空化爲飛龍，乘龍而去爲仙。一說姓李名玄，遇太上老君而得道。一日神遊華山赴太上老君之約，囑他的徒兒七日不返可化其身。然而徒兒因母親病而欲歸家，六日即化之。第七日李玄返魂無所歸，乃附在一跛腳的乞丐的屍體而起，蓬頭垢面，袒腹跛足，以水噴倚身的竹杖變爲鐵柺，故名李鐵柺。</p>
<p class="title1">曹國舅</p>
<img src="ba5.jpg" class="pic1">
<p class="content">相傳爲宋仁宗朝之大國舅，名佾，亦作景休。曹國舅的弟弟貪赴京應試秀才之妻的美色，絞死秀才，強佔其妻。秀才的冤魂向包拯申訴，包公准予查究。曹國舅告知其弟，務必將秀才的妻子置於死地，以絕後患。於是二國舅投秀才的妻子入井，被她逃脫，途遇曹國舅，誤以爲是包拯，向曹國舅申訴，曹國舅大驚，令手下用鐵鞭打死秀才的妻子，手下以爲她以死， 把她棄屍於偏僻的小巷。秀才的妻子醒了之後，向包公叫冤，包公問明真情後，就詐病，曹國舅來探望包拯。包拯令秀才的妻子出訴，逐將曹國舅監禁。又作假書將二國舅偏來開封府，令此女面訴冤情。又將二國舅枷入牢中。曹皇后和宋仁宗親自來勸包拯釋放她的兩個弟弟，包拯不從，命令將二國舅處決。宋仁宗大赦天下。包公纔將曹國舅放行。曹國舅獲釋後，入山修行從此遁跡山林，矢志修道學仙，有一天，鍾離權和呂洞賓問他說：“你所養的是什麼 ? ”曹國舅說：“我所養的是道。”仙人笑着問：“道在那裏呢?”曹國舅指着天說：“道在天。”仙人又問：“天在那兒 ? ”曹國舅指着心。鍾離權和呂洞賓滿意地說：“心即天，天即道，你已經洞悟道之真義了。”逐授以《還真祕旨》，令他精心修練，不多久，曹國舅就成仙了。</p>
<p class="title2">藍采和</p>
<img src="ba6.jpg" class="pic2">
<p class="content">唐開元天寶時人。夏服絮衫，冬臥冰雪，常於長安市唱踏踏歌，歌詞多神仙之意。有人孩童時見過他，及至年老再見，採和顏狀如故，後於酒樓乘醉騎鶴而去。元人以此逸事，撰雜劇漢鍾離度脫藍采和。《仙佛奇蹤》中：“藍采和，不知那裏人。經常穿着破爛的衣服，帶着六寸的腰帶，一隻腳穿靴，一隻腳赤足。夏天時在長衫內穿厚厚的內衣，冬天時躺在雪地中，呼出的氣彷如蒸氣一般。每次在大街中討飯，手持大拍版，長三尺餘。醉了就唱歌。老的小的都看他唱歌，唱時好像是發狂，但又不是。歌詞隨意而作，歌中充滿了仙意，而且變幻莫測。把得到的錢穿在繩子上，拖着走，就是掉了也不顧。有時贈與窮人家，有時花在酒肆中。周遊天下，有人在孩童時見過他，至老後再見着他，藍采和的容貌依舊。後來有人見他在壕樑酒樓上飲酒，聽見有笙蕭的聲音，忽然乘着鶴而飛上天空，拋下靴子，衣衫，腰帶，拍版，慢慢而升。元劇《鍾離權度藍采和》則說藍采和是藝名，真名叫許堅，在勾欄裏唱雜劇，年五十時，做壽因不知犯了什麼錯，爲官府扣打，後被鍾離權度化成仙。</p>
<p class="title1">何仙姑</p>
<img src="ba7.jpg" class="pic1">
<p class="content">其身世有多種說法。浙江，安徽，福建等地皆有本地之何仙姑。然多傳說爲何氏女，途遇仙人，賜仙桃或仙棗食之，成仙，不知飢餓。能預知禍福，善輕身飛行。一說乃呂洞賓弟子。《仙佛奇蹤》說：何仙姑爲廣州增城一位叫何泰的女兒。生時頭頂有六條頭髮。十六歲時夢見仙人教他：“吃雲母粉，可以輕身而且長生不死。”於是她照仙人的指示，吃雲母，發誓不嫁，經常來往山谷之中，健行如飛。每天的早上出去，晚上帶回一些山果給她的母親吃。後逐漸不吃五穀，武則天遣使召見她去宮中，在入京中的途中忽然失蹤。之後白日生仙。唐天寶九年，出現在麻姑壇中，站立在五朵雲中，其後，又出現在廣州的小石樓。宋曾敏行《獨醒雜誌》記載：“狄青早年在爭南儂時路過永州，聽說何仙姑能預知吉凶，便特地去詢問戰爭的結果，何仙姑說：“公不必見賊，賊敗且走。”開始狄青不信，後來宋軍先鋒與南儂智高的兵交戰，不機回合，智高戰敗並逃入大理國。何仙姑經常手持荷花。</p>
<p class="title2">呂洞賓</p>
<img src="ba8.jpg" class="pic2">
<p class="content">名巖，字洞賓，自號“純陽子”。唐京兆府（今陝西省長安縣）人。曾以進士授縣令。他的母親要生他的時候，屋裏異香撲鼻，空中仙樂陣陣，一隻白鶴自天而下，非如他母親的帳中就消失。生下呂洞賓果然氣度不凡，自小聰明過人，日記萬言，過目成誦，出口成章，長大後“身長八尺二寸，喜頂華陽巾，衣黃 杉，系一皁 ，狀類張子房，二十不娶。”當在襁褓時，馬祖見到就說：“此兒骨相不凡，自市風塵物處。他時遇盧則居，見鍾則扣，留心記取。”後來呂洞賓遊廬山，遇火龍真人，傳授天遁劍法。六十四歲時，遊長安，在酒肆遇見一位羽士青一白袍，在牆壁上題詩，呂洞賓見他狀貌奇古，詩意飄逸，問他姓名。羽士說：“我是雲房先生。居於終南山鶴嶺，你想跟我一起去嗎 ? ”呂洞賓凡心未已，沒有答應。這位雲房先生就是“鍾離權”。到了晚上，鍾離權和呂洞賓一同留宿在酒肆中。雲房先生獨自爲他做飯，這時呂洞賓睡着了，他夢見自己狀元及第，官場得意，子孫滿堂，極盡榮華。忽然獲重罪，家產被沒收，妻離子散，到老後瞭然一身，窮苦潦倒，獨自站在風雪中發抖，剛要嘆息，突然夢醒，鍾離權的飯還沒熟，於是鍾離權題詩一首“黃良猶未熟，一夢到華餚。”呂洞賓驚道：“難道先生知道我的夢 ? ”鍾離權道：“你剛纔的夢，生沉萬態，榮辱千端，五十歲如一剎那呀 ! 得到的不值得歡喜，失去的也不值得悲，人生就像一場夢。”於是呂洞賓下決心和鍾離權學道，並經“十試”的考驗，鍾離權授他道法。呂洞賓有了道術和天遁劍法，斬妖除害爲民造福。呂洞賓被全真教奉爲北方五祖之一（王玄甫，鍾離權，呂洞賓，劉操，王重陽），世稱呂祖、純陽祖師，呂洞賓在八仙中最爲出名，有關他的傳說很多。</p>
</body>
</html>
<head>
<title>八仙</title>
<style type="text/css">
<!--
body{
background-color:#d8c7b4; /* 頁面背景色 */
}
p{
font-size:13px; /* 段落文字大小 */
}
p.title1{ /* 左側標題 */
text-decoration:underline; /* 下劃線 */
font-size:18px;
font-weight:bold; /* 粗體*/
text-align:left; /* 左對齊 */
color:#59340a; /* 標題顏色 */
}
p.title2{ /* 右側標題 */
text-decoration:underline;
font-size:18px;
font-weight:bold;
text-align:right;
color:#59340a;
}
p.content{ /* 正文內容 */
line-height:1.2em; /* 正文行間距 */
margin:0px;
}
img{
border:1px solid #664a2c; /* 圖片邊框 */
}
img.pic1{
float:left; /* 左側圖片混排 */
margin-right:10px; /* 圖片右端與文字的距離 */
margin-bottom:5px;
}
img.pic2{
float:right; /* 右側圖片混排 */
margin-left:10px; /* 圖片左端與文字的距離 */
margin-bottom:5px;
}
span.first{ /* 首字放大 */
font-size:60px;
font-family:黑體;
float:left;
font-weight:bold;
color:#59340a; /* 首字顏色 */
}
-->
</style>
</head>
<body>
<img src="baall.jpg" class="pic2">
<p><span class="first">八</span>仙在蓬萊閣上聚會飲酒，酒至酣時，鐵柺李提議乘興到海上一遊。衆仙齊聲附合，並言定各憑道法渡海，不得乘舟。
漢鍾離率先把大芭蕉扇往海里一扔，坦胸露腹仰躺在扇子上，向遠處漂去。何仙姑將荷花往水中一拋，頓時紅光萬道，何仙姑佇立荷花之上，隨波漂游。隨後，呂洞賓、張果老、曹國舅、鐵柺李、韓湘子、藍采和也紛紛將各自寶物拋人水中，藉助寶物大顯神通，傲遊東侮。</p>
<p class="title1">漢鍾離</p>
<img src="ba1.jpg" class="pic1">
<p class="content">元代全真教奉爲“正陽祖師”，北五祖之一。其說始於五代、宋初。相傳姓鍾離名權，號“正陽子”，又號“雲房先生”。《列仙全傳》說：鍾離權，燕臺人，號雲房先生，爲漢朝大將，在征討吐蕃中，被上司粱翼妒嫉，只配給他老弱殘兵三萬人，剛到達目的地就被吐蕃軍劫營，軍士落荒而逃。鍾離權也逃至一山谷，而且中途還迷路了。可是“吉人自有天相”，遇上一胡僧，將他帶至一小村莊說：“這是東華先生的住處。”然後告別而去。過了一會兒，忽聽有人說：“這必定是那碧眼的胡人多嘴的緣故。”見一老人披着白色的鹿裘，扶着青色的藜杖，問鍾離漢道：“來者可是漢大將軍鍾離權 ? 爲什麼不來宿於山僧之所?”鍾離權大驚，知道遇上了異人，於是誠心學道，向老者哀求學習救世之道。老者傳授鍾離權“長真決”，及金丹火候和青龍劍法。鍾離漢後來遇見華陽真人，又遇上仙王玄甫，學得“長生決”。最後在崆峒山紫金四皓峯居住，得到“玉匣祕訣”，修成真仙。玉皇大帝封他爲“太極左宮真人”。另一說鍾離漢爲唐朝人，與呂洞賓同時，自稱“天下都散漢鍾離權”，後人或以“漢”字屬下讀，故一稱“漢鍾離”。王重陽創立全真教，奉“鍾離漢”爲“正陽祖師”，位列北五祖之二（王玄甫，鍾離權，呂洞賓，劉操，王重陽）。</p>
<p class="title2">張果老</p>
<img src="ba2.jpg" class="pic2">
<p class="content">亦作張果。據《唐書》記載，確有其人，本是民間的江湖術士，因民間相傳逐爲神仙。居山西中條山，自言生於堯時，有長生不老之法。唐太宗，唐高宗（武則天的丈夫）不時徵召他，都被他婉拒了。武則天也召他出山，張果老就在廟前裝死，時值盛夏，不一會，他的身體腐爛發臭。武則天聽後，只好作罷。但不久就有人在恆山的山中再次見到他。有一次，唐玄宗去打獵，捕獲一頭大鹿，此鹿與尋常的鹿相比，稍有差異。廚師剛要開刀宰鹿，張果老看見了，就連忙阻止，說“這是仙鹿，已經有一千多歲了，當初漢武帝狩獵時，我曾跟隨其後，漢武帝雖然捕獲了此鹿，但後來把它放生了。”玄宗說：“天下之大，鹿多的是，時遷境異，你這麼知道他就是你說的那頭鹿呢 ? ”張果老說：“武帝放生時，用銅牌在它左角下做了標誌。”於是玄宗命人查檢。果然有一個二寸大小的銅牌，只是字跡已經模糊不清了。玄宗又問：“漢武帝狩獵是哪年 ? 到現在已經有多少年了 ? ”張果老說：“至今有八百五十二年了。”唐玄宗命人覈對，果然無誤。張果老回山後不久就仙逝了，唐玄宗爲他建“棲霞觀”。張果老有一怪癖，平日他倒騎着一頭白毛驢，日能行萬里，當然這驢子也是一匹“神驢”，據說不騎的時候，就可以把它摺疊起來，放在皮囊裏。</p>
<p class="title1">韓湘子</p>
<img src="ba3.jpg" class="pic1">
<p class="content">唐朝韓愈的侄孫子。生性放蕩不拘，不好讀書，只好飲酒，世傳其學道成仙，在二十歲時去洛下探親的時候，傾慕山川之趣而一去不返，二十多年音訊全無。在唐元和年間，忽然回到長安，衣衫破舊，行爲怪異，韓愈讓他入學校和學生們讀書，但韓湘子和學員討論時一言不發，只跟下人賭博，喝醉了就睡在馬房中睡三天五日，或露宿街頭，韓愈擔心不已，問他“人各有所長，就算小販也有一技之長，你如此胡鬧，將來能做什麼呢?”韓湘子說：“我也有一門技巧。只是你不知道。”韓愈問：“那你能做什麼?”當時正當初冬季節，令牡丹開花數色，又嘗令聚盆覆土，頃刻開花。韓湘子後傳說跟呂洞賓學道。位列仙班。</p>
<p class="title2">鐵柺李</p>
<img src="ba4.jpg" class="pic2">
<p class="content">八仙中，鐵柺李是年代最久，資歷最深者，見諸於文獻則較晚。亦作“李鐵柺”。元劇《呂洞賓度鐵柺李嶽》始有其名。身世由來傳說頗多，一說乃西王母點化成仙，封東華教主，授鐵杖一根。一說本名洪水，常行乞於市，爲人所賤，後以鐵杖擲空化爲飛龍，乘龍而去爲仙。一說姓李名玄，遇太上老君而得道。一日神遊華山赴太上老君之約，囑他的徒兒七日不返可化其身。然而徒兒因母親病而欲歸家，六日即化之。第七日李玄返魂無所歸，乃附在一跛腳的乞丐的屍體而起，蓬頭垢面，袒腹跛足，以水噴倚身的竹杖變爲鐵柺，故名李鐵柺。</p>
<p class="title1">曹國舅</p>
<img src="ba5.jpg" class="pic1">
<p class="content">相傳爲宋仁宗朝之大國舅，名佾，亦作景休。曹國舅的弟弟貪赴京應試秀才之妻的美色，絞死秀才，強佔其妻。秀才的冤魂向包拯申訴，包公准予查究。曹國舅告知其弟，務必將秀才的妻子置於死地，以絕後患。於是二國舅投秀才的妻子入井，被她逃脫，途遇曹國舅，誤以爲是包拯，向曹國舅申訴，曹國舅大驚，令手下用鐵鞭打死秀才的妻子，手下以爲她以死， 把她棄屍於偏僻的小巷。秀才的妻子醒了之後，向包公叫冤，包公問明真情後，就詐病，曹國舅來探望包拯。包拯令秀才的妻子出訴，逐將曹國舅監禁。又作假書將二國舅偏來開封府，令此女面訴冤情。又將二國舅枷入牢中。曹皇后和宋仁宗親自來勸包拯釋放她的兩個弟弟，包拯不從，命令將二國舅處決。宋仁宗大赦天下。包公纔將曹國舅放行。曹國舅獲釋後，入山修行從此遁跡山林，矢志修道學仙，有一天，鍾離權和呂洞賓問他說：“你所養的是什麼 ? ”曹國舅說：“我所養的是道。”仙人笑着問：“道在那裏呢?”曹國舅指着天說：“道在天。”仙人又問：“天在那兒 ? ”曹國舅指着心。鍾離權和呂洞賓滿意地說：“心即天，天即道，你已經洞悟道之真義了。”逐授以《還真祕旨》，令他精心修練，不多久，曹國舅就成仙了。</p>
<p class="title2">藍采和</p>
<img src="ba6.jpg" class="pic2">
<p class="content">唐開元天寶時人。夏服絮衫，冬臥冰雪，常於長安市唱踏踏歌，歌詞多神仙之意。有人孩童時見過他，及至年老再見，採和顏狀如故，後於酒樓乘醉騎鶴而去。元人以此逸事，撰雜劇漢鍾離度脫藍采和。《仙佛奇蹤》中：“藍采和，不知那裏人。經常穿着破爛的衣服，帶着六寸的腰帶，一隻腳穿靴，一隻腳赤足。夏天時在長衫內穿厚厚的內衣，冬天時躺在雪地中，呼出的氣彷如蒸氣一般。每次在大街中討飯，手持大拍版，長三尺餘。醉了就唱歌。老的小的都看他唱歌，唱時好像是發狂，但又不是。歌詞隨意而作，歌中充滿了仙意，而且變幻莫測。把得到的錢穿在繩子上，拖着走，就是掉了也不顧。有時贈與窮人家，有時花在酒肆中。周遊天下，有人在孩童時見過他，至老後再見着他，藍采和的容貌依舊。後來有人見他在壕樑酒樓上飲酒，聽見有笙蕭的聲音，忽然乘着鶴而飛上天空，拋下靴子，衣衫，腰帶，拍版，慢慢而升。元劇《鍾離權度藍采和》則說藍采和是藝名，真名叫許堅，在勾欄裏唱雜劇，年五十時，做壽因不知犯了什麼錯，爲官府扣打，後被鍾離權度化成仙。</p>
<p class="title1">何仙姑</p>
<img src="ba7.jpg" class="pic1">
<p class="content">其身世有多種說法。浙江，安徽，福建等地皆有本地之何仙姑。然多傳說爲何氏女，途遇仙人，賜仙桃或仙棗食之，成仙，不知飢餓。能預知禍福，善輕身飛行。一說乃呂洞賓弟子。《仙佛奇蹤》說：何仙姑爲廣州增城一位叫何泰的女兒。生時頭頂有六條頭髮。十六歲時夢見仙人教他：“吃雲母粉，可以輕身而且長生不死。”於是她照仙人的指示，吃雲母，發誓不嫁，經常來往山谷之中，健行如飛。每天的早上出去，晚上帶回一些山果給她的母親吃。後逐漸不吃五穀，武則天遣使召見她去宮中，在入京中的途中忽然失蹤。之後白日生仙。唐天寶九年，出現在麻姑壇中，站立在五朵雲中，其後，又出現在廣州的小石樓。宋曾敏行《獨醒雜誌》記載：“狄青早年在爭南儂時路過永州，聽說何仙姑能預知吉凶，便特地去詢問戰爭的結果，何仙姑說：“公不必見賊，賊敗且走。”開始狄青不信，後來宋軍先鋒與南儂智高的兵交戰，不機回合，智高戰敗並逃入大理國。何仙姑經常手持荷花。</p>
<p class="title2">呂洞賓</p>
<img src="ba8.jpg" class="pic2">
<p class="content">名巖，字洞賓，自號“純陽子”。唐京兆府（今陝西省長安縣）人。曾以進士授縣令。他的母親要生他的時候，屋裏異香撲鼻，空中仙樂陣陣，一隻白鶴自天而下，非如他母親的帳中就消失。生下呂洞賓果然氣度不凡，自小聰明過人，日記萬言，過目成誦，出口成章，長大後“身長八尺二寸，喜頂華陽巾，衣黃 杉，系一皁 ，狀類張子房，二十不娶。”當在襁褓時，馬祖見到就說：“此兒骨相不凡，自市風塵物處。他時遇盧則居，見鍾則扣，留心記取。”後來呂洞賓遊廬山，遇火龍真人，傳授天遁劍法。六十四歲時，遊長安，在酒肆遇見一位羽士青一白袍，在牆壁上題詩，呂洞賓見他狀貌奇古，詩意飄逸，問他姓名。羽士說：“我是雲房先生。居於終南山鶴嶺，你想跟我一起去嗎 ? ”呂洞賓凡心未已，沒有答應。這位雲房先生就是“鍾離權”。到了晚上，鍾離權和呂洞賓一同留宿在酒肆中。雲房先生獨自爲他做飯，這時呂洞賓睡着了，他夢見自己狀元及第，官場得意，子孫滿堂，極盡榮華。忽然獲重罪，家產被沒收，妻離子散，到老後瞭然一身，窮苦潦倒，獨自站在風雪中發抖，剛要嘆息，突然夢醒，鍾離權的飯還沒熟，於是鍾離權題詩一首“黃良猶未熟，一夢到華餚。”呂洞賓驚道：“難道先生知道我的夢 ? ”鍾離權道：“你剛纔的夢，生沉萬態，榮辱千端，五十歲如一剎那呀 ! 得到的不值得歡喜，失去的也不值得悲，人生就像一場夢。”於是呂洞賓下決心和鍾離權學道，並經“十試”的考驗，鍾離權授他道法。呂洞賓有了道術和天遁劍法，斬妖除害爲民造福。呂洞賓被全真教奉爲北方五祖之一（王玄甫，鍾離權，呂洞賓，劉操，王重陽），世稱呂祖、純陽祖師，呂洞賓在八仙中最爲出名，有關他的傳說很多。</p>
</body>
</html>
來源：《精通CSS+DIV網頁樣式與佈局》