Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des H5-Div-Layouts und des Tabellenlayouts

Detaillierte Erläuterung des H5-Div-Layouts und des Tabellenlayouts

php中世界最好的语言Original: 2018-03-26 11:37:076437Durchsuche

Dieses Mal werde ich Ihnen das H5-Div-Layout und das Tabellenlayout ausführlich erklären. Was sind die Vorsichtsmaßnahmen für das H5-Div-Layout und das Tabellenlayout?

Das Beispiel in diesem Artikel analysiert das HTML5-P-Layout und das Tabellenlayout als Referenz. Der spezifische Inhalt ist wie folgt:

P-Layout: HTML+CSS implementiert ein einfaches Layout .

In #container kann Höhe nicht als Prozentsatz geschrieben werden und muss eine bestimmte Höhe sein.

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

Rendering:

Tabellenlayout:

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

Rendering:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Paging-Abfragen

Detaillierte Erläuterung der Verwendung von datumsbezogenen Funktionen in JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des H5-Div-Layouts und des Tabellenlayouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html5 css html JS table

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：Vorher: Nachher, wie man ein kleines Dreieck ausgibtNächster Artikel：Vorher: Nachher, wie man ein kleines Dreieck ausgibt

In Verbindung stehende Artikel

Mehr sehen