ArticleList.CSS示范脚本

admin

弘帝ZHG
$func_article(navi=Nav,para=News,rows=6,len=22,list=1,date=5,more=more.gif)$

弘帝CSS
#ArticleList ul li .Article{ display:flex; flex-flow: row nowrap; justify-content: space-between; padding-top:5px; padding-bottom: 5px;}
#ArticleList ul li:hover{ background:#f9f9f9; margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px;}
#ArticleList ul li .title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#ArticleList ul li .title a{ display: block; height: 100%;}
#ArticleList ul li .title a::before{ display: inline-block; content: '\f0da'; font-size: 8px; vertical-align:middle; padding-bottom: 2px;}
.LongDate,.ShortDate{ white-space: nowrap;}

.Log{ display:block; color:#aaa;}

网站从此不再需要动大脑，只需复制粘贴以上代码完成网站，弘帝建站让建站变得简单。

弘帝与您一起见证：努力打造全国最优秀的免费的企业智能建站系统的过程，弘帝系统安全，强大，免费，终生升级，模板全部免费下载。

admin

DIV：
$func_tabstrip(disp=2,tabs=3,para=News,summ=3,pics=6,len=28,rows=12,more=morewhiteplus.gif)$
CSS：
#ArticleList .app .thumbs{ float:left; display:block; margin-right:10px;}
#ArticleList .app .thumbs img{ width:198px; height:155px;}
#ArticleList .app .detail{ height:158px; overflow:hidden;}
#ArticleList .app .detail .title a{ font-size:14px; font-weight:bold;}
JS：
<script type="text/javascript">
jQuery(".news #Box0 ul").before("<li class=\"app\"><div class=\"num\"></div><div class=\"content\"></div></li>");
var len=jQuery(".news #Box0 .Summary").length;
for(var i=0;i<len;i++){jQuery(".news #Box0 .app .num").append("<span>"+(i+1)+"</span>");}
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .app .content").html(jQuery(".news #Box0 .Summary:eq(0)").html());
jQuery(".news #Box0 .app").css("position","relative");
jQuery(".news #Box0 .app .num").css({"position":"absolute","z-index":"0","bottom":"10px","left":"69px"})
jQuery(".news #Box0 .app .num span").css({"display":"inline-block","background":"#c00","color":"#fff","margin":"2px","line-height":"14px","padding":"0 5px","cursor":"pointer"});
jQuery(".news .num span").click(function(){
var cur=jQuery(this).html();
jQuery(".news #Box0 .content").hide();
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .content").html(jQuery(".news #Box0 .Summary:eq("+(cur-1)+")").html());
jQuery(".news #Box0 .content").show();
})
</script>
参考案例whjsrcb图样


改动版本（去除数字，当前背景为桔色，按先后顺序依次轮换）：
JS：
jQuery(".news #Box0 ul").before("<li class=\"app\"><div class=\"num\"></div><div class=\"content\"></div></li>");
var len=jQuery(".news #Box0 .Summary").length;
for(var i=0;i<len;i++){jQuery(".news #Box0 .app .num").append("<span> </span>");}
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .app .content").html(jQuery(".news #Box0 .Summary:eq(0)").html());
jQuery(".news #Box0 .app").css("position","relative");
jQuery(".news #Box0 .app .num").css({"position":"absolute","z-index":"0","bottom":"2px","left":"86px"})
jQuery(".news #Box0 .app .num span").css({"display":"inline-block","background":"#c00","color":"#fff","margin":"2px","width":"14px","height":"14px","cursor":"pointer"});
jQuery(".news #Box0 .app .num span:eq(0)").css("background","#f60")
var cur=0;
function trig(){if(cur==6)cur=0;jQuery(".news .num span:eq("+cur+")").trigger("click");cur=cur+1;}
setInterval("trig()",5000);
jQuery(".news .num span").click(function(){
cur=jQuery(this).index();
jQuery(".news .num span").css("background","#c00");
jQuery(this).css("background","#f60");
jQuery(".news #Box0 .content").hide();
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .content").html(jQuery(".news #Box0 .Summary:eq("+(cur)+")").html());
jQuery(".news #Box0 .content").show();
})

admin

DIV:
<div class="news">$func_article(navi=Navigator,para=News,pics=1,summ=3,len=25,rows=6,date=3,list=1,more=more.gif)$</div>

CSS:
#Navigator .RowsTitle {height: 30px; margin-bottom:10px; border-bottom: 1px solid #E2E2E2;}
#Navigator .RowsTitle .Title{float: left; height:28px; font-size: 16px; background:url(bg_title_1.png) no-repeat 40px 30px; padding-bottom:8px; }
#Navigator .RowsTitle .More{float: right;height:20px; margin-top:5px;}
#Navigator .RowsTitle .More a:hover{border-bottom: 1px solid #E2E2E2;}
#Navigator .Content #ArticleSummary .thumbs{ float: left;}
#Navigator .Content #ArticleSummary .detail{float: right;}
.Subject {width: 1000px; margin:15px auto;}

.news{float: left; width: 588px; height:320px;}
.news #Navigator .RowsTitle .Title .cn{height:27px; line-height:27px; font-size:16px;}
.news #Navigator .Content{ height:200px;}
.news li{ clear:both;}
.news .thumbs{ float:left; margin-top:5px; width:110px; height:75px; margin-bottom:18px; }
.news .thumbs img{ max-width:110px; max-height:75px; background:url(speech.png);}
.news .detail{ float:right; width:450px; height:90px; overflow:hidden;}
.news .detail a{ font-size:16px; font-weight:bold; color:#E0251C;}
.news .detail a:hover{ border-bottom:1px solid #E0251C;}
.news .Content #ArticleList{ padding:10px;}
.news .Content .Article{ width:568px; height:28px; border-bottom:1px dashed #E3E3E3; line-height:28px;}
.news .Content .Article .title { text-indent:20px; line-height:28px; height:28px; float:left; color:#575757; background:url(icon6.png) no-repeat 0 6px;}
.news .Content .Article .title a:hover{ border-bottom:1px solid #575757;}
.news .Content .Article .LongDate{ float:right; padding-top:5px;}

admin

DIV:
<div class="news">$func_article(navi=Navigator,para=News,rows=4,summ=3,pics=1,date=101,title=10,list=4)$</div>
CSS:
#ArticleIntro ul li{ text-align:left; margin-bottom:20px;}
#ArticleIntro ul li .detail{ margin-bottom:20px;}
#ArticleIntro ul li .detail .title a{ display:block; font-size:16px; font-weight:bold; line-height:1.2em;}
#ArticleIntro ul li .detail .intro{ margin-top:10px; line-height:1.5em; color:#888; height: 40px; overflow: hidden;}
.LongDatePlus{ float:left; padding:8px; color:#fff; margin-right:20px; background:#000; text-align:center;}
.LongDatePlus .dd{ display:block; font-size:24px; font-weight:bold; line-height:28px;}

.news #ArticleIntro .Summary{ float:left; width:500px; margin-right:50px;}
.news #ArticleIntro .Summary .thumbs{ width:100%; height:220px; overflow:hidden;}
.news #ArticleIntro .Summary .thumbs a{ display:block;}
.news #ArticleIntro .Summary .thumbs img{ width:500px; max-width:inherit; max-height:inherit;}
.news #ArticleIntro .Summary .detail{ margin-top:10px;}
.news #ArticleIntro .Summary .detail .title a{ display:block; font-size:18px; font-weight:bold;}
.news #ArticleIntro .enter{ display:none;}

模板：xyd，案例：whxyd


DIV:
<div class="container p-t-b-60"><div class="news">$func_article(navi=epen,para=News,rows=4,summ=3,pics=1,date=101,title=10,memo=1,list=4,more=MORE +,show=title|memo|content|more)$</div></div>
CSS:
#ArticleIntro ul{ display:inline-block; width: 100%;}
#ArticleIntro ul li{ text-align:left; margin-bottom:20px;}
#ArticleIntro ul li .thumbs{ width:120px; height:120px;}
#ArticleIntro ul li .thumbs img{ max-width:120px; max-height:120px;}
#ArticleIntro ul li .detail .title a{ display:block; font-size:16px; font-weight:bold; line-height:22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#ArticleIntro ul li .detail .intro{ margin-top:10px; line-height:1.5em; height:42px; color:#666; overflow: hidden;}
#ArticleIntro ul li .detail .intro .enter{ float: right; display:none; height:100%; line-height:100%;}
#ArticleIntro ul li .detail .intro .enter a{ display: block; line-height: 100%; text-transform:uppercase;}
.LongDatePlus{ float:left; padding:8px; border:2px solid #948B7C; margin-right:20px; background:#B6A88D; text-align:center;}
.LongDatePlus .dd{ display:block; font-size:24px; font-weight:bold; line-height:28px;}

.news #ArticleIntro .Summary{ float:left; width:48%; margin-right:50px;}
.news #ArticleIntro .Summary .thumbs{ width:100%; height:236px; overflow:hidden;}
.news #ArticleIntro .Summary .thumbs a{ display:block;}
.news #ArticleIntro .Summary .thumbs img{ width:100%; max-width:inherit; max-height:inherit;}
.news #ArticleIntro .Summary .detail{ margin-top:10px;}
.news #ArticleIntro .Summary .detail .title a{ display:block; font-size:18px; font-weight:bold;}
.news #ArticleIntro .enter{ display:none;}

模板：epen

admin

图片自动轮换脚本：当鼠标没有HOVER时，左侧大图随右侧文章列表顺序每隔3秒进行轮换，如下图：

模板：ssbingo

DIV：<div class="act">$func_article(navi=Navigator,para=Works,rows=6,list=2,title=20,len=22,more=plus.png)$</div>

CSS：
.act #Navigator .RowsTitle{ border-bottom:2px solid #ddd;}
.act ul{ display:inline-block; width:100%; font-size:0; position:relative;}
.act #ArticleView li{ float:none; display:block; width:auto; height:auto; border:0; margin:0; margin-left:368px; box-shadow:none; padding:0;}
.act #ArticleView li .thumbs{ float:left; display:none; width:340px; height:300px; position:absolute; top:0; left:0;}
.act #ArticleView li:nth-child(1) .thumbs{display:block;}
.act #ArticleView .thumbs img{ width:340px; height:228px; max-height:none; max-width:none;}
.act #ArticleView .atext{ display:block; text-align:left; font-size:16px; line-height:38px; padding-left:10px;}
.act #ArticleView .atext:hover{ background:#ccc; line-height:37px; border-bottom:1px solid #ccc;}

JS：
$(document).ready(function(e) {activity();});
function activity(){
$(".act ul li").hover(function(){$(".act ul li .thumbs").css("display","none");$(".thumbs",this).css("display","block")});
}
var t=0;
setInterval(act,3000);
function act(){
$(".act #ArticleView .atext").eq(t).trigger('mouseover');
if(t<5){t+=1;}else{t=0;}
}

admin

DIV:
<div class="news">$func_article(para=News,rows=8,title=20,summ=3,len=22,date=3,more=MORE+)$</div>
CSS:
.news .RowsTitle{margin-bottom: 15px;}
.news .RowsTitle .Title{display: inline-block; width: 320px;}
.news .RowsTitle .Title  .en{float: left; font-size: 24px; line-height: 1.5em; padding-right: 10px;}
.news .RowsTitle .More{float: right; margin-top: 3px;}
.news .RowsTitle .More a{display: block; line-height: 30px; background: #00568E; color:#fff; width: 80px; text-align: center;}
#ArticleList ul li{padding-bottom: 5px; }
#ArticleList ul li .Article i{margin-right: 5px;}
#ArticleList ul li .title a{ font-size: 14px;}
#ArticleList ul li.Summary{height: 97px; overflow: hidden; padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px dotted #eee;}
#ArticleList ul li.Summary .title a{font-size: 16px; color: #00568E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;font-weight: bold;}
#ArticleList ul li.Summary .intro{line-height: 2em; color: #888; height: 68px; overflow: hidden;}
#ArticleList ul li .thumbs{ float:left; display:block; width:130px; height:90px; overflow:hidden; margin-right:10px; margin-top: 7px;}
#ArticleList ul li .thumbs img{ width:100%;}
.LongDate{float: right;}

特别提示：
#ArticleList ul li .Article i{为新闻列表图标，下面是由CSS+JS实现图标}
JS：
$("#ArticleList .Article").prepend("<i class='fa fa-lock'></i>");
前提条件：
1、必须先行调用jquery
2、css必须先@import "font-awesome.min.css";
3、必须具备fonts字体，具体参见模板xyql，案例xinyi-ql