不错的卡片式列表文章展示样式
火狐截图_2021-07-07T09-22-54.260Z.png
css样式

a {
    color: #666;
    text-decoration: none;
    transition: all .2s ease;
}
.topic-list a {
    display: inline-block;
    margin: 5px;
}

.topic-list img {
    width: 354px;
    height: 150px;
    border-radius: 5px 5px 0 0;
}

.topic-list h2 {
    font-size: 16px;
    background: #f5f5f5;
    padding: 10px;
    border-radius: 0 0 5px 5px;
}

.topic-list h2 span {
    font-size: 12px;
    color: #b0b0b0;
}

html代码

<div class="topic-list">
        <a href="topic-AppleOctober2018.html" target="_blank">
           <img src="http://img.prohui.com/topic/20181031142905.jpg?imageView2/1/w/700/h/300">
           <h2>Apple特别活动2018年10月30日<br><span>2018-10-31 14:29 · 1833 次点击</span></h2> 
        </a>
        <a href="topic-AppleOctober2018.html" target="_blank">
           <img src="http://img.prohui.com/topic/20181031142905.jpg?imageView2/1/w/700/h/300">
           <h2>Apple特别活动2018年10月30日<br><span>2018-10-31 14:29 · 1833 次点击</span></h2> 
        </a>
        <a href="topic-AppleOctober2018.html" target="_blank">
           <img src="http://img.prohui.com/topic/20181031142905.jpg?imageView2/1/w/700/h/300">
           <h2>Apple特别活动2018年10月30日<br><span>2018-10-31 14:29 · 1833 次点击</span></h2> 
        </a>
        <a href="topic-AppleOctober2018.html" target="_blank">
           <img src="http://img.prohui.com/topic/20181031142905.jpg?imageView2/1/w/700/h/300">
           <h2>Apple特别活动2018年10月30日<br><span>2018-10-31 14:29 · 1833 次点击</span></h2> 
        </a>
        <a href="topic-AppleOctober2018.html" target="_blank">
           <img src="http://img.prohui.com/topic/20181031142905.jpg?imageView2/1/w/700/h/300">
           <h2>Apple特别活动2018年10月30日<br><span>2018-10-31 14:29 · 1833 次点击</span></h2> 
        </a>
</div>