本例设计一个完整页面，体验标准网页的制作过程。忆苦思甜，这里我们提供了传统设计师使用表格完成相同效果的源代码，通过比较，更能能够直观感受标准设计与传统网格设计的优劣之处。
传统设计师使用表格设计的页面效果。
标准设计师使用DIV+CSS设计的页面效果。
【示例】
-
HTML
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="images/style.css" rel="stylesheet" type="text/css"> <title>Hello World</title> </head> <body> <!--顶部 --> <div id="top"></div> <div id="top1"><img src="images/bg_top.jpg" width="776" height="121"></div> <!--主体 --> <div id="main"> <div id="content"> <div id="title"> Hello World -- 第一个CSS3+DIV页面 </div> <div class="sub">实例</div> <div class="box"> <div class="tl"> <div class="tr"> <div class="bl"> <div class="content br"> 以下代码是我的第一个CSS3+DIV页面，该页面红色居中显示字符串 Hello World!。 <pre> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> h1 { color: #FF0000; text-align: center; } </style> </head> <body> <h1>Hello World! </h1> </body> </html> </pre> </div> </div> </div> </div> </div> <div id="gotop"><a title="跳到页首" href="#top">返回顶部</a></div> </div> </div> <!--底部 --> <div id="footer"></div> <div id="copyright"> ©2017 <a href="#" target="_black" >mysite.cn</a> all rights reserved </div> </body> </html> -
Table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Hello World（table）</title> <style type="text/css"> body { background-color: #6D89DD; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .STYLE1 { font-size: 24px; color: #00a06b; } .STYLE2 { color: #00A06B; font-size: 13px; } a:link { color: #E66133; text-decoration: none; } a:hover { color: #637DBC; text-decoration: underline; } a { font-size: 12px; } a:visited { text-decoration: none; } a:active { text-decoration: none; } body, td, th { font-size: 12px; font-family: 宋体; } .STYLE3 { color: #0000FF; font-size: 14px; } .STYLE4 { color: #667ebe } </style> </head> <body> <a name="top" id="top"></a> <table width="776" height="12" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bg_top1.gif"> <tr> <td></td> </tr> </table> <table width="776" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><img src="images/bg_top.jpg" width="776" height="109" /></td> </tr> </table> <table width="776" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td><table width="776" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bg_dot1.gif"> <tr> <td><br /> <table width="736" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td><table width="712" border="0" cellspacing="0" cellpadding="0" align="center" > <tr> <td height="50" valign="bottom"><span class="STYLE1">Hello World -- 第一个CSS3+DIV页面</span></td> </tr> <tr> <td><hr align="center" size="2" noshade="noshade" /></td> </tr> <tr> <td height="30"> <img src="images/0.gif" width="12" height="12" /><span class="STYLE2">实例</span></td> </tr> <tr> <td><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ECF6FC"> <tr> <td width="10" height="10"><img src="images/tl.gif" width="10" height="10" /></td> <td></td> <td width="10" height="10"><img src="images/tr.gif" width="10" height="10" /></td> </tr> <tr> <td></td> <td> 以下代码是我的第一个CSS3+DIV页面，该页面红色居中显示字符串 Hello World!。 <table width="96%" border="0" align="center" cellpadding="12" cellspacing="0" bgcolor="#dddddd"> <tr> <td><pre class="STYLE3"> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> h1 { color: #FF0000; text-align: center; } </style> </head> <body> <h1>Hello World! </h1> </body> </html> </pre></td> </tr> </table></td> <td></td> </tr> <tr> <td width="10" height="10"><img src="images/bl.gif" width="10" height="10" /></td> <td></td> <td><img src="images/br.gif" width="10" height="10" /></td> </tr> </table></td> </tr> <tr> <td height="30"><div align="right"><a title="跳到页首" href="#top">返回顶部</a></div></td> </tr> </table></td> </tr> </table> <br /></td> </tr> </table></td> </tr> </table> <table width="776" height="39" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td background="images/bg_bottom.gif"> </td> </tr> </table> <table width="776" height="60" border="0" align="center" cellpadding="10" cellspacing="0"> <tr> <td valign="top" bgcolor="#FFFFFF"><div align="center" class="STYLE4">©2015 <a href="#" target="_black" >mysite.cn</a> all rights reserved </div></td> </tr> </table> </body> </html>