以下是html代码：
<div>
<ul>
<li>
<img src=<"http://lorempixum.com/100/100/nature/1" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet…</p>
</li>
<li>
<img src=<"http://lorempixum.com/100/100/nature/2" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet…</p>
</li>
<li>
<img src=<"http://lorempixum.com/100/100/nature/3" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet…</p>
</li>
<li>
<img src=<"http://lorempixum.com/100/100/nature/4" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet…</p>
</li>
</ul>
</div>
比起上面的例子来，这里的代码要复杂一些。每个列表元素都有三个子元素：图片，标题，文字介绍。注意图片的大小这里需被固定为100px乘以100px，不然加在的图片大小不一会使排版混乱，你可以在html代码里强制设置为这个大小。总的来说实现起来还是比较简单的。
以下是css代码：
* {margin: 0; padding: 0;}
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 500px;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
css代码页很简短。我们重设了所有元素的margin和padding。这里只需记住将图片向左浮动，这样文字就会紧挨着跟在后面。
3.标准的图片网格 Standard Thumbnail Grid
这里是源码demo地址：CodePen.
效果图：
以下是html代码：
<div>
<ul>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
