首頁 > 文章 > web前端 > html5 div佈局與table佈局詳解

html5 div佈局與table佈局詳解

黄舟原創: 2017-02-21 13:16:092696瀏覽

本文實例為大家解析了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>

效果圖：

html5 div佈局與table佈局詳解

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>

效果圖：

html5 div佈局與table佈局詳解

#以上就是html5 div版面與table版面詳解的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML5拖放效果的實作程式碼下一篇：HTML5拖放效果的實作程式碼

看更多

html5 div佈局與table佈局詳解

相關文章