一个简单的绿色模板 但值得学习~!!! (我写了很好的注释)

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值