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>
4-2.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>
4-3.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>
4-4.html
<html>
<head>
<title>图片缩放</title>
<style>
<!--
img.test1{
  width:50%;    /* 相对宽度 */
}
-->
</style>
     </head>
<body>
  <img src="pear.jpg" class="test1">
</body>
</html>
4-5.html
<html>
<head>
<title>不等比例缩放</title>
<style>
<!--
img.test1{
  width:70%;    /* 相对宽度 */
  height:110px;  /* 绝对高度 */
}
-->
</style>
     </head>
<body>
  <img src="cup.jpg" class="test1">
</body>
</html>
4-6.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>
4-7.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>
4-8.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>
4-9.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>
4-10.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>

来源：《精通CSS+DIV网页样式与布局 》