zoukankan      html  css  js  c++  java
  • table 和 div 简单布局

    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=utf-8" />
    <title>table布局</title>
    </head>
    
    <body marginheight="0px" marginwidth="0px">
    <table width="100%" height="965" style="background-color: #003">
    <tr>
    <td colspan="3" width="100%" height="320"  style="background-color: #C6C">这是头部</td>
    </tr>
    <tr>
    <td width="30%" height="80%" style="background-color:#303">这是左半部</td>
    <td width="70%" height="80%" style="background-color: #CC3" >这是右半部</td>
    <tr>
    <td width="100%" height="10%"  style="background-color: #600" >这是下部</td>
    </tr>
    
    </table>
    
    </body>
    </html>
    

     div 简单布局

    <!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=utf-8" />
    <title>idv布局</title>
    
    <style type="text/css">
    body{ margin:0px;}
    div#center{
    	100%;
        height:950px;
        background-color: #666;
     }
     div#heading{
    	  100%;
          height: 10%;
          background-color:#096
     }
     div#menuw{
       30%;
       height:80%;
       background-color:#993;
       float:left;
       }
       div#lift{ 70%;
       height:80%;
       background-color:#FC0
       float:left;
       }
        div#floor{ 100%;
       height:10%;
       background-color: #39F;
       clear: both;}
    </style>
    </head>
    <body>
    <div id="center">
    <div id="heading">头部</div>
    <div id="menuw">左半部分</div>
    <div id="lift">右半部分</div>
    <div id="floor">底部</div>
    </body>
    </html>

     对比:个人觉得table简单好理解,就像垒砖一块挨一块,踏实。 而div更具特色,就像泼墨,随便勾画几笔便是巨作。

              简单 说table 和 div 各有各的好处。

    头部
    右半部分
    底部
  • 相关阅读:
    done M&T 银行,十五分钟就结束的简单面
    MyBatis(四)映射文件 之 备用4
    MyBatis(四)映射文件 之 resultMap:鉴别器
    MyBatis(四)映射文件 之 分步查询与懒加载
    MyBatis(四)映射文件 之 备用1
    MyBatis(四)映射文件 之 注解开发
    MyBatis(四)映射文件 之 一对多映射查询
    MyBatis(四)映射文件 之 多对一映射查询
    MyBatis(四)映射文件 之 resultMap 自定义映射
    MyBatis(四)映射文件 之 resultType 自动映射
  • 原文地址:https://www.cnblogs.com/hanke123/p/4784136.html
Copyright © 2011-2022 走看看