Explication détaillée de la disposition des div HTML5 et de la disposition des tableaux-Tutoriel H5-php.cn

Explication détaillée de la disposition des div HTML5 et de la disposition des tableaux

黄舟

Libérer： 2017-02-21 13:16:09

original

2682 Les gens l'ont consulté

L'exemple de cet article analyse la mise en page html5 p et la mise en page du tableau pour votre référence. Le contenu spécifique est le suivant

mise en page p : html css implémente une mise en page simple.

La hauteur dans #container ne peut pas être écrite en pourcentage, il doit s'agir d'une hauteur spécifique.

<!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>

Copier après la connexion

Rendu :

Explication détaillée de la disposition des div HTML5 et de la disposition des tableaux

disposition du tableau :

<!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>

Copier après la connexion

Rendu :

Explication détaillée de la disposition des div HTML5 et de la disposition des tableaux

Ce qui précède est la disposition et le tableau div html5 Contenu de mise en page détaillé, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !