初心者向け記事：ccsを使って簡単なレイアウトを作る方法（コード付き）-CSSチュートリアル-php.cn

初心者向け記事：ccsを使って簡単なレイアウトを作る方法（コード付き）

奋力向前

リリース： 2021-09-03 17:30:52

オリジナル

2568 人が閲覧しました

前回の記事「css3を使ってクールなナビゲーションバー効果を作成する方法をステップバイステップで教えます(詳細なコード説明)」では、css3を使ってナビゲーションバー効果を作成する方法を紹介します。クールなナビゲーションバーの効果。次の記事では、HTML を使用して簡単なレイアウトを作成する方法を紹介しますので、一緒に見てみましょう。

初心者向け記事：ccsを使って簡単なレイアウトを作る方法（コード付き）

インターネットの普及が進むにつれて、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 を使用します。 divCenter、幅を 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 に設定します。背景色を

#000fff

にします。

.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}

ログイン後にコピー

7. ブラウザでファイルを開いて効果を確認してください。初心者向け記事：ccsを使って簡単なレイアウトを作る方法（コード付き）

完全なコード

<!DOCTYPE html>
<html>
<head>
	<title>布局</title>
</head>
<body>
<style type="text/css">
 body{text-align: center;margin: 0;padding: 0}
 div{height: 200px;color: red;}
 .title{margin: 0 auto; width: 800px; background-color: #ccc}
 
 .footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}
</style>
<div class="title">顶部</div>

<div class="footer">底部</div>
</body>
</html>

ログイン後にコピー

推奨される学習: CSS ビデオチュートリアル######

以上が初心者向け記事：ccsを使って簡単なレイアウトを作る方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。