思玲妹妹的博客

博客分栏首页的设计制作（分自动和手动）

                                      

一。在首页CSS中加入以下代码：

/*=======自定义样式=======*/
.mydiv1{
      float:left;
      width:198px;
      padding:0px;
      line-height:20px;
      border-left:1px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
      background:url(./inc/guilin02.jpg) no-repeat 5px 26px;
}
.mydiv2{
      float:left;
      width:199px;
      padding: 0px;
      line-height:20px;
      border-left:0px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
      background:url(./inc/guilin08.jpg) no-repeat 5px 26px;
}
.mydiv3{
      float:left;
      width:198px;
      padding: 0px;
      line-height:20px;
      border-left:1px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
      background:url(./inc/guilin04.jpg) no-repeat 5px 26px;
}
.mydiv4{
      float:left;
      width:199px;
      padding: 0px;
      line-height:20px;
      border-left:0px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
      background:url(./inc/guilin06.jpg) no-repeat 5px 26px;
}
.mydiv5{
      float:left;
      width:198px;
      padding: 0px;
      line-height:20px;
      border-left:1px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
     background:url(./inc/guilin07.jpg) no-repeat 5px 26px;
}
.mydiv6{
      float:left;
      width:199px;
      padding: 0px;
      line-height:20px;
      border-left:0px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
      background:url(./inc/guilin12.jpg) no-repeat 5px 26px;
}
.mydiv7{
      float:left;
      width:198px;
      padding: 0px;
      line-height:20px;
      border-left:1px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
      background:url(./inc/guilin00.jpg) no-repeat 5px 26px;
}
.mydiv8{
      float:left;
      width:199px;
      padding: 0px;
      line-height:20px;
      border-left:0px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
      background:url(./inc/guilin01.jpg) no-repeat 5px 26px;
}
.mydiv9{
      float:left;
      width:198px;
      padding: 0px;
      line-height:20px;
      border-left:1px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
      background:url(./inc/guilin05.jpg) no-repeat 5px 26px;
}
.mydiv10{
      float:left;
      width:199px;
      padding: 0px;
      line-height:20px;
      border-left:0px solid #94A6BD;
      border-right:1px solid #94A6BD;
      border-bottom:1px solid #94A6BD;
      background:url(./inc/guilin10.jpg) no-repeat 5px 26px;
}
.myli{
  width:175px;
  height:20px;
  margin-left:20px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.myul{
      float:left;
      width:99px;
      line-height:20px;
      padding: 0px;
      margin:75px 0px 0px 0px;
}
.myul li{
  margin-left:20px;
}
.myimg{
    float:right;
    width:38px;
    height:7px;
    border:0;
    padding: 6px 5px 5px 0px;
}
.mybg{
  height:20px;
  color:#FFFFFF;
  padding:2px 0px 0px 5px;
  margin-bottom:75px;
  background:#FFFFFF;
filter:progid:DXImageTransform.Microsoft.gradient
(startColorStr:#ff0099CC,EndColorStr :#ffbbffff,GradientType:1);
}

二。用以下HIML代码发表一篇日志，置顶（可自动更新）：

<!----首页自动更新---->
<script>
<!--
var startYear = 2005;
var showCount = 15;
var d = new Date();
var currYear = d.getUTCFullYear();
for(i=currYear;i>=startYear;i--)
{
document.writeln('<iframe id="cataloghtml'+i+'" src="catalog_'+i+'.html" style="display:none"></iframe>');
}
//-->
</script>
<SCRIPT>
<!--
function showcatalog(mycategoryname,categoryname)
{
var currShowCount = 0;
var currTotalCount = 0;
myok="";
for(iyear=currYear;iyear>=startYear;iyear--)
{
currCategory = document.body.all[mycategoryname];
ol = eval("cataloghtml"+iyear+".document.body.all");
var entityDiv = null;
for(i=0;i<ol.length;i++)
{
if(ol[i].className =="entity")
{
entityDiv = ol[i];break;
}
}
ol = entityDiv.children.tags("UL");
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 ;
for(i=0;i<oLI.length;i++)
{
if(i>showCount-1-currShowCount) break;
oA = oLI[i].children(1);
s = oA.innerHTML;
myok += "<li class=myli><a href='"+oA.href+"'>"+s+"</a></li>\r\n";
}
currShowCount += i;
currTotalCount += oLI.length;
}
for(;currShowCount<showCount;currShowCount++)
myok += "<li class=myli>……</li>\r\n";
currCategory.insertAdjacentHTML("beforeend",myok);
titleDIV = currCategory.parentElement.children(0);
titleDIV.insertAdjacentHTML("beforeend","("+currTotalCount+")");
}
function showallcatalog()
{
showcatalog("mcategory1","category1");//博客栏目
showcatalog("mcategory2","category2");//博客栏目
showcatalog("mcategory3","category3");//博客栏目
showcatalog("mcategory4","category4");//博客栏目
showcatalog("mcategory5","category5");//博客栏目
showcatalog("mcategory6","category6");//博客栏目

showcatalog("mcategory3","category7");//博客栏目
showcatalog("mcategory4","category8");//博客栏目
showcatalog("mcategory5","category9");//博客栏目
showcatalog("mcategory6","category10");//博客栏目

}
//-->
</SCRIPT>
<!---------读入提取内容-----------><BODY onload=showallcatalog()>
<!---------日志排版样式----------->
<DIV>
<DIV class=mydiv1>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category1"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※博客栏目
</DIV>
<UL id=mcategory1></UL></DIV><!--结束-->
<DIV class=mydiv2>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category2"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※博客栏目
</DIV>
<UL id=mcategory2></UL></DIV></DIV><!--结束-->
<DIV>
<DIV class=mydiv3>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category3"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※心博客栏目</DIV>
<UL id=mcategory3></UL></DIV><!--结束-->
<DIV class=mydiv4>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category4"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※博客栏目</DIV>
<UL id=mcategory4></UL></DIV></DIV><!--结束-->
<DIV>
<DIV class=mydiv5>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category5"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※博客栏目</DIV>
<UL id=mcategory5></UL></DIV><!--结束-->
<DIV class=mydiv6>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category6"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※博客栏目</DIV>
<UL id=mcategory6></UL></DIV></DIV><!--结束-->
<DIV>
<DIV class=mydiv7>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category5"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※博客栏目</DIV>
<UL id=mcategory7></UL></DIV><!--结束-->
<DIV class=mydiv8>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category6"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※博客栏目</DIV>
<UL id=mcategory8></UL></DIV></DIV><!--结束--><DIV>
<DIV class=mydiv9>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category5"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※博客栏目</DIV>
<UL id=mcategory9></UL></DIV><!--结束-->
<DIV class=mydiv10>
<DIV class=mybg><A href="http://xxxxxx.bokee.com/5281934.html?category6"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※博客栏目</DIV>
<UL id=mcategory10></UL></DIV></DIV><!--结束-->
</DIV></DIV>

三。鉴于现在使用自动更新打开很慢，建议使用手动更新，代码如下：
<DIV>
<DIV class=mydiv1>
<DIV class=mybg><A href="http://silin1984.bokee.com/5259526.html?category1"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※创业文学</DIV>
<DIV class=myul>
<UL>
<LI class=myli><A href="http://silin1984.bokee.com/5314281.html">世界上最伟大的推销员</A>
<LI class=myli><A href="http://silin1984.bokee.com/4128640.html">创业者宣言 </A>
<LI class=myli><A href="http://silin1984.bokee.com/3867000.html">如果猪八戒在21世纪 </A>
<LI class=myli><A href="http://silin1984.bokee.com/3866906.html">烦透了：营销人的三陪生活 </A>
<LI class=myli><A href="http://silin1984.bokee.com/3865930.html">江湖骗术之十三枪</A>
<LI class=myli><A href="http://silin1984.bokee.com/3857260.html">老板不在，你就是老板 </A>
<LI class=myli><A href="http://silin1984.bokee.com/3851697.html">办公室里女人的秘密武器 </A>
<LI class=myli><A href="http://silin1984.bokee.com/3851685.html">失败者通病 </A>
<LI class=myli><A href="http://silin1984.bokee.com/3851678.html">职场制胜兵法:八招记心头 新人...</A>
<LI class=myli><A href="http://silin1984.bokee.com/3817732.html">网上创业的十四点建议 </A>
<LI class=myli><A href="http://silin1984.bokee.com/3817699.html">人人必读的二十个经典哲理故事</A>
<LI class=myli><A href="http://silin1984.bokee.com/3817618.html">成功格言集锦 </A>
<LI class=myli><A href="http://silin1984.bokee.com/3817502.html">中国未来商家走势 </A>
<LI class=myli><A href="http://silin1984.bokee.com/3817426.html">商人是这样炼成的? </A>
<LI class=myli><A href="http://silin1984.bokee.com/3816450.html">传销为何使大学生误入歧途不能自拔</A>
</LI></UL></DIV></DIV><!--结束-->
<DIV class=mydiv2>
<DIV class=mybg><A href="http://silin1984.bokee.com/5259526.html?category9"><IMG class=myimg alt=点击查看更多内容 src="./inc/goto.gif"></A>※时事杂谈</DIV>
<DIV class=myul>
<UL>
<LI class=myli><A href="http://silin1984.bokee.com/5519312.html">穷人太穷的论调只会强化社会阶...</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519306.html">经济学家称我国收入差距拉大不...</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519296.html">桑美已造成浙闽400万人受灾 近...</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519275.html">联合国安理会一致通过结束黎以...</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519262.html">网友建议央视改名为中国国家电视台</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519253.html">日自卫队苦练登陆战 作战区域将...</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519249.html">台湾倒扁护扁力量今日对峙 陈水...</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519245.html">全国最低工资调查</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519229.html">新义务教育法9月实施 学校不得开...</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519218.html">社会分层影响学生人生选择</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519203.html">呼唤新贫富伦理 穷大学生不能无...</A>
<LI class=myli><A href="http://silin1984.bokee.com/5519174.html">我在澳洲三年，感受到其穷人和富...</A>
<LI class=myli><A href="http://silin1984.bokee.com/5393374.html">一位女生2005高考的零分作文</A>
<LI class=myli><A href="http://silin1984.bokee.com/5259778.html">再谈穷人上不起大学是因为学费太低</A>
<LI class=myli><A href="http://silin1984.bokee.com/5259738.html">穷人上不起大学，只因学费太低</A>
</LI></UL></DIV></DIV><!--结束--></DIV>

第3-10栏重复以上代码，相应数字和链接。内容更换就行了。

【作者: 思玲妹妹】【访问统计:】【2006年08月13日 星期日 01:04】【注册】【打印】