16.css
body{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
  text-align: center;       /* 居中且宽度固定的版式，参考11.2节 */
  background-color: #000000;
}
#container{
  position: relative;
  margin: 1px auto 0px auto;
  width: 760px;
  text-align: left;
  background-color: #FFFFFF;
  border-left: 1px dashed #AAAAAA;     /* 添加虚线框 */
  border-right: 1px dashed #AAAAAA;
  border-bottom: 1px dashed #AAAAAA;
}
#globallink{
  width: 760px; height: 163px;   /* 设置块的尺寸，高度大于banner图片 */
  margin: 0px; padding: 0px;
  /* 再设置背景颜色，作为导航菜单的背景色 */
  background: #daeeff url(banner.jpg) no-repeat top;
  font-size: 12px;
}
#globallink ul{
        list-style-type: none;
  position: absolute;       /* 绝对定位 */
  width: 417px;
  left: 400px; top: 145px;     /* 具体位置 */
  padding: 0px; margin: 0px;
}
#globallink li{
  float: left;
  text-align: center;
  padding: 0px 6px 0px 6px;  /* 链接之间的距离 */
}
#globallink a:link, #globallink a:visited{
  color: #004a87;
  text-decoration: none;
}
#globallink a:hover{
  color: #FFFFFF;
  text-decoration: underline;
}

#parameter{
  position: relative;
  float: left;
  width: 210px;
  padding: 0px;
  margin: 0px;
}
#parameter div#author{
  text-align: center;
  background: url(mypic_bg.gif) no-repeat;     /* 设置一个背景图片 */
  margin-top: 5px;
}
div#author p{
  margin: 0px 10px 0px 10px;
  padding: 3px 0px 3px 0px;
  border-bottom: 1px dashed #999999;
  border-top: 1px dashed #999999;
}
div#author p.mypic{
  border: none;
  padding: 15px 0px 0px 0px;
  margin: 0px 0px 8px 0px;
}
div#author p.mypic img{
  border: 1px solid #444444;
  padding: 2px; margin: 0px;
}
#parameter div{
  clear: both;
  margin-top: 25px;
  position: relative;
}
#parameter div h4{           /* 统一设置 */
  background: url(leftbg.jpg) no-repeat;
  font-size: 12px;
  padding: 6px 0px 5px 27px;
  margin: 0px;
}
#parameter div ul{
  list-style: none;
  margin: 5px 15px 0px 15px;
  padding: 0px;
}
#parameter div ul li{
  padding: 2px 3px 2px 15px;
  background: url(icon1.gif) no-repeat 8px 7px;
  border-bottom: 1px dashed #999999;    /* 虚线作为下划线 */
}
#parameter br{
  display: none;
}
#parameter div ul li a:link, #parameter div ul li a:visited{
  color: #000000;
  text-decoration: none;
}
#parameter div ul li a:hover{
  color: #008cff;
  text-decoration: underline;
}
div#llinks ul{     /* 单独设置该项目列表 */
  list-style: none;
  padding: 0px;
  margin: 5px 5px 0px 25px;
}
div#llinks ul li{
  float: left;     /* 显示为同一行 */
  width: 80px;     /* 指定每一项的宽度 */
  background: none;
  padding: 0px;
  border: none;
}
div#lcategory{
  position: relative;
  top: 10px;
  margin-bottom: 35px;
}

#main{
  float: left;
  position: relative;
  font-size: 12px;
  margin: 0px 20px 5px 20px;
  width: 510px;
}
#main div{
  position: relative;
  margin: 20px 0px 30px 0px;
}
#main div h3{
  font-size: 15px;
  margin: 0px;
  padding: 0px 0px 3px 0px;
  border-bottom: 1px dotted #999999;      /* 下划淡色虚线 */
}
#main div h3 a:link, #main div h3 a:visited{
  color: #662900;
  text-decoration: none;
}
#main div h3 a:hover{
  color: #0072ff;
}
#main p.author{
  margin: 0px;
  text-align: right;
  color: #888888;
  padding: 2px 5px 2px 0px;
}
#main p.content{
  margin: 0px;
  padding: 10px 0px 10px 0px;
}
#footer{
  clear: both;       /* 消除float的影响，排版相关的章节已经大量涉及 */
  text-align: center;
  background-color: #daeeff;
  margin: 0px; padding: 0px;
  color: #004a87;
}
#footer p{
  margin: 0px; padding: 2px;
}
16.html
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title >我的博客 </title>
< link href ="16.css" type ="text/css" rel ="stylesheet" >
     </head>
