ArticleSummary.CSS示范脚本

admin

纵排无列效果
#ArticleSummary ul li{ display:block; margin-bottom:10px; clear:both; height:100px; overflow:hidden;}
#ArticleSummary ul li .thumbs{ float:left; display:block; width:160px; height:100px;}
#ArticleSummary ul li .thumbs img{ width:150px; height:100px;}
#ArticleSummary ul li .detail{ display:block;}
#ArticleSummary ul li .detail .atext{ font-weight:bold; color:#333}
#ArticleSummary ul li .detail .intro{ line-height:20px;}
#ArticleSummary ul li .detail .enter{ display:none;}

横排一行多列效果
#ArticleSummary ul{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
#ArticleSummary ul li{ display:flex; flex-flow: column wrap; margin:0px 10px 30px 10px;}
#ArticleSummary ul li .thumbs{ height: 200px; overflow: hidden;}
#ArticleSummary ul li .thumbs img{ width:100%; height: 100%;}
#ArticleSummary ul li .detail{ display:block;}
#ArticleSummary ul li .detail .atext{ display: block; font-weight:bold; text-align: center; line-height: 2.5em;}
#ArticleSummary ul li .detail .intro{ line-height:20px;}
#ArticleSummary ul li .detail .enter{ display:none;}

admin

范例一(ito)：

CSS:
#ArticleSummary li{ height:100px; overflow:hidden; margin-bottom:20px;}
#ArticleSummary li .thumbs{ float:left; display:block; width:100px; height:100px; margin-right:30px; overflow:hidden;}
#ArticleSummary li .thumbs img{ width:100px;}
#ArticleSummary li .detail .title a{ font-size:16px;}
#ArticleSummary li .detail .intro{ color:#666;}
#ArticleSummary li .detail .intro .enter{ display:block; text-align:right;}
#ArticleSummary li .detail .intro .enter a{ display:inline-block; padding:5px 10px; background:#d8d8d8; border-radius:5px; text-transform:capitalize; color:#666;}

改进版：

#ArticleSummary li{ height:100px; overflow:hidden; margin-bottom:20px;}
#ArticleSummary li .thumbs{ float:left; display:block; width:100px; height:100px; margin-right:30px; overflow:hidden;}
#ArticleSummary li .nopic{ display:none;}
#ArticleSummary li .thumbs img{ width:100px;}
#ArticleSummary li .detail .title a{ font-size:16px;}
#ArticleSummary li .detail .intro{ color:#666;}
#ArticleSummary li .detail .intro .enter{ display:block; text-align:right;}
#ArticleSummary li .detail .intro .enter a{ display:inline-block; padding:5px 10px; background:#d8d8d8; border-radius:5px; text-transform:capitalize; color:#666;}

whstjs改进版

#ArticleSummary ul{ counter-reset:me;}
#ArticleSummary ul li{ padding-bottom:30px; margin-bottom:30px; clear:both; border-bottom:1px dotted #f0f0f0;}
#ArticleSummary ul li .thumbs{ float:left; display:block; width:160px; height:100px;}
#ArticleSummary ul li .thumbs img{ width:150px; height:100px;}
#ArticleSummary ul li .nopic{ display:none;}
#ArticleSummary ul li .detail{ display:block;}
#ArticleSummary ul li .detail .atext{ display:block; font-weight:bold; color:#333; font-size:20px; line-height:1.2em; padding-bottom:10px;}
#ArticleSummary ul li .detail .intro{ line-height:20px; color:#666;}
#ArticleSummary ul li .detail .enter{ display:none;}
#ArticleSummary ul li:before{ float:left; content:counter(me); min-width:24px; min-height:12px; counter-increment:me; background:#f8f8f8; color:#000; font-weight:bold; border-right:2px solid #f33; text-align:center; padding:2px; margin-right:30px; margin-bottom:40px;}

admin

DIV:
<div class="bg-black-1 p-b-60">
    <div class="container">$func_tabstrip(navi=tag,para=Case,title=10,disp=2,tabs=5,subimg=1,subemeo=1,mode=3,rows=3,list=5)$</div>
</div>

CSS:
<!--tag.Navigator.css-->
#tag .RowsTitle{ text-align:center; position:relative;}
#tag .RowsTitle .CLeft{ display:block; width:50%; margin:0 auto; height:40px; border-bottom:1px solid #CCC; position:absolute; z-index:80; top:100px; left:0; right:0;}
#tag .RowsTitle .CRight{ display:block; width:20px; height:40px; border-bottom:2px solid #c00; position:absolute; z-index:90; top:100px; left:50%; margin-left:-10px;}
#tag .RowsTitle .Title{ text-align:center; position:relative;}
#tag .RowsTitle .Title .cn{ position:relative; z-index:100; top:72px; font-size:24px; color:#c00; font-weight:bold; text-shadow:0px 0px 5px #fff;}
#tag .RowsTitle .Title .en{ font-family:impact; font-size:72px; opacity:.1; color:#888; text-transform:uppercase;}
<!--tag.ArticleSummary.Css-->
#ArticleSummary ul{ display: flex; flex-flow: row wrap; justify-content: space-between;}
#ArticleSummary ul li{ width: 32%; height: 350px; margin-bottom: 2em;}
#ArticleSummary ul li .thumbs{ display: block; width: 100%; height:calc(100% - 6em);}
#ArticleSummary ul li .thumbs a{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
#ArticleSummary ul li img{ padding: 0.5rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; max-width: 100%; height:100%;}
#ArticleSummary ul li .detail{ display: block; height: 5em; margin: 10px; text-align:center; overflow: hidden;}
#ArticleSummary ul li .detail .title a{ font-size:large; padding-top: 10px;}
#ArticleSummary ul li .detail .intro{font-size: x-small; color: #666;}
#ArticleSummary ul li .detail .intro .enter{ display: none;}
<!--tag.tabstrip.css-->
#TabStrip{ margin-top:18px;}
.TabNavTitle{ display:flex; flex-flow: row wrap; justify-content:center; align-items: center; text-align:center;}
.TabTitle{ display: inline-flex; margin: 5px;}
.TabTitle a { display: block; padding: 10px 20px; background:#c00; color: #fff;}
.TabNavContent{ margin-top:30px;}
.TabNavContent #ArticleSummary ul li .detail{ text-align: left;}
.TabNavContent #ArticleSummary ul li .detail .title a{ color:#fff;}
.TabNavContent #ArticleSummary ul li .detail .intro{ line-height: 1.8em;}
自适应：
@media (max-width: 1200px){
    #tag .RowsTitle .CLeft,#tag .RowsTitle .CRight{ top: 68px;}
    #tag .RowsTitle .Title .cn{ top:62px; }
    #tag .RowsTitle .Title .en{ font-size:56px;}
}
@media (max-width: 992px) {
    .p-b-60{ padding-bottom: 50px;}
}
@media (max-width: 768px) {
    .p-b-60{ padding-bottom: 40px;}
}
@media (max-width: 576px) {
    .p-b-60{ padding-bottom: 30px;}
    #tag .RowsTitle .CLeft{ width: 80%;}
}