今天BTV导航网的小编为你讲一下如何将ECShop的最新文章分成多列显示相关的内容。
大家都知道,ecshop的最新文章都是显示的一列,那么怎么修改为显示成2列,或者3列呢?其实这个很简单,稍微修改一下CSS样式表,就可以轻松实现,但是很多不会网页编程语言的,可能就比较吃力了,现在本尊就教大家怎么把最新文章分成2列,也可以举一反三,分成3列、4列。
ECShop的最新文章库文件是new_articles.lbi,下面我们使用编辑器打开它,千万不要使用记事本,最好是使用Notepad++这个软件打开编辑。下面的这个代码是原来的,没有修改过的。
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<div id=”mallNews”>
<div>
<h3><span>站内快讯</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那里定义一下高度,现在就修改为下面的这个。
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<div id=”mallNews”>
<div>
<h3><span>站内快讯</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%就可以了,当然你自己还需要调整一下高度。
|
通过对如何将ECShop的最新文章分成多列显示的详细介绍,希望对你有所帮助,我们提供了更多和如何将ECShop的最新文章分成多列显示类似的相关内容推荐,可以你更全面的帮助你解决问题。我们BTV85网址导航还提供网址收录服务,你可以注册提交你的网站信息,帮你引导搜索引擎蜘蛛,同时还有网站SEO优化交流微信群,里面很多SEO高手和大咖,加友链,可以免费进群。