< body >
< div id ="container" >
   < div id ="globallink" >
     < ul >
       < 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>
       < li > < a href ="#" >给我留言 </a> </li>
     </ul>
     < br >
   </div>
   < div id ="parameter" >
     < div id ="author" >
       < p class ="mypic" > < img src ="mypic.jpg" > </p>
       < p >艾萨克的BLOG </p>
     </div>
     < div id ="llinks" >
       < h4 class ="links" > < span >活力地带 </span> </h4>
       < ul >
         < li > < img src ="1.gif" > < a href ="#" >个人首页 </a> </li>
         < li > < img src ="3.gif" > < a href ="#" >控制面板 </a> </li>
         < li > < img src ="4.gif" > < a href ="#" >我的文章 </a> </li>
         < li > < img src ="5.gif" > < a href ="#" >我的相册 </a> </li>
         < li > < img src ="6.gif" > < a href ="#" >我的圈子 </a> </li>
         < li > < img src ="2.gif" > < a href ="#" >给我留言 </a> </li>
       </ul>
       < br >
     </div>
     < div id ="lcategory" >
       < h4 class ="category" > < span >我的文章分类 </span> </h4>
       < ul >
         < li > < a href ="#" >个人随笔 </a> </li>
         < li > < a href ="#" >美术设计 </a> </li>
         < li > < a href ="#" >CSS样式风格 </a> </li>
         < li > < a href ="#" >Ajax学习心得 </a> </li>
         < li > < a href ="#" >新疆甘肃游记 </a> </li>
         < li > < a href ="#" >学生节 </a> </li>
         < li > < a href ="#" >职业生涯 </a> </li>
       </ul>
       < br >
     </div>
     < div id ="llatest" >
       < h4 class ="latest" > < span >最新文章列表 </span> </h4>
       < ul >
         < li > < a href ="#" >学生节(6)_释放天性 </a> </li>
         < li > < a href ="#" >学生节(5)_beep的越洋电话 </a> </li>
         < li > < a href ="#" >学生节(4)_主持人选拔 </a> </li>
         < li > < a href ="#" >学生节(3)_十届的电子人 </a> </li>
         < li > < a href ="#" >学生节(2)_5秒定律永不倒 </a> </li>
         < li > < a href ="#" >学生节(1)_综述 </a> </li>
         < li > < a href ="#" >吃住在新疆 </a> </li>
         < li > < a href ="#" >Ajax实现可拖动的页面 </a> </li>
         < li > < a href ="#" >巧学巧用Flash </a> </li>
       </ul>
       < br >
     </div>
     < div id ="lcomment" >
       < h4 class ="comment" > < span >最新评论 </span> </h4>
       < ul >
         < li > < a href ="#" >[isaac] 关于beep的话题 </a> </li>
         < li > < a href ="#" >[tastestory] 哈哈 </a> </li>
         < li > < a href ="#" >[moonbow] 还是露天，真的吗？ </li>
         < li > < a href ="#" >[isaac] zan :) </a> </li>
         < li > < a href ="#" >[bingri] 来总导这里挖坑~~ </a> </li>
         < li > < a href ="#" >[inming] 博士加油 </a> </li>
       </ul>
       < br >
     </div>
     < div id ="lfriend" >
       < h4 class ="friend" > < span >友情链接 </span> </h4>
       < ul >
         < 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>
         < li > < a href ="#" >下一站 </a> </li>
       </ul>
       < br >
     </div>
   </div>
   < div id ="main" >
     < div class ="article" >
       < h3 > < a href ="#" >学生节(6)_释放天性 </a> </h3>
       < p class ="author" >isaac @ 2006-12-20 16:54:07 </p>
       < p class ="content" >
释放天性是一件很有意思的事情，也是电子系节目本身能够nb的很重要原因。主持人、各个节目都要求演员释放天性，下面是一些筹备组常用的手段 :) < br >
< br >
1. 一个人在阳台对着外面大声喊“爸爸妈妈我爱你们”等等，演员一般到最后就会喊一些自己的东西了 :) < br >
2. 男女主角相隔50米，在人多的地方大声呼喊“你能听见吗”“听见了吗？”“我爱你” < br >
3. 还是露天，男女主角站在一个小圈子里面，对视3分钟。然后互相说50遍“我爱你” < br >
4. 男1号跟男2号拥抱在一起说台词，直到想吐都吐不出（《包青天》里面ws和wc据说就在小树林抱了好几个晚上...上台的表演彻底放开了） < br >
5. 每天晚上11点后露天排练，放开声音 < br >
…… < br >
< br >
每次学生节，导演组的导演们都要求入选的各个剧组进行这方面的强化训练，为的就是在台上能更好的表现自己，入戏。这些训练事后的影响自然也是多方面的 :) < br >
< br >
1. 很多演员学生节以后性格更开朗了，参加各种面试更加放得开了 < br >
2. 男生越来越ws了..... 胆子越来越大 < br >
3. 女生嘛，更加活泼了，朋友圈子扩大了 < br >
4. 很多男女主角真的成了一对，娃哈哈~~~ < br >
…… < br >
< br >
释放天性，魅力无穷!!
       </p>
       < p class ="show" >浏览[1051] | 评论[5] </p>
     </div>
     < div class ="article" >
       < h3 > < a href ="#" >学生节(5)_beep的越洋电话 </a> </h3>
       < p class ="author" >isaac @ 2006-12-14 10:48:16 </p>
       < p class ="content" >
