博客分栏宝典(经典)--天下家园

屏蔽博客图标及框架- -| 回首页 | 2006年索引 | - -跨年度首页日志代码

博客分栏宝典(经典)

文章来源：惊奇工厂wonderfulworks.bokee.com
　　　　在阅览本文之前，请先确认：

　　　　1、完整而仔细地看过《博客中国博客服务（BSP）帮助系统V1.0》（http://blog.bokee.com/help/help.htm）

　　　　2、发过若干篇日志（自己写的文章或转贴别人的文章），对博客网页比较熟悉。

　　　　3、想把自己的博客做的更好，并愿意付出努力。

　　　　4、您不必精通JavaScript语言，只要按照我的步骤一步一步做，就能成功分栏。

　　　　————————惊奇工厂wonderfulworks.bokee.com————————

　　　　博客分栏宝典

　　　　　　　　　　　　——作者：古道西风瘦马

　　　　第一章　博客分栏全过程

　　　　第一节　分栏优点

　　　　信息量大、一览无余、醒目简洁、排布整齐、自动加载、容易检索、突显个性、千变万化。

　　　　第二节　分栏原理

　　　　博客中国的博客网页有三种类型：首页，索引页，单页。首页当然只有一个；索引页有若干，每年一页；单页有很多，有一篇日志就有一页。

　　　　由于博客网页的单篇日志可以置顶，且单篇日志对使用JavaScript语言不受限，所以可以在单篇日志中使用高级设置，并在首页CSS中定义栏目条框，最后置顶到博客首页上去，完成分栏。

　　　　第三节　分栏类型

　　　　博客分栏有四种类型：1、自动简式，2、自动繁式，3、手动简式，4、手动繁式。

　　　　手动的优点：可以加载自己的招牌文章，任意选择，很灵活，也不用考虑跨年度的影响；缺点是：过程繁琐，容易出错。

　　　　自动的优点：过程自动，不易出错。缺点是：自动加载的文章，不能自由选择，而且代码复杂。

　　　　

　　　　第四节　分栏步骤

　　　　以自动简式八个分栏为例。这也是最常用的一种。

　　　　第一步：定义分栏条块。

　　　　即把下列语句拷贝到首页CSS源码中。具体操作：在博客管理后台/控制面板/模板设置/模板DIY/CSS DIY：首页----CSS原码的文本框中粘贴如下代码。路径博客管理后台/博客管理/模板/模板DIY/CSS DIY：首页----CSS原码也可。

　　　　注意点：一定要把下列代码拷贝到首页的CSS原码中。

　　.mydiv1{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　}

　　.mydiv2{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-bottom:1px solid #94a6bd;

　　}

　　.myimg{

　　float:right;

　　width:38px;

　　height:7px;

　　border:0px none;

　　padding:6px 5px 5px 0px;

　　}

　　.mybg{

　　height:20px;

　　color:#FFFFFF;

　　padding:0px;

　　margin:3px 3px 75px 3px;

　　background:#FFFFFF;

　　filter:progid:DXImageTransform.Microsoft.gradient(startColorStr:#ffff0000,EndColorStr:#ffffff00,GradientType:1);

　　}

　　　　第二步：书写置顶日志。

　　　　实际上你不需要重写，只需在记事本中修改以下代码。此日志不是一般的文本日志，是用高级编程语言写成的日志。

　　<iframe id="cataloghtml" src="catalog_2005.html" style=display:none;position:absolute;top:400;left:400;z-index:250 >

　　</iframe>

　　<script>

　　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;

　　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++)

　　l += "<li ><a href='...' target='_blank'>惊奇添加中</a></li>\r\n";

　　l+="</ul>";

　　currCategory.insertAdjacentHTML("beforeend",l);

　　}

　　function showallcatalog()

　　{

　　showcatalog("mcategory1","category?");

　　showcatalog("mcategory2","category?");

　　showcatalog("mcategory3","category?");

　　showcatalog("mcategory4","category?");

　　showcatalog("mcategory5","category?");

　　showcatalog("mcategory6","category?");

　　showcatalog("mcategory7","category?");

　　showcatalog("mcategory8","category?");

　　}

　　</script>

　　<body onload=showallcatalog()>

