不错的卡片式列表文章展示样式
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>
0 赞
or 打赏
喜欢就打赏一点
已有0 条评论，0 个点赞
