首页 | 简单教程,简单编程

代码编辑器：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
.text_line
{
	clear:both;
	margin-bottom:2px;
}
</style>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么</p>
<img class="thumbnail" src="/static/i/css/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/static/i/css/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/static/i/css/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/static/i/css/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/static/i/css/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/static/i/css/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/static/i/css/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/static/i/css/klematis4_small.jpg" width="120" height="90">
<p class="text_line"></p>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

代码编辑器：

运行结果：