次の図のページを書きます：
次のようにコードは次のとおりです。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<タイトル>ページレイアウトのレジストリ</ TITLE>
<スタイルタイプ= "テキスト/ CSS">
* {
マージン：0;全体的なマージン* /へ/ *例外
パディング：0 / *全体パディング* /削除
}
.header {
：80％; / *ヘッド％* 80 /のページ全体の幅は幅を
高さ：60PX。 / *ヘッド高さ* / 60ピクセルである
/ *背景ヘッドe6adf4れる*＃/;＃e6adf4：背景色
}
{の.header H1
=左テキスト整列：センター; / *を中心とヘッド内のラベルのH1 * /
}
.nav {
幅：80％; / *ナビゲーションバー％* 80 /のページ全体幅に対して
高さ：36px; / * 36個のピクセルの/ *ナビゲーションバーの高さ
地色;ナビゲーションバーの/ *背景色＃e4beed e4beed *＃/
}
.nav UL {
マージン左：30％。/ *左のナビゲーションバーのULラベル距離は、ナビゲーションバーの幅の30％です* /
}
{Liは.nav
フロート：左;左* /ナビゲーションバーにラベル全体李フローティング/ *
リストのスタイル：なし; / * *ラベルのliナビゲーションの前に小さなドットを/削除
のmargin-left：100pxに。その左のナビゲーションバー100画素×/ ATタグから/ *のLiタグ
}
リチウム{
リストスタイル：なし; / *全てのプリドットラベルのLi * /削除
}
.article {
幅：80％。 / *ページ全体体含量％* 80 /幅
高さ：600PX;ボディコンテンツの高さ/ * 600個のピクセル* /
}
.aside {
幅：20％; / *左側のメニューバーの幅は、* 20％のメインコンテンツの幅/
高さ：600PX; / *左側のメニューバーの高さ* / 600ピクセルである
フロート：左、メニューバーの/ *全体左側左側に* /の目的に沿って、左サイドバーコンテンツのメニューバーの右側に、フローティング
背景-color：＃1 c4abca、左c4abcaにメニューバーの/ *背景*＃/
}
.aside UL {
マージントップ：20％であり、メニューバーの上部からULタグ距離左側/ *メニューバーの下に左メニューバーの高さは、％* 20は/
余白左：30％;左/ *左側のメニューバー上のメニューバーの左側からのULタグの距離メニューバーの幅の30％* /
}
{リー.asideの
マージントップ：は50px;距離ラベルのLi / *左上のメニューバータブ50個のピクセル* /
}
.SECTION {
幅：80％; / *右のコンテンツ幅はメインコンテンツの幅であります％* 80 /
高さ：600PX; 600個のピクセル* /の/ *コンテンツ右列の高
フロート：右; / *右へ、右フローティング全体右側のメニューバーのように左の列とし、オブジェクトの行のメニューバーの内容* /
背景色：＃1 d5aedf; / *コンテンツ右列* /
}
.SECTION P：最初の子供{
色：赤; / P *赤いフォントコンテンツ下右に最初のラベル、低い優先順位よりn番目の子（2N + 1） 、グリーン* /ように
フォントサイズ：20ピクセル、最初の右下のコンテンツの/ * pタグのフォントサイズが20個の画素である* /
}
.SECTIONのP：テラス、N番目（2N）{
色：青、ラベルの右側のp 2nの/ *コンテンツ青* /
}
.SECTIONのP：テラス、N番目（2N + 1）{
色：緑; / * 2N + 1最初の右下のコンテンツpは緑色のラベルフォントである* /
}
.footer {
幅：80％; / *ページ％* 80 /の底幅の幅
高さ：36px;底の高さにより、/ * 36個のピクセル/
背景色：＃1 d7bdde; / * * d7bdde底カラー＃/
テキストALIGN =左：センター; / *底全体センタリング* /
}
.footerスパン{
マージン左：は50px;スパンタグ/ *でその底部ラベル画素* /の左側から50
色：＃2f2f2f、フォントの色の下部に/ * spanタグは、*＃/ 2f2f2fする
フォントサイズ：20ピクセル; / *フォントサイズの底部のスパンタグが20個の画素であります* /
}
</スタイル>
</ head>の
<身体>
<！ -头部- >
<divのクラス= "ヘッダ">
<H1> HTML + CSS + JS </ H1>
</ div>
<！ -导航栏- >
<divのクラス= "NAV">
<UL>
<LI> HTML </ LI>
<LI> CSS </ LI>
<LI> JSます。</ li>
</ ulの>
</ DIV>
<！ -ボディのコンテンツ- >
<divのクラス= "この記事は記事でした">
<！ -左侧菜单栏- >
<divのクラス= "脇">
<UL>
<LI> HTML </ LI>
<LI> CSS </ LI>
<LI> JSます。</ li>
</ ulの>
</ div>
<！ -コンテンツ権利- >
<divのクラス= "sectionTop">
<P>インライン要素（ラベル）</ P>
<P>効果：装飾的なウェブ、中身を埋める</ P>
<P>特徴：< / P>
<P> 1）を共有する1つの行空間</ P>と他の線要素
<P> 2）コンテンツの決意のデフォルトの幅および高さ</ P>
<P> 3）は、幅と高さ割り当てることができない</ P>
<P> 4）行要素は、ブロック要素</ P>ネストすることができない内に
、<P>が、ブロック要素は、インライン要素をネストすることができる</ P>
</ div>
</ div>
<！ -下- >
<divのクラス= "フッタ">
<span>のソフトウェアエンジニアリング</ span>の
<span>のウェブ方向</ span>の
<span>をLidy </ span>を
</ div>
</ BODY>
</ HTML>
