Heim > Artikel > Web-Frontend > H5-Lernreise – H5-Layout (10)

H5-Lernreise – H5-Layout (10)

黄舟Original: 2017-02-17 14:35:581190Durchsuche

Zwei Implementierungsmethoden: p und Tabelle

p-Methode zum Implementieren des Layouts

Codebeispiele

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

! ! ! ! ! ! ! float bedeutet von links nach rechts schwebend, klar bedeutet löschen

Rendering

H5-Lernreise – H5-Layout (10)

Tabellenlayout

Codebeispiel

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

! ! ! ! Achten Sie auf das Colspan-Attribut

Rendering

H5-Lernreise – H5-Layout (10)

Zwei Implementierungsmethoden: p und Tabelle

p-Implementierungslayout

Codebeispiele

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

! ! ! ! ! ! ! float bedeutet von links nach rechts schwebend, klar bedeutet löschen

Rendering

H5-Lernreise – H5-Layout (10)

Tabellenlayout

Codebeispiel

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

! ! ! ! Achten Sie auf das Colspan-Attribut

Rendering

H5-Lernreise – H5-Layout (10)

Das Obige ist der Inhalt des H5-Lernreise-H5-Layouts (10). Bitte achten Sie auf PHP Chinese Net (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：H5-Lernreise – Verwendung von H5-Block-Tags (9)Nächster Artikel：H5-Lernreise – Verwendung von H5-Block-Tags (9)

In Verbindung stehende Artikel

Mehr sehen