不错的卡片式列表文章展示样式

寻梦xunm| 789| 收集

3年前

超过1232天温馨提示

本文最后更新于2021年07月07日，已超过1232天没有更新，若内容或图片失效，请留言反馈。

不错的卡片式列表文章展示样式

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>

css 样式卡片

0 赞 or 打赏

喜欢就打赏一点