H5的div布局与table布局详解

时间2024-01-23 07:05:06发布访客分类HTML浏览664

导读：收集整理的这篇文章主要介绍了H5的div布局与table布局详解，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5的div布局与table布局详解，H5div布局与table布局的注意事项有哪些，下面就是实战案例，一起来看...

收集整理的这篇文章主要介绍了H5的div布局与table布局详解，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5的div布局与table布局详解，H5div布局与table布局的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例为大家解析了htML5 p布局与table布局，供大家参考，具体内容如下

p布局：html+css实现简单布局。

#container中height不能写成百分数，必须为具体高度。

!DOCTYPE html>
      html>
      head lang="en">
          meta charset="UTF-8">
          tITle>
    p布局/title>
          style type="text/css">
          body{
                  margin:0;
                  padding:0;
          }
          #container{
                  width:100%;
                  height:650px;
                  background-color: aqua;
          }
          #heading{
                  width:100%;
                  height:10%;
                  background-color: azure;
          }
          #content-menu{
                  width:30%;
                  height:80%;
                  background-color: chartreuse;
                  float:left;
          }
          #content-body{
                  width:70%;
                  height:80%;
                  background-color: chocolate;
                  float:left;
          }
          #footer{
                  width:100%;
                  height:10%;
                  background-color: darkgrey;
                  clear: both;
          }
          /style>
      /head>
      body>
          p id="container">
              p id="heading">
    头部/p>
              p id="content-menu">
    内容菜单/p>
              p id="content-body">
    内容主体/p>
              p id="footer">
    底部/p>
          /p>
      /body>
      /html>

效果图：

table布局：

!DOCTYPE html>
      html>
      head lang="en">
          meta charset="UTF-8">
          title>
    table布局/title>
      /head>
      body marginwidth="0px" marginheight="0px">
          table width="100%" height="650px" style="background-color: aqua">
              tr>
                  td colspan="3" width="100%" height="10%" style="background-color: chartreuse">
    这是头部/td>
              /tr>
              tr>
                  td width="20%" height="80%" style="background-color: antiquewhite">
    左菜单/td>
                  td width="60%" height="80%" style="background-color: coral">
    内容/td>
                  td width="20%" height="80%" style="background-color: cornflowerblue">
    右菜单/td>
              /tr>
              tr>
                  td colspan="3" width="100%" height="10%" style="background-color: crimson">
    这是底部/td>
              /tr>
          /table>
      /body>
      /html>

效果图：

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！