一、style.css 底部添加：

    /*  ====================
              首页文章分类
    ====================  */
   #new-list{
       width:748px;
      height:100％;     /* 首页文章分类高度调整  */
      float:left;
      padding:0 3px 0 0;
   }
    #new-list .new-left{
      width:246px;
      height:100％;
      float:left;
      padding:0 0 2px 0;
       overflow:hidden;
   }
    #new-list .new-center{
       width:246px;
       height:100％;
       float:left;
       margin-left:5px;
        overflow:hidden;
   }
    #new-list .new-right{
      width:246px;
      height:100％;
      float:left;
      margin-left:5px;
       overflow:hidden;
   }
   #new-list .listStyle{
       height:100％;
        overflow:hidden;
   }
    .box_3{
        border:1px solid #d4d4d4;
        background-color:#fff;
        height:200px;
  }



二、cat_articles.lbi 文件里面内容

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class="box">
<div class="box_3">
  <h3>
  <span><a style="color: #565656; text-decoration: none" href="{$articles_cat.url}"
title="{$articles_cat.name|escape:html}">{$articles_cat.name|escape:html}</a></span>
  <a href="{$articles_cat.url}"><img src="../images/more.gif" title="浏览更多" /></a>
  </h3>
  <div class="boxCenterList RelaArticle">
  <!--{foreach from=$articles item=article}-->
  <a href="{$article.url}" title="{$article.title|escape:html}">{$article.short_title|truncate:16:"...":true}</a><br />
  <!--{/foreach}-->
  </div>
</div>
</div>
<div class="blank5"></div>


三、index.dwt 右边合适位置添加：

搜索

  </div>
  <!--right end-->

在前面添加下面的代码：


<!--主区域文章分类 start-->
<div id="new-list">
<div class="new-left">
<!-- TemplateBeginEditable name="主区域左侧文章分类" -->
<!-- #BeginLibraryItem "/library/cat_articles.lbi" -->
<div class="box">
<div class="box_3">
  <h3>
  <span><a style="color: #565656; text-decoration: none" href="{$articles_cat.url}"
title="{$articles_cat.name|escape:html}">{$articles_cat.name|escape:html}</a></span>
  <a href="{$articles_cat.url}"><img src="../images/more.gif" title="浏览更多" /></a>
  </h3>
  <div class="boxCenterList RelaArticle">
  <!--{foreach from=$articles item=article}-->
  <a href="{$article.url}" title="{$article.title|escape:html}">{$article.short_title|truncate:16:"...":true}</a><br />
  <!--{/foreach}-->
  </div>
</div>
</div>
<div class="blank5"></div>
<!-- #EndLibraryItem -->
<!-- TemplateEndEditable -->
</div>
<div class="new-center">
<!-- TemplateBeginEditable name="主区域中部文章分类" -->
<!-- #BeginLibraryItem "/library/cat_articles.lbi" -->
<div class="box">
<div class="box_3">
  <h3>
  <span><a style="color: #565656; text-decoration: none" href="{$articles_cat.url}"
title="{$articles_cat.name|escape:html}">{$articles_cat.name|escape:html}</a></span>
  <a href="{$articles_cat.url}"><img src="../images/more.gif" title="浏览更多" /></a>
  </h3>
  <div class="boxCenterList RelaArticle">
  <!--{foreach from=$articles item=article}-->
  <a href="{$article.url}" title="{$article.title|escape:html}">{$article.short_title|truncate:16:"...":true}</a><br />
  <!--{/foreach}-->
  </div>
</div>
</div>
<div class="blank5"></div>
<!-- #EndLibraryItem -->
<!-- TemplateEndEditable -->
</div>
<div class="new-right">
<!-- TemplateBeginEditable name="主区域右侧文章分类" -->
<!-- #BeginLibraryItem "/library/cat_articles.lbi" -->
<div class="box">
<div class="box_3">
  <h3>
  <span><a style="color: #565656; text-decoration: none" href="{$articles_cat.url}"
title="{$articles_cat.name|escape:html}">{$articles_cat.name|escape:html}</a></span>
  <a href="{$articles_cat.url}"><img src="../images/more.gif" title="浏览更多" /></a>
  </h3>
  <div class="boxCenterList RelaArticle">
  <!--{foreach from=$articles item=article}-->
  <a href="{$article.url}" title="{$article.title|escape:html}">{$article.short_title|truncate:16:"...":true}</a><br />
  <!--{/foreach}-->
  </div>
</div>
</div>
<div class="blank5"></div>
<!-- #EndLibraryItem -->
<!-- TemplateEndEditable -->
</div>
</div>
<!--主区域文章分类 END-->
四、后台模板设置，指定文章分类位置、数量（数量推荐为 8 ）。