html5布局的使用

  1. 使用<用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>无标题文档</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    <style type="text/css">
    body{
    margin:0px;
    }
    div#contain{
    width:100%;
    height:630px;

         }
         div#head{
             width:100%;
             height:10%;
             background:#FF0;
         }
         div#leftmenu{
             width:10%;
             height:80%;
             background:#60F;
             float:left;
         }
         div#webbody{
             width:80%;
             height:80%;
             background:#F00;
             float:left;
         }
         div#rightmenu{
             width:10%;
             height:80%;
             background:#60F;
             float:left;
         }
         div#foot{
             width:100%;
             height:10%;
             background:#F0F;
             clear:both;
         }
     </style>
     </head>
     
     <body>
     <div id="contain">
         <div id="head"> head</div>
         <div id="leftmenu"> leftmenu</div>
         <div id="webbody">webbody</div>
         <div id="rightmenu">rightmenu</div>
         <div id="foot"> foot</div>
     </div>
     </body>
     </html>
    

需要注意的:

  1. 在<head>里面用margin把<body>的边框设为0

  2. float:left;是把<div>从左到右浮动

  3. 在设置id="foot"这个区域的时候要用语句clear:both;把浮动取消

  4. 在写标签属性的时候才到加双引号,加等号

  5. 在写<style>的内容时,要加上分号

  6. 在<head>中的div#foot可以把div去掉

  7. 使用<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>
     <link rel="stylesheet" type="text/css" href="mystyle.css" />
     </head>
     
     <body marginheight="0px" marginwidth="0px">
         <table height="630px" width="100%" style="background-color:#666"  >
         <tr>
             <td colspan="3" width="100%" height="10%" style="background-color:#FF0">head</td>
         </tr>
         <tr>
             <td width="10%" height="80%" style="background-color:#60F">leftmenu</td>
             <td width="80" height="80%" style="background-color:#F00">body</td>
             <td width="10%" height="80%" style="background-color:#60F">rightmenu</td>
          </tr>
          <tr>
             <td colspan="3" width="100%" height="80%" style="background-color:#F0F">leftmenu</td>
          </tr>
         </table>
     </body>
     </html>
    

需要注意的:

  1. 在td中添加颜色要加style
    附:效果图
排版效果图.png

推荐阅读更多精彩内容