纯CSS网格布局的图文内容列表

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要引入必要的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的body部分，在div容器里放入了多个a表情来显示不同的图文内容，代码如下：

<div class="container">
	<div class="cards">
		<a class="card" href="#">
			<span class="card-header" style="background-image: url(http://placeimg.com/400/200/animals);">
				<span class="card-title">
					<h3>This is a title for a card</h3>
				</span>
			</span>
			<span class="card-summary">
				A summary will also be present. Usually two to three brief sentences about the content on the detail page.
			</span>
			<span class="card-meta">
				Published: June 18th, 2017
			</span>
		</a>

		<a class="card" href="#">
			<span class="card-header" style="background-image: url(http://placeimg.com/640/480/nature);">
				<span class="card-title">
					<h3>This is a title for a card that is a bit longer in length</h3>
				</span>
			</span>
			<span class="card-summary">
				Each card is created from an &lt;a&gt; tag so the whole card is linked.
			</span>
			<span class="card-meta">
				Published: June 18th, 2017
			</span>
		</a>
		
		<a class="card" href="#">
			<span class="card-header" style="background-image: url(http://placeimg.com/400/400/people)">
				<span class="card-title">
					<h3>This is a title for a card</h3>
				</span>
			</span>
			<span class="card-summary">
				Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
			</span>
			<span class="card-meta">
				Published: June 18th, 2017
			</span>
		</a>

		<a class="card" href="#">
			<span class="card-header" style="background-image: url(http://placeimg.com/400/200/tech);">
				<span class="card-title">
					<h3>This is a title for a card</h3>
				</span>
			</span>
			<span class="card-summary">
				A summary will also be present. Usually two to three brief sentences about the content on the detail page.
			</span>
			<span class="card-meta">
				Published: June 18th, 2017
			</span>
		</a>
		
		<a class="card" href="#">
			<span class="card-header" style="background-image: url(http://placeimg.com/400/200/people);">
				<span class="card-title">
					<h3>This is a title for a card</h3>
				</span>
			</span>
			<span class="card-summary">
				Each card is created from an &lt;a&gt; tag so the whole card is linked.
			</span>
			<span class="card-meta">
				Published: June 18th, 2017
			</span>
		</a>
		
		<a class="card" href="#">
			<span class="card-header" style="background-image: url(http://placeimg.com/400/250/nature);">
				<span class="card-title">
					<h3>This is a title for a card</h3>
				</span>
			</span>
			<span class="card-summary">
				Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
			</span>
			<span class="card-meta">
				Published: June 18th, 2017
			</span>
		</a>

		<a class="card" href="#">
			<span class="card-header" style="background-image: url(http://placeimg.com/400/250/animals);">
				<span class="card-title">
					<h3>This is a title for a card</h3>
				</span>
			</span>
			<span class="card-summary">
				A summary will also be present. Usually two to three brief sentences about the content on the detail page.
			</span>
			<span class="card-meta">
				Published: June 18th, 2017
			</span>
		</a>

		<a class="card" href="#">
			<span class="card-header" style="background-image: url(http://placeimg.com/600/600/people);">
				<span class="card-title">
					<h3>This is a title for a card</h3>
				</span>
			</span>
			<span class="card-summary">
				Each card is created from an &lt;a&gt; tag so the whole card is linked.
			</span>
			<span class="card-meta">
				Published: June 18th, 2017
			</span>
		</a>

		<a class="card" href="#">
			<span class="card-header" style="background-image: url(http://placeimg.com/400/400/tech);">
				<span class="card-title">
					<h3>This is a title for a card</h3>
				</span>
			</span>
			<span class="card-summary">
				Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
			</span>
			<span class="card-meta">
				Published: June 18th, 2017
			</span>
		</a>
	</div>
</div>