ホームページ >ウェブフロントエンド >CSSチュートリアル >初心者向け記事:ccsを使って簡単なレイアウトを作る方法(コード付き)
前回の記事「css3を使ってクールなナビゲーションバー効果を作成する方法をステップバイステップで教えます(詳細なコード説明)」では、css3を使ってナビゲーションバー効果を作成する方法を紹介します。クールなナビゲーション バーの効果。次の記事では、HTML を使用して簡単なレイアウトを作成する方法を紹介しますので、一緒に見てみましょう。
インターネットの普及が進むにつれて、Web ページがこのようなレイアウトになることがよくあります。レンダリングを共有して、その効果を確認したいと思います。それでは、div css レイアウトの基本的な処理を説明します。
1. html
Html 編集コード例を作成します
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
2. テキストを含む div
タイトルを定義し、class
を使用しますスタイルの属性。
<div class="title">顶部</div> <div class="footer">底部</div>
3. style
の間に、body
のスタイルを初期化し、外側のマージン margin
を 0 に、内側のマージンを追加して設定します。 padding
が 0 の場合、text-align
を使用してテキストの中心を設定します。
<style type="text/css"> body{text-align: center;margin: 0;padding: 0} </style>
4. style
の間で、スタイルを div
に追加し、すべての div
の高さを 200px に設定し、コンテンツの色を に設定します。赤。 。
div{height: 200px;color: red;}
5. style
と style title
の間。div を使用して Web ページの先頭を作成し、margin:0 auto
を使用します。 div
Center、幅を 800px、背景色をグレーに設定します。
.title{margin: 0 auto; width: 800px; background-color: #ccc}
6. style
の間で、div
を使用して Web ページの下部を作成し、clear:both
を使用して上をクリアします。 div
は、下部のレイアウトへの影響を避けるためにフローティングになっています。次に、margin:0 auto
を使用して div
を中央に配置し、次に margin:0 auto
を使用して幅を 800px
に設定します。背景色を
にします。
.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}
7. ブラウザでファイルを開いて効果を確認してください。
CSS ビデオ チュートリアル######以上が初心者向け記事:ccsを使って簡単なレイアウトを作る方法(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。