位于上海,服务全国!

位于上海,服务全国!

HTML - 页面布局和模板

作者:admin 分类: 时间:2014-07-15 00:00:00 点击量:3672

 HTML - 页面布局和模板

HTML布局是非常基本的方式。单独body标签的存在没有很多选择。表格,在另一方面也可以说是HTML布局的面包和奶油。任何元件可以被放置在一个表格内,包括表格自己!

HTML代码:

<table id="shell" bgcolor="black" border="1" height="200" width="300">
   <tr>
      <td>
         <table id="inner" bgcolor="white" height="100" width="100">
            <tr>
               <td>Tables inside tables!</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

 

 

表格内的表格:

Tables inside tables!

 

白色的表格标识为内部存在于外壳表格的内部黑色。 一个灯泡会出现在头部,当你探究这个系统并创建无限布局时。

HTML - 标准布局

一个相当标准的布局由顶部附近banner导航和你的内容或展示盒组成。 这些都是任何好网站的骨干。

HTML 代码:

<table cellspacing="1" cellpadding="0" border="0"
 bgcolor="black" id="shell" height="250" width="400">
   <tr height="50">
      <td colspan="2" bgcolor="white">
         <table title="Banner" id="banner" border="0">
            <tr><td>Place a banner here</td></tr>
         </table>
      </td>
   </tr>
   <tr height="200">
      <td bgcolor="white">
         <table id="navigation" title="Navigation" border="0">
            <tr><td>Links!</td></tr>
            <tr><td>Links!</td></tr>
            <tr><td>Links!</td></tr>
         </table>
      </td><td bgcolor="white">
         <table title="Content" id="content" border="0">
            <tr><td>Content goes here</td></tr>
         </table>
      </td>
   </tr>
</table>

 

基本的布局:

在这里放置一个banner

链接!

链接!

链接!

内容放在这里

 

 

这种方法是较基本的但也是有组织的。 这些代码变得复杂且快所以你将需要确保正确地配置高度和宽度至你的表格。 更具体的是你的高度和宽度,少些空间就会少些错误和调试。

HTML代码

 

 

HTML Code:

<table id="shell" title="Shell" height="250" width="400"
 border="0" bgcolor="black" cellspacing="1" cellpadding="0">
   <tr height="50">
      <td bgcolor="white">
         <table title="banner" id="banner">
            <tr><td> Banner放在这</td></tr>
         </table>
      </td>
   </tr>
   <tr height="25">
      <td bgcolor="white">
         <table title="Navigation" id="navigation">
            <tr><td>链接!</td>
            <td>链接!</td>
            <td>链接!</td></tr>
         </table>
      </td>
   </tr>
   <tr>
      <td bgcolor="white">
         <table title="Content" id="content">
            <tr>
               <td>Content goes here</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

基本的布局 2:

Banner放在这

链接

链接

链接

内容放在这里

 

 

这些代码看起来是相当多的所以拆开其和以自己的方式组织它以使事情更容易。