　　<div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="栏目1的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目1的标题</div><div class="divtext" id="mcategory1" target="_blank"></div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="栏目2的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目2的标题</div><div class="divtext" id="mcategory2" target="_blank"></div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="栏目3的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目3的标题</div><div class="divtext" id="mcategory3" target="_blank"></div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="栏目4的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目4的标题</div><div class="divtext" id="mcategory4" target="_blank"></div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="栏目5的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目5的标题</div><div class="divtext" id="mcategory5" target="_blank"></div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="栏目6的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目6的标题</div><div class="divtext" id="mcategory6" target="_blank"></div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="栏目7的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目7的标题</div><div class="divtext" id="mcategory7" target="_blank"></div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="栏目8的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目8的标题</div><div class="divtext" id="mcategory8" target="_blank"></div></div>

　　</div>

　　</body></p>

　　　　修改点1：把“showcatalog("mcategory1","category?");”中的“?”改为相应的数值。具体操作：在博客首页，将鼠标放到栏目上，不要点击，浏览器状态栏就会出现当前栏目的地址。例如：您把鼠标放到我的博客首页栏目“幽默湖”上，浏览器状态栏就会出现“http://wonderfulworks.bokee.com/catalog_2005.html#category1”，最后面的数字“1”就是问号应该改为的数值。如果您的状态栏还未打开，请你点击浏览器的查看/状态栏。举例说明：我的栏目1“幽默湖”，改后应为：showcatalog("mcategory1","category1");8个问号都要改。

　　　　修改点2：把“<a href="栏目1的网址" target="_blank">”中的“栏目1的网址”用真实的网址代替。举例说明：我的栏目1“幽默湖”，改后应为：<a href="http://wonderfulworks.bokee.com/catalog_2005.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----首页代码

　　　　.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----置顶日志

　　　　<iframe ......></iframe>用iframe来装入2005索引页，这样我们就获得了所有本年度的文章列表了-->

　　　　<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、3、5、7分栏用的是.mydiv1，2、4、6、8分栏用的是.mydiv2，而此种，8个分栏用的都是.mydiv。这是最简单的一种。

　　　　首页要添加的CSS代码：

　　.mydiv{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:25px;

　　　　　border:1px solid #94a6bd;

　　margin:0px 3px 3px 0px;

　　}

　　.myimg{

　　float:right;

　　width:38px;

　　height:7px;

　　border:0px none;

　　padding:6px 5px 5px 0px;

　　}

　　.mybg{

　　height:20px;

　　color:#FFFFFF;

　　padding:2px 0px 0px 5px;

　　padding:0px;

　　margin:3px 3px 75px 3px;

　　background:#FFFFFF;

　　filter:progid:DXImageTransform.Microsoft.gradient(startColorStr:#ffff0000,EndColorStr:#ffffff00,GradientType:1);

　　}

　　　　配套置顶日志：

　　<iframe id="cataloghtml" src="catalog_2005.html" style=display:none;position:absolute;top:400;left:400;z-index:250 >

　　</iframe>

　　<script>

　　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;

　　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++)

　　l += "<li ><a href='...' target='_blank'>惊奇添加中</a></li>\r\n";

　　l+="</ul>";

　　currCategory.insertAdjacentHTML("beforeend",l);

　　}

　　function showallcatalog()

　　{

　　showcatalog("mcategory1","category?");

　　showcatalog("mcategory2","category?");

　　showcatalog("mcategory3","category?");

　　showcatalog("mcategory4","category?");

　　showcatalog("mcategory5","category?");

　　showcatalog("mcategory6","category?");

　　showcatalog("mcategory7","category?");

　　showcatalog("mcategory8","category?");

　　}

　　</script>

　　<body onload=showallcatalog()>

　　<div>

　　<div class="mydiv" target="_blank"><div class="mybg" target="_blank"><a href="栏目1的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目1的标题</div><div class="divtext" id="mcategory1" target="_blank"></div></div>

　　<div class="mydiv" target="_blank"><div class="mybg" target="_blank"><a href="栏目2的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目2的标题</div><div class="divtext" id="mcategory2" target="_blank"></div></div>

　　<div class="mydiv" target="_blank"><div class="mybg" target="_blank"><a href="栏目3的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目3的标题</div><div class="divtext" id="mcategory3" target="_blank"></div></div>

　　<div class="mydiv" target="_blank"><div class="mybg" target="_blank"><a href="栏目4的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目4的标题</div><div class="divtext" id="mcategory4" target="_blank"></div></div>

　　<div class="mydiv" target="_blank"><div class="mybg" target="_blank"><a href="栏目5的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目5的标题</div><div class="divtext" id="mcategory5" target="_blank"></div></div>

　　<div class="mydiv" target="_blank"><div class="mybg" target="_blank"><a href="栏目6的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目6的标题</div><div class="divtext" id="mcategory6" target="_blank"></div></div>

　　<div class="mydiv" target="_blank"><div class="mybg" target="_blank"><a href="栏目7的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目7的标题</div><div class="divtext" id="mcategory7" target="_blank"></div></div>

　　<div class="mydiv" target="_blank"><div class="mybg" target="_blank"><a href="栏目8的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目8的标题</div><div class="divtext" id="mcategory8" target="_blank"></div></div>

　　</div>

　　</body></p>

　　　　第二种类型　　自动繁式八个分栏

　　　　之所以称为繁式，就是因为每个分栏大框架都需要定义，归根到底是因为每个分栏大框架内都有不同的背景图片，改动background:url('分栏1背景图的网址') no-repeat 5px 26px;中的最后两位数字，可以调节背景图片的位置。很明显，分栏背景图的网址需要您改写了。可以参看山水天下的博客http://myok.blogchina.com/index.html。

　　　　首页要添加的CSS代码：

　　.mydiv1{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-left:1px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏1背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv2{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-left:0px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏2背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv3{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-left:1px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏3背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv4{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-left:0px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏4背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv5{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-left:1px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏5背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv6{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-left:0px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏6背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv7{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-left:1px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏7背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv8{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-left:0px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏8背景图的网址') no-repeat 5px 26px;

　　}

　　.myimg{

　　float:right;

　　width:38px;

　　height:7px;

　　border:0px none;

　　padding:6px 5px 5px 0px;

　　}

　　.mybg{

　　height:20px;

　　color:#FFFFFF;

　　padding:0px;

　　margin:3px 3px 75px 3px;

　　background:#FFFFFF;

　　filter:progid:DXImageTransform.Microsoft.gradient

　　(startColorStr:#ffff0000,EndColorStr :#ffffff00,GradientType:1);

　　}

　　　　配套置顶日志

　　<iframe id="cataloghtml" src="catalog_2005.html" style=display:none;position:absolute;top:400;left:400;z-index:250 >

　　</iframe>

　　<script>

　　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;

　　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++)

　　l += "<li ><a href='...' target='_blank'>惊奇添加中</a></li>\r\n";

　　l+="</ul>";

　　currCategory.insertAdjacentHTML("beforeend",l);

　　}

　　function showallcatalog()

　　{

　　showcatalog("mcategory1","category?");

　　showcatalog("mcategory2","category?");

　　showcatalog("mcategory3","category?");

　　showcatalog("mcategory4","category?");

　　showcatalog("mcategory5","category?");

　　showcatalog("mcategory6","category?");

　　showcatalog("mcategory7","category?");

　　showcatalog("mcategory8","category?");

　　}

　　</script>

　　<body onload=showallcatalog()>

　　<div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="栏目1的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目1的标题</div><div class="divtext" id="mcategory1" target="_blank"></div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="栏目2的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目2的标题</div><div class="divtext" id="mcategory2" target="_blank"></div></div>

　　<div class="mydiv3" target="_blank"><div class="mybg" target="_blank"><a href="栏目3的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目3的标题</div><div class="divtext" id="mcategory3" target="_blank"></div></div>

　　<div class="mydiv4" target="_blank"><div class="mybg" target="_blank"><a href="栏目4的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目4的标题</div><div class="divtext" id="mcategory4" target="_blank"></div></div>

　　<div class="mydiv5" target="_blank"><div class="mybg" target="_blank"><a href="栏目5的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目5的标题</div><div class="divtext" id="mcategory5" target="_blank"></div></div>

　　<div class="mydiv6" target="_blank"><div class="mybg" target="_blank"><a href="栏目6的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目6的标题</div><div class="divtext" id="mcategory6" target="_blank"></div></div>

　　<div class="mydiv7" target="_blank"><div class="mybg" target="_blank"><a href="栏目7的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目7的标题</div><div class="divtext" id="mcategory7" target="_blank"></div></div>

　　<div class="mydiv8" target="_blank"><div class="mybg" target="_blank"><a href="栏目8的网址" target="_blank"><img class="myimg" src="http://wonderfulworks.bokee.com/inc/more.gif" /></a>※栏目8的标题</div><div class="divtext" id="mcategory8" target="_blank"></div></div>

　　</div>

　　</body></p>

　　　　第三种类型　　手动简式八个分栏

　　　　很明显，手动式没有自动更新代码，所以每一个栏目的每篇文章都需要您添加。可以参看美丽家园的博客http://aheshake.blogchina.com/index.html。

　　　　首页要添加的CSS代码：

　　.mydiv1{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　}

　　.mydiv2{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-bottom:1px solid #94a6bd;

　　}

　　.myimg{

　　float:right;

　　width:38px;

　　height:7px;

　　border:0px none;

　　padding:6px 5px 5px 0px;

　　}

　　.mybg{

　　height:20px;

　　color:#FFFFFF;

　　padding:0px;

　　margin:3px 3px 75px 3px;

　　background:#FFFFFF;

　　filter:progid:DXImageTransform.Microsoft.gradient(startColorStr:#ffff0000,EndColorStr:#ffffff00,GradientType:1);

　　}

　　　　配套置顶日志

　　<div>

　　<div class="mydiv1" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目1的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目1的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目1的文章1的网址" target="_blank">栏目1的文章1的标题</a></li>

　　<li><a href="栏目1的文章2的网址" target="_blank">栏目1的文章2的标题</a></li>

　　<li><a href="栏目1的文章3的网址" target="_blank">栏目1的文章3的标题</a></li>

　　<li><a href="栏目1的文章4的网址" target="_blank">栏目1的文章4的标题</a></li>

　　<li><a href="栏目1的文章5的网址" target="_blank">栏目1的文章5的标题</a></li>

　　<li><a href="栏目1的文章6的网址" target="_blank">栏目1的文章6的标题</a></li>

　　<li><a href="栏目1的文章7的网址" target="_blank">栏目1的文章7的标题</a></li>

　　<li><a href="栏目1的文章8的网址" target="_blank">栏目1的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv2" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目2的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目2的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目2的文章1的网址" target="_blank">栏目2的文章1的标题</a></li>

　　<li><a href="栏目2的文章2的网址" target="_blank">栏目2的文章2的标题</a></li>

　　<li><a href="栏目2的文章3的网址" target="_blank">栏目2的文章3的标题</a></li>

　　<li><a href="栏目2的文章4的网址" target="_blank">栏目2的文章4的标题</a></li>

　　<li><a href="栏目2的文章5的网址" target="_blank">栏目2的文章5的标题</a></li>

　　<li><a href="栏目2的文章6的网址" target="_blank">栏目2的文章6的标题</a></li>

　　<li><a href="栏目2的文章7的网址" target="_blank">栏目2的文章7的标题</a></li>

　　<li><a href="栏目2的文章8的网址" target="_blank">栏目2的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv1" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目3的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目3的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目3的文章1的网址" target="_blank">栏目3的文章1的标题</a></li>

　　<li><a href="栏目3的文章2的网址" target="_blank">栏目3的文章2的标题</a></li>

　　<li><a href="栏目3的文章3的网址" target="_blank">栏目3的文章3的标题</a></li>

　　<li><a href="栏目3的文章4的网址" target="_blank">栏目3的文章4的标题</a></li>

　　<li><a href="栏目3的文章5的网址" target="_blank">栏目3的文章5的标题</a></li>

　　<li><a href="栏目3的文章6的网址" target="_blank">栏目3的文章6的标题</a></li>

　　<li><a href="栏目3的文章7的网址" target="_blank">栏目3的文章7的标题</a></li>

　　<li><a href="栏目3的文章8的网址" target="_blank">栏目3的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv2" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目4的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目4的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目4的文章1的网址" target="_blank">栏目4的文章1的标题</a></li>

　　<li><a href="栏目4的文章2的网址" target="_blank">栏目4的文章2的标题</a></li>

　　<li><a href="栏目4的文章3的网址" target="_blank">栏目4的文章3的标题</a></li>

　　<li><a href="栏目4的文章4的网址" target="_blank">栏目4的文章4的标题</a></li>

　　<li><a href="栏目4的文章5的网址" target="_blank">栏目4的文章5的标题</a></li>

　　<li><a href="栏目4的文章6的网址" target="_blank">栏目4的文章6的标题</a></li>

　　<li><a href="栏目4的文章7的网址" target="_blank">栏目4的文章7的标题</a></li>

　　<li><a href="栏目4的文章8的网址" target="_blank">栏目4的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv1" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目5的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目5的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目5的文章1的网址" target="_blank">栏目5的文章1的标题</a></li>

　　<li><a href="栏目5的文章2的网址" target="_blank">栏目5的文章2的标题</a></li>

　　<li><a href="栏目5的文章3的网址" target="_blank">栏目5的文章3的标题</a></li>

　　<li><a href="栏目5的文章4的网址" target="_blank">栏目5的文章4的标题</a></li>

　　<li><a href="栏目5的文章5的网址" target="_blank">栏目5的文章5的标题</a></li>

　　<li><a href="栏目5的文章6的网址" target="_blank">栏目5的文章6的标题</a></li>

　　<li><a href="栏目5的文章7的网址" target="_blank">栏目5的文章7的标题</a></li>

　　<li><a href="栏目5的文章8的网址" target="_blank">栏目5的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv2" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目6的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目6的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目6的文章1的网址" target="_blank">栏目6的文章1的标题</a></li>

　　<li><a href="栏目6的文章2的网址" target="_blank">栏目6的文章2的标题</a></li>

　　<li><a href="栏目6的文章3的网址" target="_blank">栏目6的文章3的标题</a></li>

　　<li><a href="栏目6的文章4的网址" target="_blank">栏目6的文章4的标题</a></li>

　　<li><a href="栏目6的文章5的网址" target="_blank">栏目6的文章5的标题</a></li>

　　<li><a href="栏目6的文章6的网址" target="_blank">栏目6的文章6的标题</a></li>

　　<li><a href="栏目6的文章7的网址" target="_blank">栏目6的文章7的标题</a></li>

　　<li><a href="栏目6的文章8的网址" target="_blank">栏目6的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv1" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目7的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目7的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目7的文章1的网址" target="_blank">栏目7的文章1的标题</a></li>

　　<li><a href="栏目7的文章2的网址" target="_blank">栏目7的文章2的标题</a></li>

　　<li><a href="栏目7的文章3的网址" target="_blank">栏目7的文章3的标题</a></li>

　　<li><a href="栏目7的文章4的网址" target="_blank">栏目7的文章4的标题</a></li>

　　<li><a href="栏目7的文章5的网址" target="_blank">栏目7的文章5的标题</a></li>

　　<li><a href="栏目7的文章6的网址" target="_blank">栏目7的文章6的标题</a></li>

　　<li><a href="栏目7的文章7的网址" target="_blank">栏目7的文章7的标题</a></li>

　　<li><a href="栏目7的文章8的网址" target="_blank">栏目7的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv2" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目8的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目8的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目8的文章1的网址" target="_blank">栏目8的文章1的标题</a></li>

　　<li><a href="栏目8的文章2的网址" target="_blank">栏目8的文章2的标题</a></li>

　　<li><a href="栏目8的文章3的网址" target="_blank">栏目8的文章3的标题</a></li>

　　<li><a href="栏目8的文章4的网址" target="_blank">栏目8的文章4的标题</a></li>

　　<li><a href="栏目8的文章5的网址" target="_blank">栏目8的文章5的标题</a></li>

　　<li><a href="栏目8的文章6的网址" target="_blank">栏目8的文章6的标题</a></li>

　　<li><a href="栏目8的文章7的网址" target="_blank">栏目8的文章7的标题</a></li>

　　<li><a href="栏目8的文章8的网址" target="_blank">栏目8的文章8的标题</a></li>

　　</ul></div></div>

　　</div>

　　　　第四种类型　　手动繁式八个分栏

　　　　首页要添加的CSS代码：

　　.mydiv1{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-left:1px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏1背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv2{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-left:0px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏2背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv3{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-left:1px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏3背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv4{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-left:0px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏4背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv5{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-left:1px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏5背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv6{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-left:0px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏6背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv7{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding:0px;

　　　　　line-height:20px;

　　　　　border-left:1px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏7背景图的网址') no-repeat 5px 26px;

　　}

　　.mydiv8{

　　　　　float:left;

　　　　　width:200px;

　　　　　padding: 0px;

　　　　　line-height:20px;

　　　　　border-left:0px solid #94a6bd;

　　　　　border-right:1px solid #94a6bd;

　　　　　border-bottom:1px solid #94a6bd;

　　　　　background:url('分栏8背景图的网址') no-repeat 5px 26px;

　　}

　　.myimg{

　　float:right;

　　width:38px;

　　height:7px;

　　border:0px none;

　　padding:6px 5px 5px 0px;

　　}

　　.mybg{

　　height:20px;

　　color:#FFFFFF;

　　padding:0px;

　　margin:3px 3px 75px 3px;

　　background:#FFFFFF;

　　filter:progid:DXImageTransform.Microsoft.gradient

　　(startColorStr:#ffff0000,EndColorStr :#ffffff00,GradientType:1);

　　}

　　　　配套置顶日志

　　<div>

　　<div class="mydiv1" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目1的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目1的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目1的文章1的网址" target="_blank">栏目1的文章1的标题</a></li>

　　<li><a href="栏目1的文章2的网址" target="_blank">栏目1的文章2的标题</a></li>

　　<li><a href="栏目1的文章3的网址" target="_blank">栏目1的文章3的标题</a></li>

　　<li><a href="栏目1的文章4的网址" target="_blank">栏目1的文章4的标题</a></li>

　　<li><a href="栏目1的文章5的网址" target="_blank">栏目1的文章5的标题</a></li>

　　<li><a href="栏目1的文章6的网址" target="_blank">栏目1的文章6的标题</a></li>

　　<li><a href="栏目1的文章7的网址" target="_blank">栏目1的文章7的标题</a></li>

　　<li><a href="栏目1的文章8的网址" target="_blank">栏目1的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv2" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目2的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目2的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目2的文章1的网址" target="_blank">栏目2的文章1的标题</a></li>

　　<li><a href="栏目2的文章2的网址" target="_blank">栏目2的文章2的标题</a></li>

　　<li><a href="栏目2的文章3的网址" target="_blank">栏目2的文章3的标题</a></li>

　　<li><a href="栏目2的文章4的网址" target="_blank">栏目2的文章4的标题</a></li>

　　<li><a href="栏目2的文章5的网址" target="_blank">栏目2的文章5的标题</a></li>

　　<li><a href="栏目2的文章6的网址" target="_blank">栏目2的文章6的标题</a></li>

　　<li><a href="栏目2的文章7的网址" target="_blank">栏目2的文章7的标题</a></li>

　　<li><a href="栏目2的文章8的网址" target="_blank">栏目2的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv3" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目3的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目3的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目3的文章1的网址" target="_blank">栏目3的文章1的标题</a></li>

　　<li><a href="栏目3的文章2的网址" target="_blank">栏目3的文章2的标题</a></li>

　　<li><a href="栏目3的文章3的网址" target="_blank">栏目3的文章3的标题</a></li>

　　<li><a href="栏目3的文章4的网址" target="_blank">栏目3的文章4的标题</a></li>

　　<li><a href="栏目3的文章5的网址" target="_blank">栏目3的文章5的标题</a></li>

　　<li><a href="栏目3的文章6的网址" target="_blank">栏目3的文章6的标题</a></li>

　　<li><a href="栏目3的文章7的网址" target="_blank">栏目3的文章7的标题</a></li>

　　<li><a href="栏目3的文章8的网址" target="_blank">栏目3的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv4" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目4的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目4的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目4的文章1的网址" target="_blank">栏目4的文章1的标题</a></li>

　　<li><a href="栏目4的文章2的网址" target="_blank">栏目4的文章2的标题</a></li>

　　<li><a href="栏目4的文章3的网址" target="_blank">栏目4的文章3的标题</a></li>

　　<li><a href="栏目4的文章4的网址" target="_blank">栏目4的文章4的标题</a></li>

　　<li><a href="栏目4的文章5的网址" target="_blank">栏目4的文章5的标题</a></li>

　　<li><a href="栏目4的文章6的网址" target="_blank">栏目4的文章6的标题</a></li>

　　<li><a href="栏目4的文章7的网址" target="_blank">栏目4的文章7的标题</a></li>

　　<li><a href="栏目4的文章8的网址" target="_blank">栏目4的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv5" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目5的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目5的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目5的文章1的网址" target="_blank">栏目5的文章1的标题</a></li>

　　<li><a href="栏目5的文章2的网址" target="_blank">栏目5的文章2的标题</a></li>

　　<li><a href="栏目5的文章3的网址" target="_blank">栏目5的文章3的标题</a></li>

　　<li><a href="栏目5的文章4的网址" target="_blank">栏目5的文章4的标题</a></li>

　　<li><a href="栏目5的文章5的网址" target="_blank">栏目5的文章5的标题</a></li>

　　<li><a href="栏目5的文章6的网址" target="_blank">栏目5的文章6的标题</a></li>

　　<li><a href="栏目5的文章7的网址" target="_blank">栏目5的文章7的标题</a></li>

　　<li><a href="栏目5的文章8的网址" target="_blank">栏目5的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv6" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目6的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目6的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目6的文章1的网址" target="_blank">栏目6的文章1的标题</a></li>

　　<li><a href="栏目6的文章2的网址" target="_blank">栏目6的文章2的标题</a></li>

　　<li><a href="栏目6的文章3的网址" target="_blank">栏目6的文章3的标题</a></li>

　　<li><a href="栏目6的文章4的网址" target="_blank">栏目6的文章4的标题</a></li>

　　<li><a href="栏目6的文章5的网址" target="_blank">栏目6的文章5的标题</a></li>

　　<li><a href="栏目6的文章6的网址" target="_blank">栏目6的文章6的标题</a></li>

　　<li><a href="栏目6的文章7的网址" target="_blank">栏目6的文章7的标题</a></li>

　　<li><a href="栏目6的文章8的网址" target="_blank">栏目6的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv7" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目7的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目7的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目7的文章1的网址" target="_blank">栏目7的文章1的标题</a></li>

　　<li><a href="栏目7的文章2的网址" target="_blank">栏目7的文章2的标题</a></li>

　　<li><a href="栏目7的文章3的网址" target="_blank">栏目7的文章3的标题</a></li>

　　<li><a href="栏目7的文章4的网址" target="_blank">栏目7的文章4的标题</a></li>

　　<li><a href="栏目7的文章5的网址" target="_blank">栏目7的文章5的标题</a></li>

　　<li><a href="栏目7的文章6的网址" target="_blank">栏目7的文章6的标题</a></li>

　　<li><a href="栏目7的文章7的网址" target="_blank">栏目7的文章7的标题</a></li>

　　<li><a href="栏目7的文章8的网址" target="_blank">栏目7的文章8的标题</a></li>

　　</ul></div></div>

　　<div class="mydiv8" target="_blank">

　　<div class="mybg" target="_blank">

　　<a target="_blank" href="栏目8的网址">

　　<img class="myimg" alt="惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif"/></a>※栏目8的标题</div>

　　<div class="divtext">

　　<ul type="circle" target="_blank">

　　<li><a href="栏目8的文章1的网址" target="_blank">栏目8的文章1的标题</a></li>

　　<li><a href="栏目8的文章2的网址" target="_blank">栏目8的文章2的标题</a></li>

　　<li><a href="栏目8的文章3的网址" target="_blank">栏目8的文章3的标题</a></li>

　　<li><a href="栏目8的文章4的网址" target="_blank">栏目8的文章4的标题</a></li>

　　<li><a href="栏目8的文章5的网址" target="_blank">栏目8的文章5的标题</a></li>

　　<li><a href="栏目8的文章6的网址" target="_blank">栏目8的文章6的标题</a></li>

　　<li><a href="栏目8的文章7的网址" target="_blank">栏目8的文章7的标题</a></li>

　　<li><a href="栏目8的文章8的网址" target="_blank">栏目8的文章8的标题</a></li>

　　</ul></div></div>

　　</div>

　　　　第四章　我的分栏代码

　　　　首页要添加的CSS代码：

　　.mydiv1{

　　float:left;

　　width:265px;

　　padding:0px;

　　line-height:150%;

　　border-right:1px solid #94a6bd;

　　border-bottom:1px solid #94a6bd;

　　}

　　.mydiv2{

　　float:left;

　　width:265px;

　　padding:0px;

　　line-height:150%;

　　border-bottom:1px solid #94a6bd;

　　}

　　.myimg{

　　float:right;

　　width:38px;

　　height:7px;

　　border:0px none;

　　padding-left:0px; padding-right:5px; padding-top:6px; padding-bottom:0px

　　}

　　.mybg{

　　height:20px;

　　color:#FFFFFF;

　　padding:2px 0px 0px 5px;

　　background:#FFFFFF;

　　filter:progid:DXImageTransform.Microsoft.gradient

　　(startColorStr:#ffff0000,EndColorStr :#ffffff00,GradientType:1);

　　}

　　　　配套置顶日志

　　<iframe id="cataloghtml" src="catalog_2005.html" style=display:none;position:absolute;top:400;left:400;z-index:250 ></iframe>

　　<script>

　　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>7) break;

　　oA = oLI[i].children(1);

　　s = oA.innerHTML;

　　//pos = s.search(/[）|】|』|\]]{1}/);

　　//if(pos>0)s=s.slice(pos+1);

　　s = s.slice(0,1;

　　　　if(i<2){

　　　　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";

　　　　}

　　}

　　for(;i<8;i++)

　　l += "<li ><a href='...' target='_blank'>惊奇添加中</a></li>\r\n";

　　l+="</ul>";

　　currCategory.insertAdjacentHTML("beforeend",l);

　　titleDIV = currCategory.parentElement.children(0);

　　titleDIV.insertAdjacentHTML("beforeend","（"+ oLI.length +"）");

　　}

　　function showallcatalog()

　　{

　　showcatalog("mcategory1","category1");

　　showcatalog("mcategory2","category2");

　　showcatalog("mcategory3","category3");

　　showcatalog("mcategory4","category4");

　　showcatalog("mcategory5","category5");

　　showcatalog("mcategory6","category6");

　　showcatalog("mcategory7","category7");

　　showcatalog("mcategory8","category8");

　　showcatalog("mcategory9","category9");

　　showcatalog("mcategory10","category10");

　　showcatalog("mcategory11","category11");

　　showcatalog("mcategory12","category12");

　　showcatalog("mcategory13","category13");

　　showcatalog("mcategory14","category14");

　　showcatalog("mcategory15","category16");

　　showcatalog("mcategory16","category18");

　　showcatalog("mcategory17","category19");

　　showcatalog("mcategory18","category20");

　　}

　　</script>

　　<body onload=showallcatalog()>

　　<div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category1" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※幽默湖</div><div class="divtext" id="mcategory1" target="_blank">

　　</div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category2" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※智慧林</div><div class="divtext" id="mcategory2" target="_blank">

　　</div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category3" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※惊奇吧</div><div class="divtext" id="mcategory3" target="_blank">

　　</div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category4" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※爱情鸟</div><div class="divtext" id="mcategory4" target="_blank">

　　</div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category5" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※理想国</div><div class="divtext" id="mcategory5" target="_blank">

　　</div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category6" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※七幻界</div><div class="divtext" id="mcategory6" target="_blank">

　　</div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category7" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※哲学谷</div><div class="divtext" id="mcategory7" target="_blank">

　　</div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category8" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※桃花源</div><div class="divtext" id="mcategory8" target="_blank">

　　</div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category9" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※乌托邦</div><div class="divtext" id="mcategory9" target="_blank">

　　</div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category10" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※浮世绘</div><div class="divtext" id="mcategory10" target="_blank">

　　</div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category11" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※天籁音</div><div class="divtext" id="mcategory11" target="_blank">

　　</div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category12" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※宇宙树</div><div class="divtext" id="mcategory12" target="_blank">

　　</div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category13" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※克隆羊</div><div class="divtext" id="mcategory13" target="_blank">

　　</div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category14" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※动漫书</div><div class="divtext" id="mcategory14" target="_blank">

　　</div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category16" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※追梦人</div><div class="divtext" id="mcategory15" target="_blank">

　　</div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category18" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※网络虫</div><div class="divtext" id="mcategory16" target="_blank">

　　</div></div>

　　<div class="mydiv1" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category19" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※下载园</div><div class="divtext" id="mcategory17" target="_blank">

　　</div></div>

　　<div class="mydiv2" target="_blank"><div class="mybg" target="_blank"><a href="http://wonderfulworks.bokee.com/catalog_2005.html#category20" target="_blank"><img class="myimg" alt="点击惊奇更多" src="http://wonderfulworks.bokee.com/inc/more.gif " /></a>※神秘岛</div><div class="divtext" id="mcategory18" target="_blank">

　　</div></div>

　　</div>

　　</body></p>
(来源:人在路上)

【作者: 尚群卓】【访问统计:】【2006年01月20日星期五 16:15】【加入博采】【打印】

Trackback

你可以使用这个链接引用该篇文章 http://publishblog.blogchina.com/blog/tb.b?diaryID=4253198

回复

验证码：
评论内容：