如果这周下雨我们...吧 关注:8贴子:155
  • 7回复贴,共1

Ab2)利用表格进行网页布局

只看楼主收藏回复




IP属地:辽宁1楼2014-02-26 23:18回复
    众所周知HTML语言最强功能之一即表单和表格,而利用表格的嵌套结构即可为页面布局。


    IP属地:辽宁来自Android客户端2楼2014-02-26 23:21
    回复
      <html>
      <head>
      <title>国家炼金术师的个人网页</title>
      <meta http-equiv="Content-Type"content="text/html;charset=utf-8">
      <meta name="Keywords"content="国家炼金术师,个人网页">
      </head>
      <!--设置页面属性,比设置表格,易于观察-->
      <body bgcolor="gray" leftmargin="0"topmargin="0">
      <table border="0" width="100%"cellspacing="0"cellpadding="0">
      <tbody>
      <tr>
      <td align="center">
      <!--中层开始-->
      <table border="0" width="1200" bgcolor="white" cellspacing="0" cellpadding="0">
      <tbody>
      <tr>
      <td align="center">
      <!--内层开始-->
      <table width="90%" border="0" cellspacing="0" cellpadding="0">
      <tbody>
      <tr><td align="center" colspan="5"><img src="钢炼1.jpg" width="100%" height="300"></td></tr>
      <tr height="50">
      <td colspan="3" align="left">
      <form action="http://www.baidu.com/s"method="get">钢之炼金术师:<input type="text"name="kg"size="40"maxlength="255"/>
      <input type="submit"value="百度"/></form></td>
      <td colspan="2" align="right">
      <a href="www.baidu.com"><p>您需要帮助?</p></a></td>
      </tr>
      <tr height="10"><td colspan="5"><hr color="black"width="100%"size="1"/></td></tr>
      <tr valign="top">
      <td width="20%">
      <h3 align="center">个人简介</h3><ul type="disc">
      <a href=""> <li>埃力克兄弟</li>
      <li>爱德华</li>
      <li>国家炼金术师资格</li>
      <li>钢之炼金术师</li>
      <li>阿尔</li>
      <li>精神—钢铁意志</li></a>
      </ul>
      </td>
      <td width="60%"align="center"valign="top"><h2 align="center">Fullmetal Alchemiest</h3><img src="钢炼2.jpg"width="100%"height="30%"/></td>
      <td width="20%"align="center"><h1>同样的内容</h1></td>
      </tr>
      <tr><td colspan="5"align="center"><h1>钢之炼金术师</h1></td></tr>
      <tr><td colspan="5"><img src="钢炼3.jpg" width="100%"height="100"/></td></tr>
      <tr height="40">
      <td colspan="5"><h2>版权所有,翻录必究&copy;2000-2014</h2></td>
      </tr>
      </tr>
      </tbody>
      </table>
      </td>
      </tr>
      </tbody>
      </table>
      </td>
      </tr>
      </tbody>
      </table>
      </body>
      </html>
      附上代码,由于感冒,写的粗糙些,请见谅。


      IP属地:辽宁3楼2014-02-26 23:25
      回复
        “表格可以将页面整齐地划为若干部份,所以用表格嵌套,单元格合并等技巧对页面进行布局”
        该页分三层
        1.外层:1x1,宽100%,背景灰色,单元格居中。
        2.中层:1x1,嵌套于外层之内,宽度自己调节。
        3.内层:六行五列,宽度自行把握。
        4.未插入图时,看不见白色背景,不要以为自己打错了。


        IP属地:辽宁来自Android客户端4楼2014-02-26 23:34
        回复
          若有不懂的细节问题欢迎跟帖咨询


          IP属地:辽宁来自Android客户端5楼2014-02-27 09:40
          回复
            这咋还整上html了


            IP属地:辽宁来自Android客户端6楼2014-02-27 17:09
            收起回复
              不要这样,c神已是过去,架构神才是王道哈哈


              IP属地:辽宁8楼2014-02-28 00:05
              回复