编辑“MetInfo公共信息列表制作”

<span style="border:1px solid #000; float:right; text-align:center; padding:6px;"><strong>导航：</strong>[[MetInfo模板制作#常用效果制作|返回上一页]]</span>
<div style="clear:both;"></div>
本页面只以最简单示例阐述信息列表的制作，函数标签的详细使用请查阅“标签函数及参数”部分。

==文字信息列表==
'''使用标签函数制作：'''

结合[[CSS]]控制，可以实现如下效果：
<div>
[[Image:metinfo104.png]]
</div>

[[HTML]]代码：
<pre>
<!-- 
EOT; 
$metright=methtml_list('text','','all','time','news',$lang_maxwordtext,'red'); //$lang_maxwordtext为语言包定义参数 
echo <<<EOT 
--> 
<div class="nav_x">&nbsp;{$lang_News}</div> //$lang_News为语言包定义参数 
<div class="index_news_list">{$metright}</div> 
</pre>

css代码：
<pre>
.index_news_list{ width:100%; height:auto; line-height:23px; _line-height:22px; margin:0px 0px 0px 0px; _margin:5px 0px 0px 0px;text-align:left; }
.index_news_list ul li{background:url(../list.gif) no-repeat 5px 8px; *background:url(../list.gif) no-repeat 5px 10px; _background:url(../list.gif)
 no-repeat 5px 7px; width:97%; height:23px; _height:22px; padding:0px 0px 0px 10px; position:relative;} 
.index_news_list ul li .info_updatetime{position:absolute; right:5px; top:0px;} 
.index_news_list ul li .info_class a{ color:#000066;} 
.index_news_list ul li img{ margin:5px 0px 0px 0px;} 
.index_news_list ul li font{ font-size:12px; color:#CC0000;} 
</pre>

'''使用PHP语言制作：'''

结合CSS控制，可以实现如下效果：
<div>
[[Image:metinfo105.png]]
</div>
HTML代码：
<pre>
<div class="right_top"> 
<div class="news_title"><span>{$class_index[4][name]}</span></div>  //栏目标识为4的栏目名称 
<ul class="index_newslist"> 
<!-- 
EOT; 
$i=0; 
foreach(methtml_getarray('4','com','time','') as $key=>$val){ //所属栏目标识为4的栏目中信息列表数组 
$val[title]=utf8substr($val[title], 0, $lang_newsnum); 
$i++; 
echo <<<EOT 
--> 
<li><a href="$val[url]" target="_blank" title="$val[title]">$val[title]</a> 
<span>$val[top] $val[news] $val[hot]</span></li> 
<!-- 
EOT; 
if($i>=$index[news_no])break; 
} 
echo <<<EOT 
--> 
<li class="more1"><a href="{$class_index[4][url]}" title="{$lang_more}">{$lang_more}…</a></li> 
<div style="clear:both;"></div> 
</ul> 
</div> 
</pre>

css代码： 
<pre>
.index_newslist{ width:215px; margin:0px auto;} 
.index_newslist li{ height:30px; line-height:30px;_height:10px;_line-height:15px;padding-left:5px;_padding:8px 0px;} 
.index_newslist li{ background:url(../lia.gif) repeat-x bottom left;} 
.more1{ text-align:right;} 
.more1 a{ font-family:arial;} 
.index_newslist li img{} 
.index_newslist li a{ color:#555555;} 
.index_newslist li a:hover{ text-decoration:underline; color:#0099FF;} 
</pre>

==图片信息列表（图片新闻也可以用同样的方法实现）==
结合CSS控制，可以实现如下效果：
<div>
[[Image:metinfo106.png]]
</div>
HTML代码：
<pre>
<!-- 
EOT; 
$metproduct=methtml_list('img','','com','hits','product',$lang_maxwordimg); 
echo <<<EOT 
--> 
<div class="index_content">{$metproduct}</div> 
</pre>

css代码： 
<pre>
.index_content{width:99%; height:auto; text-align:left; padding:3px; line-height:18px; font-size:12px; margin-bottom:2px; overflow:auto; } 
.index_content a{ color:#000066;} 
.index_content li{ width:200px; height:auto; overflow:hidden; margin:10px; margin-left:18px; margin-right:18px; text-align:center; 
line-height:25px; float:left;} 
</pre>

==滚动图片信息列表==
结合CSS控制，可以实现如下不间断循环向左效果：
<div>
[[Image:metinfo107.png]]
</div>
HTML代码：
<pre>
<div class="advice"> 
<TABLE cellSpacing=0 cellPadding=0 width=560 align=center border=0> 
<TBODY> 
<TR> 
<TD> 
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 560px; COLOR: #ffffff"> 
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> 
<TBODY> 
<TR> 
<TD id=demo1 vAlign=top><table height="150" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<!-- 
EOT; 
$i=0; 
foreach(methtml_getarray('all','com','time','product') as $key=>$val){ //推荐产品公告数组循环 
$val[title]=utf8substr($val[title], 0, $lang_productnum1); 
$i++; 
echo <<<EOT 
--> 
<td width="120" height="150"> 
<div style="margin:0px 5px 0px 5px;"> 
<a href="$val[url]" target="_blank" title="$val[title]"> 
<img src="$val[imgurls]" width="120px" height="110px" style="border:1px solid #CCCCCC;" alt=""/></a> 
<div style="text-align:center; width:120px; height:40px; overflow:hidden;"> 
<a href="$val[url]" target="_blank" title="$val[title]">$val[title]</a></div> 
</div> 
</td> 
<!-- 
EOT; 
if($i>=$index[product_no])break; 
} 
echo <<<EOT 
--> 
</tr> 
</table></TD> 
<TD id=demo2 vAlign=top> 
</TD></TR></TBODY></TABLE></DIV> 
</TD></TR></TBODY></TABLE></TD></TR></TABLE> 
<SCRIPT> 
var speed3=25//速度数值越大速度越慢 
var t=false; 
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML 
function Marquee(){ 
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth 
else{ 
document.getElementById("demo").scrollLeft++; 
} 
t=false; 
} 
function RMarquee(){ 
if(document.getElementById("demo").scrollLeft<=0) 
  document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth 
  else{  
  document.getElementById("demo").scrollLeft-- 
  } 
  t=true; 
} 
function clickdiv(){ 
clearInterval(MyMar) 
Marquee(); 
} 
function Rclickdiv(){ 
clearInterval(MyMar) 
RMarquee(); 
} 
var MyMar=setInterval(Marquee,speed3) 
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)} 
document.getElementById("demo").onmouseout=function() { 
if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)} 
} 
</SCRIPT> 
</div> 
</pre>

css代码： 
<pre>
.advice{ width:570px; height:150px; overflow:hidden;} 
</pre>




[[category:MetInfo]]