12月7日下午，我正在后台跟主持人们闲聊的时候，接到了来自美国伯克利的电话。beep，8字班师兄，胖乎乎圆溜溜的，当年的山西高考状元，考前一个礼拜从零开始学习就拿到微所NO.1，中文名字看上去跟linear是两口子，硕士阶段修完了所有社会学课程去了伯克利读社会学，自由空间前任站长，站规的起草者，电子系nb的学生节创始人之一，在今年学生节开始前从遥远的大洋彼岸给我送来了第一时间的祝福。 < br >
< br >
电话的信号并不是特别清晰，但他雌性的声音很快穿透了整个后台 :) “哎呀呀，你们今年真是辛苦啊，我看不到啦...”，我也嘻嘻笑笑的跟他扯皮了一阵，当时的确让我很惊喜。想想电子的学生节能走到今天，linear和beep应该算头功，当年《一起走到》就是他们首先以非学生会的身份介入的，元老级人物啊。 < br >
< br >
现在仔细想想，筹备组这票人还真是个个nb啊，学生节作为业余爱好，平时都忙着各自的学习、事业、生活，每年到这个时候大家都聚到一起，为了这温暖、忙碌的舞台而奋斗。或许就像reconzansp说的，电子学生节nb这么多年了，平时自己都在外面忙碌，每到这个时候，就是希望跟大伙见见，聊聊天，所以一块努力做好这台晚会。 < br >
< br >
也许将来，当我作为观众在台下，看着周围一个个熟悉而又渐渐苍老的面孔，兴奋、喜悦、怀念......
       </p>
       < p class ="show" >浏览[750] | 评论[2] </p>
     </div>
     < div class ="article" >
       < h3 > < a href ="#" >学生节(4)_主持人选拔 </a> </h3>
       < p class ="author" >isaac @ 2006-12-12 02:03:12 </p>
       < p class ="content" >
今年主持人上面，筹备组第一次采用了大规模的全系海选，报名的人数多达50+，远远超出了我们的估计。因此在一审的第二天，我们安排了整整一天的时间进行评选，每人10分钟左右。事实证明，这样的选拔是正确的，应该继续发扬下去。 < br >
< br >
首先从海选主持的第一题，我们收集到了很多观众对于电子学生节的反馈。其次从报名表上参选者的个人信息，我们了解到了很多电子的相关人才，太牛了，电子系真的人才辈出，这话一点都不假。再次通过选拔主持人，相当于让更多观众提前参与到学生节中，同时在系里渲染了学生节的氛围。 < br >
< br >
我记得当时讨论的时候，我们首先一致咬定今年用4位，在具体人选上则产生了较大的分歧，经过大家1个多小时的投票、辩论、再投票、再辩论，最终才确定下来。shanghen、venessawj、winidea、clshlmch在跟我和ttt单独面谈后最终成为了今年的主持。然后就是设计各个主持段子，主要思路就是绝对不能报幕，必须融入到节目中。4个人很容易做简单的小话剧，ttt挑起了文案组的大梁，加上AR的全心投入，今年的主持得到了观众的认可，至少目前我看到的网上评论是这样的，不光是stage和特快上的，一些班板，就是那些网友认为大多数人不会关心，可以畅所欲言的版面也有类似的赞扬~~，让我很欣慰，估计ttt比我更乐，呵呵。 < br >
< br >
在今年的主持段子中，我个人很喜欢蒲公英前面... < br >
......
       </p>
       < p class ="show" >浏览[879] | 评论[0] </p>
     </div>
     < div class ="article" >
       < h3 > < a href ="#" >学生节(3)_十届电子人 </a> </h3>
       < p class ="author" >isaac @ 2006-11-26 02:21:56 </p>
       < p class ="content" >
今天三审，偶然听ss数了一下在场的评委，一共有十届的人。筹备组的电子系从7字班到现在的6字班都有人，真是壮观又令人感慨。 < br >
< br >
7字班：qiangwei < br >
8字班：ss、linear... < br >
9字班：ArthurRivers、MeggieRivers... < br >
0字班：fudinan、reconzansp... < br >
1字班：isaac、whaler... < br >
2字班：girlwing、warmer、tuonene... < br >
3字班：主席、tritri... < br >
4字班：shanghen、venessawj、文艺部无数小弟... < br >
5字班：文艺部无数小弟、liwei... < br >
6字班：liyao < br >
< br >
目前时间非常的紧，真不知道这种电子的文化能否代代相传。
       </p>
       < p class ="show" >浏览[1073] | 评论[4] </p>
     </div>
   </div>
   < div id ="footer" >
     < p >更新时间: 2007-06-24 23:17:07 ©All Rights Reserved </p>
   </div>
</div>
</body>
</html>

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