H5 div レイアウトとテーブル レイアウトの詳細説明

今回は、H5 div レイアウトとテーブル レイアウトについて詳しく説明します。H5 div レイアウトとテーブル レイアウトの 注意点とは何ですか? 実践的なケースを見てみましょう。

この記事の例は、参考のためにhtml5 pレイアウトとテーブルレイアウトを分析します。具体的な内容は次のとおりです

pレイアウト: html+cssでシンプルなレイアウトを実装します。

#container では、

高さ をパーセンテージとして記述することはできず、特定の高さを指定する必要があります。

nbsp;html>  
  
  
    <meta>  
    <title>p布局</title>  
    <style>  
        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>  
  
  
    <p>  
        </p><p>头部</p>  
        <p>内容菜单</p>  
        <p>内容主体</p>  
        <p>底部</p>  
      
  

レンダリング:

テーブルレイアウト:

nbsp;html>  
  
  
    <meta>  
    <title>table布局</title>  
  
  
    

                                                                                                                                                    

这是头部
左菜单	内容	右菜单
这是底部

      レンダリング:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興奮するには、他の関連する内容に注意してください。 PHP 中国語 Web サイトの記事をご覧ください。

推奨読書:

ページングクエリの使用方法の詳細な説明

JS での日付関連関数の使用の詳細な説明

以上がH5 div レイアウトとテーブル レイアウトの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。