简单网页设计之表格版
<html>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title>2012</title>
<style> //之间是字的大小，什么字体，颜色
*{margin: 0 auto;}
.zt_j{ margin-top:10px;}
.zt{ font:宋体 12px; color:#000;text-align:center;}
.zt a:link {
color:#000;
text-decoration:underline;}
</style>
<body style=" background-color: #9FF"> //背景是蓝色的
<div style="text-align:center; ">
<h1>2012年</h1>
<table class="taglist img" style="width:380px;; text-align:center;"> //这是一个表格式的：<table>是<tr>的上层标签<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签. <table>标示一个表格,<tr>标示这个表格中间的一个行 <td>标示行中的一个列,需要嵌套在<tr></tr>中间。
//（例如：具体格式是：两行两列)
<table>
<tr>
<td></td>
<td></td>
</tr>
</teble>）
<tr> //<tr>是一行里有几张图片
<td> //<td> 是一列里有几张图片
<a href="./2012-12-26/1.JPG" target="_blank">
<img src="./2012-12-26/zoom/1.JPG" width="80px" （图片长）height="100px"（图片宽） style="margin-right:20px;（图片间左右距离） margin-top:20px;（图片间上下距离）"/>
</a>
</td>
<td>
<a href="./2012-12-26/2.JPG" target="_blank">
<img src="./2012-12-26/zoom/2.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px"/>
</a>
</td>
<td>
<a href="./2012-12-26/3.JPG" target="_blank">
<img src="./2012-12-26/zoom/3.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px"/>
</a>
</td>
</tr>
<tr> //<tr>是一行里有几张图片
<td> //<td> 是一列里有几张图片
<a href="./2012-12-26/1.JPG" target="_blank">
<img src="./2012-12-26/zoom/1.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px;"/>
</a>
</td>
<td>
<a href="./2012-12-26/2.JPG" target="_blank">
<img src="./2012-12-26/zoom/2.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px"/>
</a>
</td>
<td>
<a href="./2012-12-26/3.JPG" target="_blank">
<img src="./2012-12-26/zoom/3.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px"/>
</a>
</td>
</tr>
</table>
</div>
<div class="zt zt_j">
上一页
<a href="02.html">下一页</a> //链接到“下一页"的 "02.html"图片。点下一页就链接到下一图。
</div>
</body>
</html>