效果展示

 

 

第一步，增加公共模板变量  [!--temp.listnews--]

 

 

代码如下：

<div class="newsbox">
[e:loop={"select * from [!db.pre!]enewsclass where classid in (1,2,3,4)  order by myorder asc ",0,24,0}]
<?php
$classurl=sys_ReturnBqClassname($bqr,9);//取得栏目地址
?>
      <section>
        <div class="news">
          <h2 class="newstitle"><span><a href="<?=$classurl?>"  target="_blank">更多</a></span><b><?=$bqr[classname]?></b></h2>
          <ul>
<?php
//取得该分类下的最新数据
    $newbook=$empire->query("select * from  {$dbtbpre}ecms_news  where classid =".$bqr[classid]." order by newstime desc limit 8"); // 8为显示行数
    while($r=$empire->fetch($newbook)) {
    ?>
<li><a href="<?=sys_ReturnBqTitleLink($r)?>" target="_blank"><span><?=date('Y-m-d',$r[newstime])?></span><?=DoTitleFont($r[titlefont],$r[title])?></a> </li>
    <?php
     }
    ?>
          </ul>
        </div>
      </section>
       [/e:loop]  
</div>
 

注意：将括号内数字(1,2,3,4) 修改成您网站终级栏目相对应的ID，最好是2的倍数

第二步，将 [!--temp.listnews--] 复制，粘贴到首页模板

第三步，添加css，修改 skin/jxhx/css/base.css

/*newsbox*/
.newsbox {overflow: hidden;margin-bottom: 10px;}
.newsbox section {width: 49.5%;float: left;margin-bottom: 10px;}
.newsbox section:nth-child(odd){ float:right}
.newsbox .news {background: #fff;border: 1px solid #E1E1E1;}
.newstitle { line-height: 40px; font-size: 15px; border-bottom: 1px solid #E1E1E1; background: #F8F8F8 url(../images/newslist.png) no-repeat left 14px center; padding: 0 20px 0 46px; font-weight: normal }
.newstitle span { float: right; font-size: 14px }
.newstitle span a { color: #666 }
.newstitle b { display: block; border-left: 1px solid #E1E1E1; padding-left: 10px }
.newsbox .news ul { padding: 10px }
.newsbox .news ul li { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 28px; width: 96%; line-height: 28px; font-size: 14px; background: url(../images/li.png) no-repeat left center; padding-left: 15px; }
.newsbox .news ul li span { float: right; color: #999; font-size: 12px; margin-left: 20px }
.newsbox .news ul li a:hover { color: #09B1B9; }
 

第四步，上传图片 li.jpg , newslist.png 到 skin/jxhx/images/

 

前端代码展示：

    <div class="newsbox">
  
 
      <section>
        <div class="news">
          <h2 class="newstitle"><span><a href="/news/china/"  target="_blank">更多</a></span><b>国内新闻</b></h2>
          <ul>
<li><a href="/news/china/2012-12-10/69.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/china/2019-03-05/79.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/china/2019-03-05/80.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/china/2019-03-05/81.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/china/2019-03-05/82.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/china/2019-03-05/83.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/china/2019-03-05/84.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/china/2019-03-05/85.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
              </ul>
        </div>
      </section>
 
      <section>
        <div class="news">
          <h2 class="newstitle"><span><a href="/news/world/"  target="_blank">更多</a></span><b>国际新闻</b></h2>
          <ul>
<li><a href="/news/world/2012-12-10/72.html" target="_blank"><span>2012-12-10</span>中国紧急援助物资运抵缅甸仰光(组图)</a> </li>
    <li><a href="/news/world/2012-12-10/70.html" target="_blank"><span>2012-12-10</span>俄罗斯第三任总统梅德韦杰夫宣誓就职</a> </li>
    <li><a href="/news/world/2012-12-10/15.html" target="_blank"><span>2012-12-10</span>中国紧急援助物资运抵缅甸仰光(组图)</a> </li>
    <li><a href="/news/world/2012-12-10/14.html" target="_blank"><span>2012-12-10</span>印度成功试射一枚“烈火－3”型导弹</a> </li>
    <li><a href="/news/world/2012-12-10/13.html" target="_blank"><span>2012-12-10</span>马来红新月会宣布将向缅甸派出救灾小组</a> </li>
    <li><a href="/news/world/2012-12-10/12.html" target="_blank"><span>2012-12-10</span>爱尔兰议会投票推举布赖恩-考恩为新政府总理</a> </li>
    <li><a href="/news/world/2012-12-10/11.html" target="_blank"><span>2012-12-10</span>两名日本女游客在也门被部落武装人员绑架</a> </li>
    <li><a href="/news/world/2012-12-10/10.html" target="_blank"><span>2012-12-10</span>加拿大一公寓楼发生火灾3人丧生数十人受伤</a> </li>
              </ul>
        </div>
      </section>
 
      <section>
        <div class="news">
          <h2 class="newstitle"><span><a href="/news/ent/"  target="_blank">更多</a></span><b>娱乐新闻</b></h2>
          <ul>
<li><a href="/news/ent/2012-12-10/76.html" target="_blank"><span>2012-12-10</span>“最美清洁工”原是《赤壁》宫女</a> </li>
    <li><a href="/news/ent/2012-12-10/75.html" target="_blank"><span>2012-12-10</span>尹馨大胆亮相《男人装》 嫩肤美腿勾人魂</a> </li>
    <li><a href="/news/ent/2012-12-10/74.html" target="_blank"><span>2012-12-10</span>传张艺谋因执导奥运身价涨5倍</a> </li>
    <li><a href="/news/ent/2012-12-10/73.html" target="_blank"><span>2012-12-10</span>张曼玉广告写真花絮曝光 流露优雅从容</a> </li>
    <li><a href="/news/ent/2019-03-07/111.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/ent/2019-03-07/112.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/ent/2019-03-07/113.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/ent/2019-03-07/114.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
              </ul>
        </div>
      </section>
 
      <section>
        <div class="news">
          <h2 class="newstitle"><span><a href="/news/sports/"  target="_blank">更多</a></span><b>体育新闻</b></h2>
          <ul>
<li><a href="/news/sports/2012-12-10/78.html" target="_blank"><span>2012-12-10</span>中国男乒第16次捧起斯韦思林杯</a> </li>
    <li><a href="/news/sports/2012-12-10/77.html" target="_blank"><span>2012-12-10</span>科比专为大场面而生</a> </li>
    <li><a href="/news/sports/2012-12-10/71.html" target="_blank"><span>2012-12-10</span>奥运圣火成功登顶珠峰</a> </li>
    <li><a href="/news/sports/2019-03-07/126.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/sports/2019-03-07/127.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/sports/2019-03-07/128.html" target="_blank"><span>2012-12-10</span>标题：广东丹霞山发现巨型&quot;青铜剑&quot;(组图)</a> </li>
    <li><a href="/news/sports/2019-03-07/125.html" target="_blank"><span>2012-12-10</span>驻日大使崔天凯:胡锦涛主席访日有三点值得关注</a> </li>
    <li><a href="/news/sports/2019-03-07/124.html" target="_blank"><span>2012-12-10</span>杭州湾跨海大桥日均车流量逾10万(组图)</a> </li>
              </ul>
        </div>
      </section>
 
         
</div>