1. 相对长度主要分为三种：
此页面主要内容设置边距，页面的上面和左边是默认留有边距的，当我们不需要间距的时候可以使用margin 0px 0px; 表示上下相对长度0px，左右0px;
相对长度单位有 ：（1）px-表示像素，屏幕分辨率越大，相同像素的网页元素就越小。
(2)%-以父元素的百分比来定义当前文字或其他网页元素的大小，如果没有设定父元素的大小，则相对于浏览器默认字体大小的百分比，一般情况下，浏览器默认字体为16px;
(3)em-表示以父元素字体大小的倍数来定义字体大小；若父元素字体大小为12px，则1em就表示12px,2em就表示12*2为24px。
参考代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ background-color:#cccccc; margin:0px 30px; font-size:18px;}
h1{ font-family: "黑体"; font-weight:bolder; color: #FFFFFF; letter-spacing:1em; background-color:#ff0000; padding:10px;}
h3{ font-weight:bolder; color:#FF0000;}
h4{ text-align:right; color: #FFFFFF; font-family: "华文新魏"; font-style:oblique;}
.zw{ font-family:"宋体";}
</style>
</head>
<body>
<h1>日志</h1>
<hr />
<h4>分类:心情点滴 </h4>
<h3>女性的魅力 </h3>
<p class="zw">摘要：魅力女性是美丽的.她使世界变得温馨,使世界永远保持青春和活力,使世界永远充满迷人和浪漫。魅力是什么?字典上的解释是，能吸引人的力量.常听有人这么评价某个女人：她不漂亮，可她很有魅力.魅力是一种深层次的美，比一切外在的美都更富有生命力，让人一见难以忘怀....... 查看全文 </p>
<p>2007.3.8 13:27 作者：诗香雅韵 引用:6 | 收藏 | 评论：56 </p>
<h4>分类:情感驿站 </h4>
<h3>情感解析：写给三十左右男人的一些密语 </h3>
<p class="zw">摘要：一、不放弃理想，不放弃梦想。有梦的生活，才会有颜色；二、有一套顶级的西服，或者一只经典的手表，或者有一个奢华的打火机，或者。总之，有一个可以传给自己孩子的并值得讲述历史的东西；三、重新甄选自己的朋友。留一两个知己，用一生去维护;四、三十岁。知道很多的细节。包括穿西服的时候... 查看全文 </p>
<p class="zw">2011.11.9 00:17 作者：诗香雅韵 引用:0 | 收藏 | 评论：1 </p>
<h4>分类:精品赏析 </h4>
<h3>美丽如画!世界海洋摄影佳作揭晓(组图) </h3>
<p class="zw">摘要：据国外媒体报道，近日世界优秀海洋摄影照片揭晓，从中我们可以欣赏到美丽的海洋景色、认识许多奇特的海洋生物，此外摄影师精湛的摄影技术也令人赞叹。以下就是2010年海洋摄影优秀作品。摄影师评价：“在晚上，小巴哈马海岸的斑点海豚会潜入深海寻找乌贼... </p>
<p class="zw">查看全文
2011.10.28 23:53 作者：诗香雅韵 引用:1 | 收藏 | 评论：1 </p>
</body>
</html>
2. 个人博客子页
参考代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ background-color:#cccccc; font-size: 12px; margin: 0px 20px;}
h1{ font-family:"黑体"; font-weight:bolder; color:#FFFFFF; letter-spacing:1em; background-color:#FF0000; padding:10px;}
h2{ font-family:"黑体"; text-align:center; color:#FF0000; font-weight:bolder; text-decoration:underline;}
p{ text-indent:2em; line-height:3em;}
#cap{ text-transform:capitalize; color:#996600;}
#right{ text-align: right;}
</style>
</head>
<body>
<h1>日志</h1>
<hr />
<h2>《十面埋伏》：一部青春与成长的备忘录</h2>
<p> 路 晴</p>
<p>一位颇具才情的青年诗人与中学女生段美丽倾心相爱，但由于双方的特殊身份，这段不无病态的爱情不得不面对现实的严厉拷问——它遭到了来自女方父母的反对，在一次阴差阳错的病态“约会”后，女方父亲对男主人公作出了控告，于是浪漫的爱情突然置入严峻的考验之中。</p>
<p>西风烈精品书系最新推出的长篇小说《十面埋伏》，讲述了一个匪夷所思的爱情故事。</p>
<p>没有三角或多角的复杂关系，没有台前幕后、斗智斗勇的激烈角逐，没有刀光剑影、充满动感的宏大场面，只有爱和被爱，然后被考验和确证。初看也许并无新奇之处，展读之下却每每摇动了人的心旌，原因何在？我想最根本的一条是真——真是这部长篇留给我的一个突出印象。真的人物，真的青春，真的爱，真的困难，真的人物境遇，真的炼狱之火的烧烤。唯其日常，更见真实，唯其真实，决不夸张和故作姿态，保证了艺术的节制，平常的生活便获得了动人心魄的艺术力量。在这里，青春美丽而危险，激情与焦虎并存，信心十足而又四顾茫然；爱情美丽却又充满困难和变数，在爱情看上去无比甘美的浆果之下所潜藏的困难和风险，远远超出了他们的预料也远非他们所能承受，以至于在不经意间改写了两位主人公的命运。小说摆脱了一般青春成长小说以展示隐私为旨趣的现成套路，以怀旧的笔调和克制的笔墨，在监狱日常生活的苍凉背景上，镂刻出一对青年男女出生入死、至死不渝的凄美恋情，绘制出一幅浓墨重彩的青春与成长的都市生活长卷，表达出对性与爱、生命与自由、个人与时代的复杂感受与深邃思考，其间充满了过目不忘的精彩细节</p>
<p id="cap">West wind fine book series latest novel, "House of Flying Daggers", the story of a bizarre love story.</p>
<p id="right">阅读(46)| 评论(10)| 引用 (0) |举报</p>
</body>
</html>
3. 个人博客排行榜---着重列表的修饰
代码推荐：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>list</title>
<style type="text/css">
body{ background-color:#0000FF;}
h3,ul{ padding: 0px; margin:0px;}
#div1{ width:400px; background-color:#FF0000; font-size:12px; padding:10px;}
# div1 ul{ padding:0px; margin:0px; list-style-position:inside;}
#div1 li{ margin:5px 15px;}
#div1 span{ color:#999999; margin-left:20px;}
#div2{ width:400px; background-color:#FFFF00; font-size:12px; padding: 10px; margin-top:20px;}
#div2 ul{ list-style-type:none; list-style-image:url(icon1.gif); list-style-position:inside;}
#div2 li{ margin:12px 0px; border-bottom: 1px dashed #666666;}
</style>
</head>
<body>
<div id="div1">
<h1>个人博客排行榜</h1>
<hr />
<ul>
<li>女大学生应聘宅男私家女仆的背后很可怕<span>2011-12-21</span></li>
<li>丢了公职也无所谓,是喊给谁听的？<span>2011-12-21</span> </li>
<li>解开富豪代孕8胞胎的“三大谜”？ <span>2011-12-21</span> </li>
<li>留守妇女为赚零花钱廉价卖身暴露啥? <span>2011-12-21</span> </li>
<li>扶正传言何以让“副处”敛财更疯狂？<span>2011-12-21</span> </li>
<li>富豪“八胞胎”奇迹的背后实是利益链怪胎<span>2011-12-21</span> </li>
<li>成多余的人了？拆迁就是把老人送桥洞送终<span>2011-12-21</span> </li>
<li>一秒钟变残疾的乞丐伤了谁的善心？<span>2011-12-21</span> </li>
<li>23岁女白领之死是一种社会的警醒！<span>2011-12-21</span> </li>
<li>再胡说就扣你们低保，低保成了官员打压工具？<span>2011-12-21</span> </li>
</ul>
</div>
<div id="div2">
<h3>精华区 </h3>
<hr />
<ul>
<li>气候变暖 北极熊残杀幼子 </li>
<li>植物人听唤“三缺一”苏醒 </li>
<li>时光机烟草专家当选院士是不是科学界耻辱 </li>
<li>醉酒押运员抢市民香烟 </li>
<li>Green追逐那十年最美的红月亮 </li>
<li>你了解自己的阴历生日吗？ </li>
</ul>
</div>
</body>
</html>
