Parcours d'apprentissage H5-Mise en page H5 (10)-Tutoriel H5-php.cn

Parcours d'apprentissage H5-Mise en page H5 (10)

黄舟

Libérer： 2017-02-17 14:35:58

original

1341 Les gens l'ont consulté

Deux méthodes d'implémentation : p et table

p manière d'implémenter la mise en page

Exemples de code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5布局0</title>
    <style type="text/css">
        body{            margin: 0px;;
        }
        #container{            width:100%;            height: 950px;            background-color: chartreuse;        }
        #heading{            width: 100%;            height: 10%;            background-color: brown;        }
        #content_menu{            width:30%;            height: 80%;            background-color: blue;            float: left;        }
        #content_body{            width: 70%;            height: 80%;            background-color: darkgreen;            float: left;        }
        #footer{            width: 100%;            height: 10%;            background-color: aliceblue;            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

! ! ! ! ! ! ! float signifie flotter de gauche à droite clear signifie effacer

Rendu

Parcours dapprentissage H5-Mise en page H5 (10)

mise en page de la table

exemple de code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5布局0</title></head><body>
    <table width="100%" height="950px" style="background-color: chartreuse">
        <tr>
            <td width="100%" height="10%" style="background-color: brown" colspan="3">头部</td>
        </tr>
        <tr>
            <td width="20%" height="80%" style="background-color: aqua">左菜单</td>
            <td width="60%" height="80%" style="background-color: black">主体</td>
            <td width="200%" height="80%" style="background-color:crimson">右菜单</td>
        </tr>
        <tr>
           <td width="100%" height="10%" style="background-color: deeppink" colspan="3">尾部</td>
        </tr>

    </table></body></html>

Copier après la connexion

! ! ! ! Faites attention à l'attribut colspan

Rendu

Parcours dapprentissage H5-Mise en page H5 (10)

Deux méthodes d'implémentation : p et table

p mise en page d'implémentation

Exemples de code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5布局0</title>
    <style type="text/css">
        body{            margin: 0px;;
        }
        #container{            width:100%;            height: 950px;            background-color: chartreuse;        }
        #heading{            width: 100%;            height: 10%;            background-color: brown;        }
        #content_menu{            width:30%;            height: 80%;            background-color: blue;            float: left;        }
        #content_body{            width: 70%;            height: 80%;            background-color: darkgreen;            float: left;        }
        #footer{            width: 100%;            height: 10%;            background-color: aliceblue;            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

! ! ! ! ! ! ! float signifie flotter de gauche à droite clear signifie effacer

Rendu

Parcours dapprentissage H5-Mise en page H5 (10)

mise en page de la table

Exemple de code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5布局0</title></head><body>
    <table width="100%" height="950px" style="background-color: chartreuse">
        <tr>
            <td width="100%" height="10%" style="background-color: brown" colspan="3">头部</td>
        </tr>
        <tr>
            <td width="20%" height="80%" style="background-color: aqua">左菜单</td>
            <td width="60%" height="80%" style="background-color: black">主体</td>
            <td width="200%" height="80%" style="background-color:crimson">右菜单</td>
        </tr>
        <tr>
           <td width="100%" height="10%" style="background-color: deeppink" colspan="3">尾部</td>
        </tr>

    </table></body></html>

Copier après la connexion