一个简单的绿色模板 但值得学习~!!! (我写了很好的注释)
来源：互联网 发布：日本好用的护肤品知乎 编辑：程序博客网 时间：2024/05/21 13:09
<html><head><title>http://sc.cinaz.com </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="style.css" rel="stylesheet" type="text/css"></head><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><table width="1000" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="231" background="images/index_08.jpg"><table width="100%" border="1" cellspacing="20" cellpadding="0"> <tr> <td width="6%"> </td> <td width="94%"><table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><h2 class="white-text"><strong>We offer excellent services:</strong></h2></td> </tr> <tr> <td><table width="100%" border="1" cellspacing="10" cellpadding="0"> <tr> <td width="3%"><img src="images/Arrow.gif" width="20" height="20"></td> <td width="97%" class="white-text">Nunc adipiscing odio sed arcu. Donec velit dolor, ornare rhoncus, mattis non, vestibulum vel, diam.</td> </tr> <tr> <td><img src="images/Arrow.gif" width="10" height="20"></td><!--自动对齐 故不需width 50%--> <td class="white-text">Donec velit dolor, ornare rhoncus, mattis non, vestibulum vel, diam.</td> </tr> <tr> <td><img src="images/Arrow.gif" width="20" height="20"></td> <td class="white-text">Ornare rhoncus, mattis non, vestibulum vel, diam. Nunc adipiscing odio sed arcu.</td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="#"><img src="images/index_09.gif" alt="" width="197" height="41" border="0"></a></td><!--切图 所以第一个链接左边有空白--> <td><a href="#"><img src="images/index_10.gif" alt="" width="131" height="41" border="0"></a></td> <td><a href="#"><img src="images/index_11.gif" alt="" width="129" height="41" border="0"></a></td> <td><a href="#"><img src="images/index_12.gif" alt="" width="129" height="41" border="0"></a></td> <td><img src="images/index_13.jpg" width="414" height="41" alt=""></td><!--切图--> </tr> </table></td> </tr> <tr> <td><img src="images/index_14.jpg" alt=""></td><!--大溜白切图--> </tr></table><table width="1000" border="0" align="center" cellpadding="0" cellspacing="0"> <!--width="1000"是参照上一个table 所以宽一样--> <tr> <td><table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td width="29%" align="center" valign="top"><table width="211" border="0" cellspacing="1" cellpadding="0"> <tr> <td><a href="#"><img src="images/index_20.gif" alt="" width="211" height="30" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="images/index_23.gif" alt="" width="211" height="39" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="images/index_26.gif" alt="" width="211" height="36" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="images/index_27.gif" alt="" width="211" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="images/index_28.gif" alt="" width="211" height="42" border="0"></a></td> </tr> </table></td> <!--左大框框--> <td width="71%" valign="top"><table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><img src="images/index_17.gif" alt=""></td> </tr> <tr> <td bgcolor="#BED780"><img src="images/spacer.gif"></td> <!--一条线而已--> </tr> <tr> <td><table width="100%" border="0" cellspacing="10" cellpadding="2"> <tr> <td width="3%"><img src="images/index_24.jpg" alt=""></td> <!--图片自身的尺寸决定了框的大小--> <td width="97%">Lorem ipsum dolor sit amet, consectetur adi piscing elit.<br> Mauris quis dolor ac ante dapibus rhoncus. Nam ut ligula.<br> Maecenas ut mi varius magna faucibus aliquam. Vestibulum <br> volutpat. Vestibulum mi enim, sagittis ac.</td> </tr> </table></td> </tr> <tr> <td><h2>Products</h2></td> </tr> <tr> <td bgcolor="#BED780"><img src="images/spacer.gif" width="1" height="1"></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td width="19%"><img src="images/index_32.jpg" width="117" height="93" alt=""></td> <td width="19%"><img src="images/index_34.jpg" width="113" height="93" alt=""></td> <td width="22%"><img src="images/index_36.jpg" width="116" height="93" alt=""></td> <td width="40%"><img src="images/index_38.jpg" width="113" height="93" alt=""></td> </tr> <tr> <td> </td> <!--宽度向上对齐--> <td> </td> <td> </td> <td class="p"><a href="#"><img src="images/index_45.gif" alt="" width="88" height="29" border="0"></a></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr></table><table width="1000" border="1" align="center" cellpadding="0" cellspacing="0"> <!--align="center" 的作用 能让table与上面的table居中对齐--> <tr> <td height="53" background="images/index_48.gif"><!--background=img是让背景水平重复平铺 同时又定义了<td>高度--><table width="100%" border="1" cellspacing="10" cellpadding="0"> <tr> <td width="25%" align="center" class="green-text"><a href="#">Terms of Use</a> | <a href="#">Privacy Statement </a></td> <td width="75%" align="center" class="white-text">Copyright © Sitename.com. All rights reserved. Design by Stylish From <a href="http://sc.chinaz.com" style="color:#fff; text-decoration:none;">sc.chinaz.com</a></td> </tr> </table></td> </tr></table><div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div></body></html>
