CSS ボックスモード 1 (DIV レイアウトによるクイックスタート)_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS ボックスモード 1 (DIV レイアウトによるクイックスタート)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:28 PM

センターは最近何十人もの人を採用しており、私はもう数日間この山に留まらなければならないようです。何しろ何十人もいるのに、どうやって放っておくことができるのでしょうか？まずはウォーミングアップのために記事を投稿します！また、以前のバッチの先輩兄弟姉妹が私にさらに

アドバイスをくれることを願っています。

Web デザインでよく聞く属性名、コンテンツ、パディング、ボーダー、マージン、CSS ボックスモードはすべてこれらの属性を持っています。これらの属性を日常生活の箱（ボックス）に置き換えることで理解できるため、私たちが日常生活で目にする箱もこれらの属性を持っているため、ボックスパターンと呼ばれます。中身とは、箱の中にあるものであり、詰め物は、箱の中の (貴重品) が損傷するのを防ぐために追加された発泡体またはその他の耐震補助材料です。、ボックスが置かれたときに表示されます。通気性と取り外しを容易にするために、すべてを重ねずに、一定の隙間を空けてください。 Web デザインでは、コンテンツはテキスト、画像、その他の要素を指すことがよくありますが、実際のボックスとは異なり、小さなボックス (DIV ネスト) を指すこともあります。現実のものは通常、ボックスよりも大きくすることはできません。そうでない場合は、ボックスが大きくなってしまいます。伸ばすことはできますが、CSS ボックスは伸縮性があるため、ボックス自体よりも大きいため、せいぜい伸びますが、損傷することはありません。塗りつぶしには幅属性のみがあり、これは生活の中で見られる箱の耐震アクセサリの厚さとして理解できますが、境界線にはサイズと色があり、これは私たちが生活の中で目にする箱の厚さとして理解できます。箱が何色の素材でできているか、境界は箱と他のものとの間の距離です。実際には、さまざまなサイズと色のボックスを一定の間隔で、一定の順序で正方形に配置すると、その正方形から見下ろすと、Web ページのレイアウトと同様のグラフィックと構造が表示されるとします。

従来のフロントエンド Web デザインは次のように実行されます。要件に従って、まずメインの色、使用する画像の種類、フォント、色などを検討してから、ソフトウェアを使用します。 Photoshop では自由に絵を描くことができ、最終的には小さな絵に切り分けることができます。CSS に切り替えてからは、この考え方を変更する必要があります。私たちの主な考慮事項はページです。コンテンツのセマンティクスと構造は優れています。Web ページが完成した後、Web ページのスタイルを簡単に調整できます。 CSS レイアウトの目的はコードを読みやすくすることであり、ブロックが明確になり、コードの再利用が強化されるため、構造は非常に重要です。

私の Web デザインが非常に複雑だと言いたい場合、後でその効果を実現することは可能ですか?私が言いたいのは、CSS の制御機能は非常に強力であるため、CSS で効果を実現できない場合、テーブルでその効果を実現するのは一般に難しいということです。ところで、CSS を使用する非常に実用的な方法があります。利点は、Web サイトの構築を注文した場合、Web ページのレイアウトに CSS を使用すると、後で顧客が不満を感じた場合、特に色を変更するのが非常に簡単になることです。カスタマイズすることもできます。顧客はいくつかのスタイルの CSS ファイルから選択することができます。また、動的呼び出しを実装するプログラムを作成して、Web サイトのスタイルを動的に変更することもできます。

構造とパフォーマンスの分離を理解する

実際のレイアウトの練習を始める前に、もう 1 つ理解しましょう。これは、構造とプレゼンテーションの分離後の CSS レイアウトの特性も利用します。簡潔かつ最新の利便性、これが CSS を学ぶ目的ではないでしょうか。たとえば、P タグがある場合、これは段落ブロックであることを意味します。段落を 2 文字分右インデントしたいと考える人もいるでしょう。スペース

ボックスを追加し、続けてスペースを追加しますが、追加のパフォーマンスを必要とせずに、P タグの CSS スタイル P {text-indent: 2em;} を指定できるようになりました。結果の本文の内容は次のようになります。コントロールタグ:

コード:

< ;p>(Shantou Little Tornado) をサポートしてください

この段落のフォント、フォントサイズ、背景、行間隔などを変更したい場合は、対応する行を追加してください。 CSS を P スタイルに変換する必要はありません。次のように記述します。

コード:

段落の内容

これは構造と表現の混合物です。これらが一緒に書かれている場合、多くの段落が統一された構造とパフォーマンスを持っている場合、コードを累積的に記述するのは面倒になります。

例:

CSS による組版

コード:

结构代码是这样的：代码: