哪个博客可以分栏?

发布网友发布时间：2022-05-02 04:56

共1个回答

热心网友时间：2022-06-28 10:23

是没有真正的分栏博客!如要分栏就得自己动手!如下↓

即把下列语句拷贝到首页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>