第一节 分栏优点
信息量大、一览无余、醒目简洁、排布整齐、自动加载、容易检索、突显个性、千变万化。
第二节 分栏原理
博客中国的博客网页有三种类型：首页，索引页，单页。首页当然只有一个；索引页有若干，每年一页；单页有很多，有一篇日志就有一页。
由于博客网页的单篇日志可以置顶，且单篇日志对使用JavaScript语言不受限，所以可以在单篇日志中使用高级设置，并在首页CSS中定义栏目条框，最后置顶到博客首页上去，完成分栏。
第三节 分栏类型
博客分栏有四种类型：1、自动简式，2、自动繁式，3、手动简式，4、手动繁式，5、栏间混合简式，6、栏间混合繁式，7、栏内混合简式，8、栏内混合繁式。
手动的优点：可以链接自己的招牌文章，任意选择，使用灵活，也不用考虑跨年度的影响；缺点是：过程繁琐，容易出错。
自动的优点：过程自动，不易出错，省时省力。缺点是：自动加载的文章，不能自由选择，JS代码复杂，而且需要加载时间。
混合的优点：既有手动又有自动，充分发挥手动和自动的优点，规避二者的缺点，是博客最佳的选择。
栏间混合：各个栏目之间，有的文章用手动链接，有的文章用自动加载。
栏内混合：同一栏目之内，有的文章用手动链接，有的文章用自动加载。
第四节 分栏步骤
以自动简式八个分栏为例。这也是最常用的一种。
第一步：定义分栏条块。
即把下列语句拷贝到首页CSS源码中。具体操作：在博客管理后台/控制面板/模板设置/模板DIY/CSS DIY：首页----CSS原码的文本框中粘贴如下代码。路径：博客管理后台/博客管理/模板/模板DIY/CSS DIY：首页----CSS原码也可。
注意点：一定要把下列代码拷贝到首页的CSS原码中。
代码1
第二步：书写置顶日志。
实际上你不需要重写，只需在记事本中修改以下代码。此日志不是一般的文本日志，是用高级编程语言写成的日志。
代码2
修改点1：把“showcatalog("mcategory1","category?");”中的“?”改为相应的数值。具体操作：在博客首页，将鼠标放到栏目上，不要点击，浏览器状态栏就会出现当前栏目的地址。例如：您把鼠标放到我的博客首页栏目“幽默湖”上，浏览器状态栏就会出现“http://wonderfulworks.bokee.com/catalog_2006.html#category1”，最后面的数字“1”就是问号应该改为的数值。如果您的状态栏还未打开，请你点击浏览器的查看/状态栏。举例说明：我的栏目1“幽默湖”，改后应为：showcatalog("mcategory1","category1");8个问号都要改。
修改点2：把“<a href="栏目1的网址" target="_blank">”中的“栏目1的网址”用真实的网址代替。举例说明：我的栏目1“幽默湖”，改后应为：<a href="http://wonderfulworks.bokee.com/catalog_2006.html#category1" target="_blank">。8个栏目的网址都要改。
修改点3：把“</a>※栏目1的标题</div>”中的“栏目1的标题”用真实的标题代替。举例说明：我的栏目1“幽默湖”，改后应为：</a>※幽默湖</div>。8个栏目的标题都要改。
注意点1：“showcatalog("mcategory1","category?");”中的“?”改为相应的数值后，数字的前后不能有空格。举例说明：我的栏目1“幽默湖”，改后应为：showcatalog("mcategory1","category1");而改为showcatalog("mcategory1","category 1");不对，“1”前有一个空格，改为showcatalog("mcategory1","category1 ");也不对，“1”后有一个空格。如果留有空格，永远也不能分栏。这是一个容易忽略的细节。我因此付出了重做五六次的代价，最后请教了白月光下才解决。
注意点2：1、3、5、7分栏用的是.mydiv1框架，2、4、6、8分栏用的是.mydiv2框架。
把修改好的代码保存好。
第三步：发布置顶日志。
上文已经提到，此日志不是一般的文本日志，是用高级编程语言写成的日志。所以发布也与一般日志不同。
注意点1：首先进入博客管理后台/写新文章。日志的标题一定要写。
注意点2：日志的栏目要选。不过，这一点你即使忽略了，系统也会给一个默认值。
注意点3： 撰写模式：选择高级模式。这一点很重要。
注意点4： 文章是否置顶：选择置顶。置顶就是放到首页上去，分栏就是在首页中分栏。
注意点5： 在“撰写”的工具栏中单击其中的“<>”按钮，切换至“HTML原始码”状态。此时工具栏的大部分工具变为灰色不可用状态，说明切换成功。
注意点6： 文章是否展开：一定要选展开。不过，这一点你即使忽略了，系统的默认值也是展开，但您不能选收拢。
至此，发布前的准备工作已经完成。
发布置顶日志。将第二步修改好的代码粘贴至“内容”工具栏下面的文本框，然后点击“保存并发布”。
当系统提示发布成功后，您便可以体验到分栏的喜悦！
如果有首页栏目下沉现象，可改小.mydiv1、.mydiv2中的width的数值。 第一节 单年度分栏代码分析
代码1----首页default.css代码
.mydiv1和.mydiv2分别定义的是左、右两个分栏的大框架。分栏的大框架容纳了一个渐变色标题栏和本栏的最新文章列表，其内还可以设置背景图片，这就引出了繁式，下面会详细讲解。
float:left;定义的是分栏的大框架的对齐位置，向左对齐，是相对日志来说的。
width:200px;定义的是分栏的大框架的宽度。
line-height:20px;定义的是分栏大框架内每行的高度。
border定义的是分栏大框架的边框。
.myimg定义的是渐变色标题栏右侧的“more”图标。
float:right;定义的是“more”图标的对齐位置，向右对齐，本处是相对渐变色标题栏来说的。
startColorStr和EndColorStr后面的颜色代码用来控制标题栏的渐变颜色。如果你想改动，那么只需将startColorStr和EndColorStr后面的颜色代码分别修改成自己喜欢的颜色代码即可。
GradientType后的数值改变渐变色渐变的方向，其后可为1和0。1为左右渐变，0为上下渐变。
代码2----单年度置顶日志html代码
<iframe ......></iframe>用iframe来装入2006索引页，这样我们就获得了所有本年度的文章列表了。
<script>......</script>这部分是自动更新用的从cataloghtml的categoryname这个栏目读取文章列表放到当前页面的mycategoryname中
if(i>9) break;这段代码（9可以是任意数字），只需改动这个9的数值就可以改变可容纳的最多文章数目。
s = s.slice(0,20);中的20是每行所容纳的文章题目的字数。
for(;i<10;i++)可以将(i<10)中的10这个数字是分栏装载文章的数目。
l += "<li ><a href='...' target='_blank'>惊奇添加中</a></li>\r\n";可以将“惊奇添加中”二字改成任意汉字，注意，最好是改成汉字。
function showallcatalog(){showcatalog("mcategory1","category?");}从cataloghtml读取本栏目的文章目录。
l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";提取每行文章的题目。
l += "<li>后插入<img src=小图标1的网址>可以在每行文章的题目的前面加上一个小图标。比如一只冒热气的小茶杯，或一个圆点、圆环等。
l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a>后插入<img src=小图标2的网址>可以在每行文章的题目的后面加上一个小图标。比如一个闪动的小“NEW”图标等。如果只在最新的文章后面加“NEW”图标，必须将语句l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";改为：if(i<1){ l+="<li><a href='"+oA.href+"'target='_blank'>"+s+"</a><img src=http://bimzcy.bokee.com/inc/new.gif></li>\r\n"; } else { l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n"; }
<body onload=showallcatalog()>是用body调用showallcatalog()装载的最新文章列表。
<div>......</div>是提取并排列条块。里面是8个分栏大框架及其内的渐变色条块和本栏的最新文章列表。
在<img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" />中的<img class="myimg"加上alt="惊奇更多"可以做一个鼠标特效，即鼠标指向“more”图标时会出现一个提示框，里面会出现"惊奇更多"字样。
注意点：<div>......</div>是成对出现的。我为此付出了重做十几次的代价，原因是逍遥赵的《CSS栏目式布局效果（全程图解）》一文中有一处错误，他的第1分栏结束处的前面有两个</div>，但在分栏2、3、4结束处这两个</div>却不见了，所以我每次做都失败了，下面三个分栏老是黏在一起，象连体婴儿。
逍遥赵的《现在流行CSS栏目式布局！（最终版完美全程图解）》很有启发作用，建议大家参考。http://bbs.bokee.com/p753531.html
第二节 跨年度分栏代码分析
代码1----首页default.css代码
分析同上。
代码3----跨年度置顶日志html代码
代码3
var startYear = 2005; 这个语句定义了你的博客是哪一年建立的。
var showCount = 8;这个语句定义了每个栏目显示文章的数目。
s = s.slice(0,16);这个语句定义了每篇文章显示标题字的数目，是按半角计算的，汉字要除2。
由titleDIV.insertAdjacentHTML("beforeend","（"+ currTotalCount +"）");显示“(X)”字样，本栏目的总文章数。
for(;currShowCount<showCount;currShowCount++) l += "<li style='height:20;overflow:hidden'>惊奇添加中</li>\r\n";显示"惊奇添加中"字样。
function showallcatalog(){showcatalog("mcategory1","category?");}从cataloghtml读取本栏目的文章目录。
l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";提取每行文章的题目。
l += "<li>后插入<img src=小图标1的网址>可以在每行文章的题目的前面加上一个小图标。比如一只冒热气的小茶杯，或一个圆点、圆环等。
l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a>后插入<img src=小图标2的网址>可以在每行文章的题目的后面加上一个小图标。比如一个闪动的小“NEW”图标等。如果只在最新的文章后面加“NEW”图标，必须将语句l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";改为：if(i<1){ l+="<li><a href='"+oA.href+"'target='_blank'>"+s+"</a><img src=http://wonderfulworks.bokee.com/inc/new.gif></li>\r\n"; } else { l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n"; }
<body onload=showallcatalog()>是用body调用showallcatalog()装载的最新文章列表。
<div>......</div>是提取并排列条块。里面是8个分栏大框架及其内的渐变色条块和本栏的最新文章列表。