ホームページ > ウェブフロントエンド > htmlチュートリアル > myRoad -- div+cssの美しいWebページテンプレートの詳細解説(2)_html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 12:30:16
オリジナル
1129 人が閲覧しました

前回の記事は栄養が無いようですが、笑、今日も頑張ります。 まず「ボックスモデル」について説明します。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を使う必要があるので、後で紹介します(笑) 今日はここまでです。 。 。 。また明日ね!
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート