myRoad -- div+cssの美しいWebページテンプレートの詳細解説(2)_html/css_WEB-ITnose

前回の記事は栄養が無いようですが、笑、今日も頑張ります。 まず「ボックスモデル」について説明します。CSS では、div はボックスとみなされます。 。 。箱？どのような意味です？あはは、下の写真を見てください:

ここでは、前の記事で紹介したいくつかの CSS プロパティを使用しています。私は長い間、幅と高さは幅と高さであると思っていました。 div の高さ、私はそれを期待していませんでした、私はそれを期待していませんでした、それらは単なるコンテンツの幅と高さです。これでdivのサイズ制御は完了です。ただし、ここで注意していただきたいのは、ボディも大きなボックスなので、デフォルトでマージンが設定されていない場合、ウィンドウの周囲に隙間ができてしまいます。 。 。 。 。マージンとパディングにも注意してください。 。 。略語: margin: 0px または margin 0px 0px これはどういう意味ですか? 忘れた場合は、最初の記事を読んでください。 この時点で、margin、padding、border が設定されていなくても、独自のデフォルト値があり、それらの値はそれほど大きくないのに、なぜそれらの設定に長い時間を費やす必要があるのか​​と言う人もいるでしょう。ここで注意しなければならないのは、Web ページの作成は繊細な作業であり、1 ピクセルの違いが Web ページの美しさに影響を与える可能性があるということです。 さらに理解すると、HTML では「すべてがボックス」であることがわかります。 (もちろんそれだけではありません。私が言いたいのはそれだけではありません。) O(∩_∩)O はは～、実際のところ、div+css は単なるボックス内のボックス、またはボックスを並べたものにすぎません。重要なのは、ボックスの位置を制御する方法です。 ここには「インライン要素」と「ブロック要素」があります。 は独立した行ではなく、ブロック要素、つまり、

の位置を制御します。 ; この Web ページでは float 属性が使用され、幅と高さの絶対位置が直接使用されます。 ここにいる全員が気づいたかどうかはわかりません！

というレイヤーがあります。このレイヤーは、上のフローティングの効果をクリアするために使用されます。下の写真は、このレイヤーを削除した後の効果です:

一番下のフッターレイヤーの位置がめちゃくちゃになっているのがわかります。これは、上のフローティング レイヤーの影響を排除するための

レイヤーの役割です。 Web ページの主なレイアウトは次のようなもので、残りはメニューです。 上の 2 つの図に示されているメニューはすべて

+
• で構成されており、これはもちろん順序のないリストです。下の画像のタイトル

  タグはフォント サイズを制御するために使用されます。

• のデフォルトの表示は縦長です。横長にしたい場合は、主に CSS を使用して表示に慣れる必要があります。この Web サイトの残りの部分は画像が非常に美しいので、このPhotoshopを使う必要があるので、後で紹介します（笑） 今日はここまでです。 。 。 。また明日ね！