大家都知道,ecshop的最新文章都是顯示的一列,那么怎么修改為顯示成2列,或者3列呢?其實(shí)這個(gè)很簡單,稍微修改一下CSS樣式表,就可以輕松實(shí)現(xiàn),但是很多不會網(wǎng)頁編程語言的,可能就比較吃力了,現(xiàn)在本尊就教大家怎么把最新文章分成2列,也可以舉一反三,分成3列、4列。
ECShop的最新文章庫文件是new_articles.lbi,下面我們使用編輯器打開它,千萬不要使用記事本,最好是使用Notepad++這個(gè)軟件打開編輯。下面的這個(gè)代碼是原來的,沒有修改過的。
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<div id=”mallNews”>
<div>
<h3><span>站內(nèi)快訊</span></h3>
<ul>
<!–{foreach from=$new_articles item=article name=article}–>
<li>
<span><img src=”../images/2688/010.gif”></span>
<a target=”_blank” href=”{$article.url}” title=”{$article.title|escape:html}” ><font>{$article.short_title|truncate:100:”…”:true}</font></a>
</li>
<!–{/foreach}–>
</ul>
</div>
</div>
假如我們要修改為2列,那么直接在li那里定義一下,左靠齊,50%的比例。另外還需要在ul那里定義一下高度,現(xiàn)在就修改為下面的這個(gè)。
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<div id=”mallNews”>
<div>
<h3><span>站內(nèi)快訊</span></h3>
<ul style=”height: 200px;”>
<!–{foreach from=$new_articles item=article name=article}–>
<li style=”float: left; line-height: 150%; margin: 0pt; padding: 0pt; width: 50%;”>
<span><img src=”../images/2688/010.gif”></span>
<a target=”_blank” href=”{$article.url}” title=”{$article.title|escape:html}” ><font>{$article.short_title|truncate:100:”…”:true}</font></a>
</li>
<!–{/foreach}–>
</ul>
</div>
</div>
大家可以想一想,如果要分成3列,那么只需要把width: 50%;修改為33%就可以了,當(dāng)然你自己還需要調(diào)整一下高度。
新聞熱點(diǎn)
疑難解答
圖片精選