【Article】ArticleView版块设计示范脚本

admin

列出常见的多款方案CSS代码，直接复制相应的方案，对width,height等稍作修改即可使用，弘帝建站系统助您快速建站。

方案一：文章缩略列表 保持图片长宽比，并且保证图片水平垂直居中，通过IE/Chrome验证
#ArticleView ul{ margin:0px; padding:0px; height:auto; list-style-type:none; display:block;}
#ArticleView ul li{ float:left; display:block; width:179px; height:170px; margin:2px; overflow:hidden; border:1px solid #efefef;}
#ArticleView ul li .thumbs{ width:179px; height:148px; display:table-cell; text-align:center; vertical-align:middle; *position:relative; *vertical-align:baseline;}
#ArticleView ul li .thumbs .middle{ *position:absolute; *top:50%; *left:50%;}
#ArticleView ul li .thumbs a{ display:inline-block; border:1px solid #dfdfdf; *float:left; *display:block; *line-height:1em; *position:relative; *top:-50%; *left:-50%;}
#ArticleView ul li .thumbs a:hover{ border:1px solid #888888;}
#ArticleView ul li .thumbs img{ border:0px; max-width:177px; max-height:148px;}
#ArticleView ul li .atext{ border:0; display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; clear:both;}

方案一简化(案例：模板hl)
#ArticleView ul{ margin:0px; padding:0px; height:auto; list-style-type:none; display:block;}
#ArticleView ul li{ float:left; display:block; width:179px; height:170px; margin:8px; overflow:hidden; border:1px solid #efefef; padding:10px;}
#ArticleView ul li .thumbs{ width:179px; height:148px; display:table-cell; text-align:center; vertical-align:middle;}
#ArticleView ul li:hover{ border:1px solid #ddd; background:#eee;}
#ArticleView ul li .thumbs img{ border:0px; max-width:177px; max-height:148px;}
#ArticleView ul li .atext{ border:0; display:block;white-space:nowrap; text-align:center; overflow:hidden; text-overflow:ellipsis; clear:both;}

方案二：文章缩略列表 保持图片固定长宽
#ArticleView ul{ margin:0px; padding:0px; height:auto; list-style-type:none; display:block;}
#ArticleView ul li{ float:left; display:block; width:179px; height:170px; margin:2px; overflow:hidden; border:1px solid #efefef;}
#ArticleView ul li .thumbs{ width:179px; height:148px;}
#ArticleView ul li .thumbs a{ display:inline-block; border:1px solid #dfdfdf; }
#ArticleView ul li .thumbs a:hover{ border:1px solid #888888;}
#ArticleView ul li .thumbs img{ border:0px; width:177px; height:148px;}
#ArticleView ul li .atext{ border:0; display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; clear:both;}

方案三：文章图片外框白色，列表HOVER时橙色
#ArticleView ul li{ float:left; display:block; width:168px; height:168px; margin:0 6px; text-align:center; margin-top:10px;}
#ArticleView img{ width:160px; height:130px; border:4px solid #fff;}
#ArticleView ul li:hover img{ border:0; border-bottom:4px solid #fff;}
#ArticleView ul li:hover{ border:4px solid #f80; width:160px; height:160px;}
（模板：hb 　案例：gxhbfs）

更多风格方案，敬请期待。如果方案在不同浏览器效果不同，未达到您的效果，请在下方留言，我们将努力完善。

admin

在bootstrap设计方案中（后台整站布局管理-->高级-->前端框架），xs设备显示2行，lg显示3行，否则显示4行。

<div class="case">$func_article(navi=Navigator,para=Case,len=12,title=10)$</div>
CSS：
#ArticleView ul,#ProductView ul{ display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content:space-between;}
#ArticleView ul li,#ProductView ul li{ float: left; width:24%; max-height:300px; margin-bottom:1em;}
#ArticleView ul li .thumbs,#ProductView ul li .thumbs{ display: block; width: 100%; height:calc(100% - 2em);}
#ArticleView ul li .thumbs a,#ProductView ul li .thumbs a{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
#ArticleView ul li img,#ProductView ul li img{ padding: 0.25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; max-width: 100%; max-height:100%;}
#ArticleView ul li a,#ProductView ul li a{ display: block; line-height: 2em; text-align: center;}
@media (max-width: 992px) {
    #ArticleView ul li,#ProductView ul li{ width: 33%;}
}
@media (max-width: 768px)  {
    #ArticleView ul li,#ProductView ul li{ width: 48%;}
}
@media (max-width: 576px)  {
    #ArticleView ul li,#ProductView ul li { width:50%;}
}

admin

HTML：
<div class="case py-5">
    <div class="container text-center img-zoom">
        $func_article(navi=nav,para=case,rows=5,title=11)$
    </div>
</div>
CSS:
.case {
    #ArticleView {

        ul {
            padding-left: 15px;

            li {
                padding-left: 0;

                &:first-child {
                    flex-basis: 100% !important;

                    .title {
                        display: block !important;
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        z-index: 10;
                        background-color: rgba(white, .4);
                    }
                }

                .title {
                    display: none !important;
                }

                &:hover {
                    .title {
                        display: block !important;
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        z-index: 10;
                        background-color: rgba(white, .4);
                    }
                }
            }
        }
    }
}


@include media-breakpoint-up(md) {
    .case {
        #ArticleView {
            margin-top: 2rem;
            position: relative;

            ul {
                padding-left: 50%;

                li {
                    flex-basis: 50% !important;

                    &:first-child {
                        position: absolute;
                        width: calc(50% - 30px);
                        height: calc(100% - 10px);
                        left: 0;
                        top: 0;
                        z-index: 10;
                        padding-bottom: 0;
                        padding-right: 0;
                        margin-right: 15px;

                        .thumbs {
                            height: 100%;

                            img {
                                min-height: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}