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%;}
}

admin

示例：



DIV：
<div class="news container-xxl text-center bg-longdateplus-fst longdateplus-gray-100 margin-y-4 roll">
    $func_article(navi=nav,para=News,rows=4,memo=1,title=11,list=5)$
</div>


CSS：
.news {
    .nopic {
        display: inherit;
    }

    ul {
        position: relative;

        li {
            margin-bottom: 20px !important;

            &:last-child {
                margin-bottom: 0 !important;
            }

            .thumbs {
                display: flex;
                flex: 1 1 auto !important;
                align-items: center;
                justify-content: center;
                margin-right: 30px !important;
                max-width: 100% !important;
                max-height: none !important;
                aspect-ratio: 5 / 3;
                overflow: hidden;

                a {
                    display: flex;
                    width: 100%;
                    height: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

            }

            .detail {
                display: flex;
                flex-flow: column wrap;
                text-align: left;

                .title a {
                    font-size: 1.8rem !important;
                }

                .intro {
                    color: $gray-800;
                }
            }

            @include media-breakpoint-up(lg) {
                padding-left: 45%;

                &:nth-child(1) {
                    flex-flow: column nowrap !important;
                    padding-left: 0;
                    width: calc(45% - 50px);
                    top: 0;
                    left: 0;
                    height: 100%;
                    margin-bottom: 0 !important;
                    position: absolute !important;
                    z-index: 10;

                    .thumbs {
                        margin-bottom: 20px;
                        aspect-ratio: auto;
                        margin-right: 0 !important;
                        flex-grow: 1;
                    }

                    .detail{
                        display: flex;
                        flex: 0 1 auto!important;
                    }
                }
            }

        }
    }
}


JS:
无