CSS栏目式布局（见上图）是一种十分清爽便捷的模板式个性化布局方式，和传统的日志罗列方式相比，CSS栏目式布局具有信息量大、主题排布清晰、界面清爽简洁、自动加载、更新文章标题等优点，一经推出便广受博友好评，一时间倍受推崇，许多博友纷纷效仿并各自推出了具有自己风格和特色的CSS栏目式布局。今天，我就来把CSS栏目式布局的制作方法详细告诉广大博友，本文采用全程图解的方式，代码中也有详细的注释，相信广大博友一定能够轻松上手。
操作步骤：第一步——添加CSS渐变色标题栏：登陆个人博客后台，点击“模板设置”
，点击“模板DIY”
，在“CSS原码”的文本框
中输入以下内容：
.mydiv1 {
BORDER-RIGHT: #
}
.mydiv2 {
PADDING-RIGHT: 0px; BACKGROUND-POSITION: 10px 25px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 257px; LINE-HEIGHT: 150%; PADDING-TOP: 0px; BORDER-BOTTOM: #
}
.myimg {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: right; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 38px; PADDING-TOP: 6px; HEIGHT: 7px; BORDER-RIGHT-WIDTH: 0px
}
.mybg_01 {
PADDING-LEFT: 5px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorStr:#ffff0000,EndColorStr :#ffffff00,GradientType:1); COLOR: #ffffff; PADDING-TOP: 2px; HEIGHT: 20px; BACKGROUND-COLOR: #ffffff
}
然后点击“保存修改”，我们即完成了CSS渐变色标题栏的添加
。
（有关第一步CSS代码的分析讲解：
.mydiv1和.mydiv2分别是左、右两个CSS渐变色标题栏的生成代码，.myimg是安置和生成标题栏右侧“more”标志的代码，而.mybg_01则是生成渐变色的代码。下面具体讲解一下它们的主要属性参数：
.mydiv1和.mydiv2中，WIDTH:用来控制标题栏的宽度。由于不同的模板宽度不一样，可能会因为有的模板宽度过窄而导致CSS栏目下沉的情况。一旦出现这种情况，大家可以按实际需要来更改WIDTH后面的数值。
.mybg_01中，startColorStr和EndColorStr后面的颜色代码用来控制标题栏的渐变颜色【所谓渐变色，就是指定一个开始颜色，指定一个结束颜色，整个背景便从左到右由开始颜色向结束颜色逐渐变化，整个背景的颜色是动态连续的，越接近右边其颜色就越接近结束颜色，越远离开始颜色，是一种常用的网页艺术修饰特效】，其中startColorStr就是开始颜色，，其后面的颜色代码#ffff0000是红色的颜色代码，而EndColorStr则是结束颜色，其后面的颜色代码#ffffff00则是黄颜色的代码，这样设置后，整个标题栏便从左至右呈现由红色到黄色的渐变。如果你想将标题栏的渐变色设计成自己喜欢的颜色，那么只需将startColorStr和EndColorStr后面的颜色代码分别修改成自己喜欢的颜色代码即可。）
第二步——在记事本中改写以下代码(//旁边的文字是注释部分)：
<!--用iframe来装入2005索引页，这样我们就获得了所有本年度的文章列表了-->
<iframe id="cataloghtml" src="catalog_2005.html" style=display:none;position:absolute;top:400;left:400;z-index:250 ></iframe>
<script>
//这部分的脚本是自动更新用的
//从cataloghtml的categoryname这个栏目读取文章列表放到当前页面的mycategoryname中
function showcatalog(mycategoryname,categoryname)
{
currCategory = document.body.all[mycategoryname];
if(currCategory == null)
{
alert("currCategory");
return ;
}
ol = cataloghtml.document.body.all;
if(ol == null)
{
alert("ol==null");
return ;
}
var entityDiv = null;
for(i=0;i<ol.length;i++)
{
if(ol[i].className =="entity")
{
entityDiv = ol[i];break;
}
}
if(entityDiv == null)
{
alert("entityDiv==null");
return ;
}
ol = entityDiv.children.tags("UL");
if(ol == null)
{
alert("entityDiv.children.tags('UL')==null");
return ;
}
var oLI=null;
for(i=0;i<ol.length;i++)
{
if(ol[i].children(0).name==categoryname)
{
oLI = ol[i].children.tags("LI");
break;
}
}
if(oLI == null) return ;
l="<ul type='circle'>";
for(i=0;i<oLI.length;i++)
{
if(i>9) break;
//可以将(i>9)中的9这个数字改变成任意数值，这个数值关系到装载的文章数目
oA = oLI[i].children(1);
s = oA.innerHTML;
//pos = s.search(/[）|】|』|\]]{1}/);
//if(pos>0)s=s.slice(pos+1);
s = s.slice(0,20);
l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";
}
for(;i<10;i++)
//可以将(i<10)中的10这个数字改变成任意数，这个数值关系到装载文章的数目
l += "<li ><a href='...' target='_blank'>空白</a></li>\r\n";
//可以将“空白”二字改成任意汉字，注意，最好是改成汉字。
l+="</ul>";
currCategory.insertAdjacentHTML("beforeend",l);
}
//从cataloghtml读取目录并生成当前页面
function showallcatalog()
{
//需要改写的地方之一
showcatalog("mcategory1","category?");//加载标题栏一的文章
showcatalog("mcategory2","category?");//加载标题栏二的文章
showcatalog("mcategory3","category?");//加载标题栏三的文章
showcatalog("mcategory4","category?");//加载标题栏四的文章
//……
//注意，上面的省略号表示如果还有第五、第六个标题栏时依此类推，写类似的代码
}
</script>
<!--当body装入后调用showallcatalog()装载最新文章列表-->
<body onload=showallcatalog()>
//需要改写的地方之二
<div><div class="mydiv1" target="_blank"><div class="mybg_01" target="_blank">
<a href="栏目一的网址" target="_blank"><img class="myimg" src="http://bimzcy.blogchina.com/inc/go.gif" /></a>※标题栏一的标题</div><div class="divtext" id="mcategory1" target="_blank">
</div></div><!--结束-->
<div class="mydiv2" target="_blank"><div class="mybg_01" target="_blank"><a href="栏目二的网址" target="_blank"><img class="myimg" src="http://bimzcy.blogchina.com/inc/go.gif" /></a>※标题栏二的标题</div><div class="divtext" id="mcategory2" target="_blank">
<div class="mydiv1" target="_blank"><div class="mybg_01" target="_blank"><a href="栏目三的网址" target="_blank"><img class="myimg" src="http://bimzcy.blogchina.com/inc/go.gif" /></a>※标题栏三的标题</div><div class="divtext" id="mcategory3" target="_blank">
<div class="mydiv2" target="_blank"><div class="mybg_01" target="_blank"><a href="栏目四的网址" target="_blank"><img class="myimg" src="http://bimzcy.blogchina.com/inc/go.gif" /></a>※标题栏四的标题</div><div class="divtext" id="mcategory4" target="_blank">
//……
//省略号表示如果有第五、第六个标题栏时依此类推写类似的代码。不过，mydiv后的数值1和2是交替的。
</div>
</body></p>
我们先说代码中指出的第一处应该（见代码中“需要改写的地方之一”的注释）在记事本上修改的地方：category后面的个问号要改成具体的数字，每个标题栏对应的具体category数值，你可以通过点击“总目录”旁边对应的栏目
得知category的具体数值（这里以“美丽家园”的博客为例）。比如“美丽家园”的第一个标题栏是“经济时空”
，那么只需点击“总目录”旁边的“经济时空”
，就会进入一个新的页面，你会在页面中的地址栏看到以下网址
接着再说代码中指出的第二处应该（见代码中“需要改写的地方之二”的注释）在记事本上修改的地方：首先将“栏目一的网址”、“栏目二的网址”……替换成标题栏一、二……对应的网址（这里以“美丽家园”的博客为例）。比如“美丽家园”的第一个标题栏是“经济时空”，就会进入一个新的页面，你会在页面中的地址栏看到以下网址
第三步——将上面在记事本里改写好的代码粘贴至日志中：首先将刚才在记事本里改写好的代码全部选中，然后复制。接着进入后台，点击“撰写”
看到类似这样的效果
********************************************************************************
特效一：分栏渐变色颜色任意改变【作者：逍遥赵】
.mybg_01{PADDING-LEFT:5px;FILTER:progid:DXImageTransform.Microsoft.gradient(startColorStr:#ffff0000,EndColorStr:#ffffff00,GradientType:1);COLOR:#ffffff;PADDING-TOP:2px;HEIGHT:20px;BACKGROUND-COLOR: #ffffff }
在上述代码的.mybg_01中，startColorStr和EndColorStr后面的颜色代码用来控制标题栏的渐变颜色【所谓渐变色，就是指定一个开始颜色，指定一个结束颜色，整个背景便从左到右由开始颜色向结束颜色逐渐变化，整个背景的颜色是动态连续的，越接近右边其颜色就越接近结束颜色，越远离开始颜色，是一种常用的网页艺术修饰特效】，其中startColorStr就是开始颜色，，其后面的颜色代码#ffff0000是红色的颜色代码，而EndColorStr则是结束颜色，其后面的颜色代码#ffffff00则是黄颜色的代码，这样设置后，整个标题栏便从左至右呈现由红色到黄色的渐变。如果你想将标题栏的渐变色设计成自己喜欢的颜色，那么只需将startColorStr和EndColorStr后面的颜色代码分别修改成自己喜欢的颜色代码即可。）
特效二：分栏渐变色颜色由左右渐变改为上下渐变【作者：逍遥赵】
同理，在特效一的代码的.mybg_01中，GradientType是改变渐变色渐变方向的属性，其后可为1和0。为1时为左右渐变，为0时为上下渐变。
特效三：分栏显示各栏目的文章数目【作者：DOZB】
找到代码currCategory.insertAdjacentHTML("beforeend",l);并在下面加入如下代码即可：
titleDIV = currCategory.parentElement.children(0);
titleDIV.insertAdjacentHTML("beforeend","（"+ oLI.length +"）");
特效四：随意调整分栏容纳的最多文章数目【作者：逍遥赵】
找到if(i>X) break;这段代码（X可以是任意数字），只需改动这个X的数值就可以改变可容纳的最多文章数目。
特效五：随意调整分栏装载文章数目【作者：逍遥赵】
特效四的容纳文章数目实际上是指分栏支持的行数，而这个装载数目则是指当分栏文章数目不足这个数目时其下面的文章标题便显示“空白”。
找到for(;i<X;i++)这段代码（X可以是任意数字），只需改动这个X的数值就可以改变分栏装载文章数目。
特效六：将文章标题的“空白”二字改为任意文字并链接到指定网址【作者：逍遥赵】
找到<a href='...' target='_blank'>空白</a>这段代码，将“空白”改为任意字符便会显示任意字符，同时将href='...'中单引号里的…改为要链接的网址即可。
特效七：将文章标题的“空白”二字但不链接任何网址【作者：逍遥赵】
改“空白”二字的方法同特效六，若要不链接任何网址，只需去掉<a href='...' target='_blank'>空白</a>这句代码中的<a href='...' target='_blank'>和</a>即可。
特效八：在分栏的栏目标题下加图片【作者：逍遥赵】
在CSS中的每个.mydivX{}中加入以下代码即可（X可以是任意数值）：
background:url(图片网址) no-repeat 5px 26px;
特效九：更改分栏文章标题可容纳的字数【作者：逍遥赵】
找到s = s.slice(0,X);这段代码（X可以是任意数字），只需改动这个X的数值就可以改变文章标题可容纳的字数。
特效十：在每栏的第一篇后加上最新的标志【作者：舟无泊】
找到s = s.slice(0,X);这段代码（X可以是任意数字），将其下面的l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";这行代码删除，然后加入如下代码：
if(i<2){
l+="<li><a href='"+oA.href+"'target='_blank'>"+s+"</a><img src=/upimgback/allimg/070120/22520019.gif></li>\r\n";
}
else
{
l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";
}
