html5 div合理布局与table合理布局详解

日期:2020-10-11 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

本文案例为大伙儿分析了html5 div合理布局与table合理布局,供大伙儿参照,实际內容以下

div合理布局:html+css完成简易合理布局。

#container中height不可以写成百分数,务必为实际高宽比。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF⑻">  
    <title>div合理布局</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>  
    <div id="container">  
        <div id="heading">头顶部</div>  
        <div id="content-menu">內容菜单</div>  
        <div id="content-body">內容行为主体</div>  
        <div id="footer">底部</div>  
    </div>  
</body>  
</html>  

实际效果图:

table合理布局:

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF⑻">  
    <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>  

实际效果图:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。