图文列表

```html

<div class="banner news">
    <div class="title">
        <p> {$topCates.cate_name}</p>
        <p class="en">{volist name="sonCateRes" id="vo"}
        <span {if condition="$vo['id'] eq $cid"}class="current"{/if}><a href="{$vo.cate_attr|makeurl=###,$vo.id}">{$vo.cate_name}</a><i></i></span>
        {/volist}</p>

</div>
</div>

<div class="main-news">
    <div class="layui-container">
        <div class="layui-row layui-col-space20">
            {volist name="artRes" id="vo"}
            <div class="layui-col-lg6 content">
                <div>
                    <div class="news-img"><a href="{:url('Article/index',array('aid'=>$vo['id']))}"><img {if condition="$vo['pic'] eq ''"}src='{$temp_css}/images/lunbo.png' {else/}src='{$vo.pic}'{/if} alt="{$vo.title}" ></a></div><div class="news-panel">
                    <strong><a href="{:url('Article/index',array('aid'=>$vo['id']))}"> {$vo.title}</a></strong>
                    <p class="detail"><span>{$vo.content|delhtml=###|cut_str="100"}</span><a href="{:url('Article/index',array('aid'=>$vo['id']))}">[详细]</a></p>
                    <p class="read-push">阅读 <span>{$vo.click}</span>    发布时间：<span>{$vo.time|date="Y/m/d",###}</span></p>
                </div>
                </div>
            </div>
            {/volist}
        </div>
        <div id="newsPage">{$artRes->render()}</div>
    </div>
</div>
```
CSS样式
```css
.banner{height: 320px; margin-top: 80px;}
.banner.news{background: url(../images/nav_img3.jpg) no-repeat center top; background-size: cover;}
.banner .title{padding-top: 170px;}
.banner .title.active{padding-top: 120px; transition: 1.5s;}
.banner.news .en .current a{color:#ee6512}
.banner .title p{color: #606060; font-size: 36px; text-align: center; line-height: 50px; letter-spacing: 5px;}
.banner .title p.en{font-size: 20px; letter-spacing: 3px;}
.main-news{padding: 70px 0 80px 0;}
.main-news .content > div{padding-bottom: 40px; border-bottom: 1px dashed #eaeaea; position: relative;}
.main-news .content .news-img{display: inline-block; width: 30%; vertical-align: top;}
.main-news .content .news-img img{max-width: 90%;}
.main-news .content .news-panel{display: inline-block; width: 70%; vertical-align: top; padding-left: 5px; box-sizing: border-box;}
.main-news .content .news-panel strong a{display: block; color: #555; font-size: 18px; line-height: 26px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
.main-news .content .news-panel p.detail{color: #777; line-height: 24px;}
.main-news .content .news-panel p.read-push{color: #AAA; padding-top: 5px;}
.main-news #newsPage .layui-laypage{display: block; text-align: center; margin-top: 70px;}
.main-news #newsPage .layui-laypage a,.main-news #newsPage .layui-laypage span{font-size: 18px; line-height: 40px; height: 40px; margin-right: 20px; border-radius: 3px; color: #e3e3e3;}
```

速建时代TPCMS管理系统

图文列表