MetInfo产品模块列表制作

导航：返回上一页

本页面只以最简单示例阐述信息列表的制作，函数标签的详细使用请查阅“标签函数及参数”部分。

带参数及图片的产品列表

结合CSS控制，可以实现如下效果：

HTML代码：

<!-- 
EOT; 
$met_product=methtml_product('img','all','','4','1','1','1','1'); 
echo <<<EOT 
--> 
<div class="product1">$met_product</div> 

css代码：

.product1{ width:100%; height:auto; overflow:auto; line-height:26px; text-align:center;} 
.product1 ul .product_list_title{ color:#FF6600; background:none; width:98%; height:28px; list-style:none; } 
.product1 ul li{ width:98%; height:auto; margin:auto; text-align:left; overflow:hidden; border-bottom:1px dashed #D9D9D9; position:relative;
                padding:0px 0px 5px 10px; list-style:none; } 
.product1 ul li a{color:#2F2F2F;} 
.product1 ul li img{ margin:5px 0px 0px 0px;} 
.product1 ul li .info_img{ width:auto; height:160px; overflow:hidden; float:left;margin:5px 10px 5px 0px; } 
.product1 ul li .info_img img{_width:150px; max-width:150px; max-height:150px; border:1px solid #F3F3F3;} 
.product1 ul li .info_class{ width:auto; height:auto; color:#000099; float:left;} 
.product1 ul li .info_title{ width:610px; font-weight:bold; float:left; margin:5px 0px 0px 0px;} 
.product1 ul li .info_title a{ color:#000099;} 
.product1 ul li .info_para1{ width:610px; color:#666666; float:left; text-align:left;} 
.product1 ul li .info_para2{ width:610px; color:#666666; float:left; text-align:left;} 
.product1 ul li .info_para3{ width:610px; float:left; text-align:left; color:#666666;} 
.product1 ul li .info_para4{ width:610px; float:left; text-align:left; color:#CC0000; font-weight:bold;} 
.product1 ul li .info_para4 b{color:#666666;} 
.product1 ul li .info_updatetime{ width:160px; position:absolute; left:170px; bottom:2px; text-align:left;} 
.product1 ul li .info_hits{ width:100px; position:absolute; left:420px; bottom: 2px; text-align:left;} 
.product1 ul li .info_hits font{ font-size:12px; color:#FF6600;} 
.product1 ul li .info_detail{ width:60px; position:absolute; text-align:center; right:80px; bottom:2px; font-weight:bold; color:#CC3300;
                             background:none;} 
.product1 ul li .info_detail a{color:#CC3300;} 
.product1 ul li .info_feedback{ width:60px; position:absolute; text-align:center; right:5px; bottom:2px; font-weight:bold; color:#0000FF;
                               background:none;} 
.product1 ul li .info_feedback a{color:#0000FF;} 

简洁图片信息列表

结合CSS控制，可以实现如下效果：

HTML代码：

<!-- 
EOT; 
$met_product=methtml_product('img','all','','0'); 
echo <<<EOT 
--> 
<div class="product2">$met_product</div> 

css代码：

.product2{ width:100%; height:auto; overflow:auto; line-height:25px; text-align:center;} 
.product2 ul li{ width:23%; height:auto; float:left; margin:10px auto; overflow:hidden; padding:0px 0px 5px 10px; list-style:none; } 
.product2 ul li a{color:#2F2F2F;} 
.product2 ul li .info_img{ width:auto; height:auto; margin:5px 10px 5px 0px; } 
.product2 ul li .info_img img{ width:150px; height:150px; border:1px solid #F3F3F3;} 
.product2 ul li .info_title{ width:100%; text-align:center; float:left; margin:5px 0px 0px 0px;} 

标题及参数描述信息列表

结合CSS控制，可以实现如下效果：

HTML代码：

<!-- 
EOT; 
$met_product=methtml_product('text','all','','4','1','1','1','1'); 
echo <<<EOT 
--> 
<div class="product">$met_product</div> 

css代码：

.product{ width:100%; height:auto; overflow:auto; line-height:25px; text-align:center;} 
.product ul .product_list_title{color:#FF6600; background:none; width:98%; height:25px; list-style:none; } 
.product ul li{ width:98%; height:auto; _height:25px; margin:auto; text-align:left; overflow:hidden; background:url(../list.gif) no-repeat 5px 8px;
               *background:url(../list.gif) no-repeat 5px 10px; _background:url(../list.gif) no-repeat 5px 7px; border-bottom:1px dashed #D9D9D9;
               position:relative; padding:0px 0px 0px 10px; list-style:none; } 
.product ul li a{color:#2F2F2F;} 
.product ul li img{ margin:5px 0px 0px 0px;} 
.product ul li .info_class{ width:auto; height:auto; color:#000099; float:left;} 
.product ul li .info_title{ float:left;} 
.product ul li .info_para1{ width:60px; position:absolute; right:440px; top:0px; text-align:left;} 
.product ul li .info_para2{ width:60px; position:absolute; right:380px; top:0px; text-align:left;} 
.product ul li .info_para3{ width:120px; position:absolute; right:280px; top:0px; text-align:left;} 
.product ul li .info_updatetime{ width:80px; position:absolute; right:140px; top:0px; text-align:left;} 
.product ul li .info_hits{ width:70px; position:absolute; right:220px; top:0px; text-align:center;} 
.product ul li .info_hits font{ font-size:12px; color:#FF6600;} 
.product ul li .info_detail{ width:60px; position:absolute; text-align:center; right:80px; top:0px; color:#CC3300; background:none;} 
.product ul li .info_feedback{ width:60px; position:absolute; text-align:center; right:5px; top:0px; color:#0000FF; background:none;}