MetInfo文章模块列表制作

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

标题信息列表

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

HTML代码：

 
$metnewslist

css代码：



.news_list{ width:100%; height:auto; overflow:auto; line-height:25px; text-align:center;} 

.news_list ul .news_list_title{ color:#FF6600; background:none;} 

.news_list ul li .info_class{ color:#000099;} 

.news_list 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; } 

.news_list ul li .info_updatetime{ position:absolute; right:5px; top:0px;} 

.news_list ul li a{color:#2F2F2F;} 

.news_list ul li .info_hits{ position:absolute; right:100px; top:0px; text-align:center; width:60px;font-size:13px;} 

.news_list ul li font{ font-size:12px; color:#FF3300;} 

.news_list ul li img{ margin:5px 0px 0px 0px;}

图片信息列表

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

HTML代码：

 
$metnewslist

css代码：



.news_list1{ width:100%; height:auto; overflow:auto; line-height:25px; text-align:center;} 

.news_list1 ul li .info_class{ color:#000099; width:auto; float:left;} 

.news_list1 ul li .info_img{ float:left; width:100px; height:100px; margin:5px;} 

.news_list1 ul li .info_img img{ width:100px; height:100px; border:1px solid #F7F7F7; } 

.news_list1 ul li .info_title{ color:#040404; font-weight:bold; float:left; width:580px; } 

.news_list1 ul li .info_description{ float:left; width:660px; line-height:18px; } 

.news_list1 ul li{ width:98%; height:auto; margin:auto; list-style:none; text-align:left; overflow:hidden; 

border-bottom:1px dashed #D9D9D9; position:relative; padding:0px 0px 0px 10px; } 

.news_list1 ul li .info_updatetime{ position:absolute; left:120px; bottom:0px; color:#858585;} 

.news_list1 ul li a{color:#2F2F2F;} 

.news_list1 ul li .info_hits{ font-size:13px; position:absolute; left:300px; bottom:0px; 

text-align:center; color:#858585; width:100px;} 

.news_list1 ul li .info_hits font{ font-size:12px; color:#FF3300;} 

.news_list1 ul li .info_detail{ position:absolute; color:#003399; font-weight:bold; right:20px; bottom:0px;} 

.news_list1 ul li .info_detail a{ color:#003399;}

带简短描述信息列表

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

HTML代码：

 
$metnewslist

css代码：



.news_list2{ width:100%; height:auto; overflow:auto; line-height:25px; text-align:center;} 

.news_list2 ul li .info_class{ color:#666666; font-weight:bold; margin:0px 5px 0px 0px; width:auto; float:left;} 

.news_list2 ul li .info_title{ color:#040404; font-weight:bold; float:left; width:680px; } 

.news_list2 ul li .info_description{ float:left; width:760px; color:#9C9C9C; line-height:18px; } 

.news_list2 ul li .info_description a{ color:#9C9C9C;} 

.news_list2 ul li{ width:98%; height:90px; margin:auto; list-style:none; text-align:left; overflow:hidden; 

border-bottom:1px dashed #D9D9D9; position:relative; padding:0px 0px 0px 10px; } 

.news_list2 ul li .info_updatetime{ position:absolute; left:10px; bottom:0px; color:#858585;} 

.news_list2 ul li a{color:#2F2F2F;} 

.news_list2 ul li .info_hits{ font-size:13px; position:absolute; left:160px; bottom:0px; text-align:center; color:#858585; width:100px;}

.news_list2 ul li .info_hits font{ font-size:12px; color:#FF3300;} 

.news_list2 ul li .info_detail{ position:absolute; font-weight:bold; right:20px; bottom:0px;} 

.news_list2 ul li .info_detail a{color:#003399;}

category:MetInfo