HTML基础4：使用表格或者DIV块级元素布局网页

最新推荐文章于 2023-04-12 10:25:12 发布

彬哥^

最新推荐文章于 2023-04-12 10:25:12 发布

阅读量928

点赞数

分类专栏： HTML 文章标签： HTML

原文链接：http://www.tup.tsinghua.edu.cn/booksCenter/book_04432301.html

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

使用表格设计网页
DIV块级元素实现网页布局

使用表格设计网页

用网格实现网页布局一般有如下两种方法：

用图像工具（Photoshop、Fireworks等）绘制网页布局图，然后在图像编辑器中用切图工具切片并另存为HTML文件，这时图像编辑器（PS）会将图片（jpg等）划分为多个小图片(jpg或者gif)然后自动新建一个images文件存放这些小图片文件，然后在images同级目录新建一个自命名.html将小图片填充到一个个表格中，表格的结构就是ps中切片的划分方式，然后以HTML和CSS形式组成一张完整图片

具体参考：https://jingyan.baidu.com/album/546ae1850560a31149f28c94.html?picindex=9

在网页编辑器中直接使用表格编辑网页布局效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body,td,th {
 font-family: "宋体";
 font-size: 12px;
}
body {
 background-color: #6D89DD;
}
.STYLE1 { font-size: 24px; color: #00a06b; vertical-align: bottom}
.STYLE2 { color: #00A06B; font-size: 13px; }
.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" background="../images/bg_top1.gif" align="center">
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>
<table width="776" border="0" align="center">
  <tbody>
    <tr>
      <td><img src="../images/bg_top.jpg" width="776" height="109" alt=""/></td>
    </tr>
  </tbody>
</table>
<table width="776" border="0" bgcolor="#FFFFFF" align="center">
  <tbody>
    <tr>
      <td>
    <table width="776" border="0" background="../images/bg_dot1.gif">
     <tbody>
       <tr>
          <td>
      <table width="736" border="0" bgcolor="#FFFFFF" align="center">
       <tbody>
        <tr>
         <td><br>
          <table width="712" border="0">
           <tbody>
            <tr>
             <td><span class="STYLE1">Hello World</span></td>
            </tr>
            <tr>
             <td>
              <hr align="center" size="2" noshade="noshade">
             </td>
            </tr>
            <tr>
             <td height="30">
              <span class="STYLE2">  &nbsp; &nbsp; <img src="../images/0.gif" width="12" height="12">实例</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;以下控制台程序是传统“Hello World!”程序的 C# 版，该程序显示字符串 Hello World!。
                 <table width="96%" border="0" align="center" cellpadding="12" cellspacing="0" bgcolor="#dddddd">
                  <tr>
                   <td><pre class="STYLE3">using System;
// A "Hello World!" program in C#
namespace HelloWorld
{
 class Hello 
 {
  static void Main() 
  {
   System.Console.WriteLine("Hello World!");
  }
 }
}</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 width="10" height="10"><img src="../images/br.gif" width="10" height="10" /></td>
                                                    </tr>
                                                </table>
             </td>
            </tr>
            <tr>
             <td align="right"><a title="跳到页首" href="#top">返回顶部</a></td>
            </tr>
           </tbody>
          </table>
         </td>
        </tr>
       </tbody>
      </table>
     </td>
       </tr>
     </tbody>
    </table>
  </td>
    </tr>
  </tbody>
</table>
<table width="776" height="39" border="0" background="../images/bg_bottom.gif" align="center">
  <tbody>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<table width="776" border="0" height="60" bgcolor="#FFFFFF" align="center">
  <tbody>
    <tr>
      <td><div align="center" class="STYLE4">&copy;2012 <a href="http://www.52css.cn" target="_black" >52css.cn</a> all rights reserved </div></td>
    </tr>
  </tbody>
</table>
</body>
</html>

浏览器打开网页：
在这里插入图片描述由上可见，表格布局存在多种问题：

产生大量冗余代码
表格布局要用到多层表格嵌套，多层嵌套表格会带来两个问题：一个是浏览器解析缓慢；另一个是为代码维护以及代码修改带来麻烦，调整布局结构更是难上加难，牵一发而动全身
表格布局显得粗糙，用表格实现内边距、外边距比较麻烦，而已已经完成布局之后想调整边距，会破坏原来设计好的布局
表格布局的最大问题是网页表现层与结构层混在一起，对于页面的维护、更新、动态控制（javascript)都带来麻烦

DIV块级元素实现网页布局

网格布局已成为历史，现在常用<div>、<span>、语义标签等实现网页布局，下面用DIV标签实现类似效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World -- 您的第一个程序－C#编程指南</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css">
html { min-width: 776px; }
body { margin: 0px; padding: 0px; border: 0px; color: #000; font-size: 14px; line-height: 160%; text-align: center; background: #6D89DD; font-family: '宋体', '新宋体', arial, verdana, sans-serif; }
a:link { color: #E66133; }
a:visited { color: #E66133; }
a:hover { color: #637DBC; text-decoration: underline; }
pre { text-indent:0; background:#DDDDDD; padding:0.5em 1em; margin:0; margin-right:1em; color:blue; }
#top { width: 776px; margin-right: auto; margin-left: auto; padding: 0px; height: 12px; background: url(../images/bg_top1.gif) #fff repeat-x left top; overflow:hidden; }
#top1 { width: 776px; margin-right: auto; margin-left: auto; padding: 0px; height: 121px; }
#css8 { width:776px;margin-right:auto;margin-left: auto;padding:1.2em 0px; background: url(../images/bg_dot1.gif) #fff repeat left top;text-align: left; ;font;font }
#css8_content {width:710px; margin-right:auto;margin-left: auto;padding:1em;background: #FFFFFF}
#css8_title {font-weight:bold; margin:0px 0px 0.5em 0px;padding:0.5e 0px 0.5em 1em;font-size: 24px;color: #00A06B;text-align: left;border-bottom: solid #9EA3C1 2px;}
.css8_sub{color: #00A06B;font-weight:bold; font-size:13px; text-align:left; padding:1em 2em 0;background: url(../images/0.gif) no-repeat 2% 90%; }
.box { background: url(../images/nt.gif) repeat; }
.tl { background: url(../images/tl.gif) no-repeat top left; }/*圆角*/
.css8_content { text-indent:2em; font-size:13px; margin-left:2em; padding:1em 6px; }
#gotop {width=80%; margin: 0px; padding: 0px; background: #fff; height:2em; font-size:12px; text-align:right;}
#css8_footer{clear:both; width:776px; height: 39px; margin-right: auto; margin-left:auto; padding:0px; background: url(../images/bg_bottom.gif) repeat left top; text-align:center; color:#ddd;}
#copyright {
 width: 776px;
 margin-right: auto;
 margin-left: auto;
 padding-top: 23px;
 padding-right: 0px;
 padding-left: 0px;
 padding-bottom: 0px;
 background: #fff;
 text-align: center;
 height: 60px;
 line-height: 13px;
 font-size: 12px;
 color: #9EA0BB;
 margin-top: 0px;
color: #00A06B;}
#copyright a { color:#667EBE; }
</style>
</head>
<body>
<div id="top"></div>
<div id="top1"><img src="../images/bg_top.jpg" width="776" height="121" /></div>
<div id="css8">
 <div id="css8_content">
 <div id="css8_title">Hello World</div>
 <div class="css8_sub">实例</div>
 <div class="box">
  <div class="tl">
   <div class="tr">
    <div class="bl">
     <div class="css8_content br">
      以下控制台程序是传统“Hello World!”程序的 C# 版，该程序显示字符串 Hello World!。
      <pre>
using System;
// A "Hello World!" program in C#
namespace HelloWorld
{
 class Hello 
 {
  static void Main() 
  {
   System.Console.WriteLine("Hello World!");
  }
 }
}
      </pre>
     </div>
    </div>
   </div>
  </div>
  <div id="gotop"><a title="跳到页首" href="#top">返回顶部</a></div>
  </div>
 </div>
</div>
<div id="css8_footer"></div>
<div id="copyright">&copy;2012 <a href="http://www.52css.cn" target="_black" >52css.cn</a> all rights reserved</div>
</body>
</html>

浏览器打开网页：
在这里插入图片描述
可以看出，网页结构与表现形式完全分离，且可读性高

彬哥^

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础4：使用表格或者DIV块级元素布局网页

文章目录使用表格设计网页使用表格设计网页用网格实现网页布局一般有如下两种方法：用图像工具（Photoshop、Fireworks等）绘制网页布局图，然后在图像编辑器中用切图工具切片并另存为HTML文件，这时图像编辑器（PS）会将图片（jpg等）划分为多个小图片(jpg或者gif)然后自动新建一个images文件存放这些小图片文件，然后在images同级目录新建一个自命名.html将小图片填...
复制链接

扫一扫