MetInfo公共信息列表制作
来自站长百科
导航:返回上一页
本页面只以最简单示例阐述信息列表的制作,函数标签的详细使用请查阅“标签函数及参数”部分。
文字信息列表[ ]
使用标签函数制作:
结合CSS控制,可以实现如下效果:
HTML代码:
<!-- EOT; $metright=methtml_list('text','','all','time','news',$lang_maxwordtext,'red'); //$lang_maxwordtext为语言包定义参数 echo <<<EOT --> <div class="nav_x"> {$lang_News}</div> //$lang_News为语言包定义参数 <div class="index_news_list">{$metright}</div>
css代码:
.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;}
使用PHP语言制作:
结合CSS控制,可以实现如下效果:
HTML代码:
<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>
css代码:
.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;}
图片信息列表(图片新闻也可以用同样的方法实现)[ ]
结合CSS控制,可以实现如下效果:
HTML代码:
<!-- EOT; $metproduct=methtml_list('img','','com','hits','product',$lang_maxwordimg); echo <<<EOT --> <div class="index_content">{$metproduct}</div>
css代码:
.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;}
滚动图片信息列表[ ]
结合CSS控制,可以实现如下不间断循环向左效果:
HTML代码:
<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>
css代码:
.advice{ width:570px; height:150px; overflow:hidden;}