CSS+DIV: クールなWebページスタイルとlayout_html/css_WEB-ITnoseの実現-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS+DIV: クールなWebページスタイルとlayout_html/css_WEB-ITnoseの実現

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

私も以前から HTML や CSS に触れたことはありましたが、CSS や DIV を使ったプロジェクトも一時期ありましたが、結局、この 2 つがもたらす効果は分かりませんでした。私の想像をはるかに超えています。

実際、フロントエンドページを書いたことのある多くの人は、DIV と CSS が実際には非常に単純であることを知っていますが、望ましい効果や頭の中で想像している効果を実現するのは簡単ではありません。ここには多くのテクニックがあり、それらに精通していないと、作成したページが期待した効果を達成できず、場合によっては非常に見苦しいものになることがあります。我们先

まず DIV とは何か見てみましょう。

DIV はマークアップ言語 HTML にある多くのタグの 1 つですが、ドキュメントのページレイアウトで最も頻繁に使用されるタグです。ドキュメント内の複数のセクションを定義したり、ドキュメントを独立した異なる部分に分割したりできます。これは厳密な組織ツールとして使用でき、それに関連付けられた書式設定は一切使用されません。 id または class を使用して

をマークすると、タグの効果がさらに高まります。 : RMこれは、その内容が自動的に新しい行で始まることを意味します。実際、改行は

に固有の唯一の書式設定動作です。

のクラスまたは ID を通じてカスタムスタイルを適用できます。もちろん、すべての

にクラスや ID を追加する必要はありませんが、そうすることで一定の利点があります。 class 属性と id 属性のいずれかを同じ

要素に適用できますが、どちらか一方のみを適用するのが一般的です。 2 つの主な違いは、class は要素のグループ (類似した要素、または特定のタイプの要素として理解できる) に使用されるのに対し、id は個々の固有の要素を識別するために使用されることです。たとえば、
では複数の class 属性スタイルを使用できますが、id 属性スタイルは 1 つしか使用できません。次は CSS について見てみましょう。
上記で DIV を紹介するときに CSS についていくつか述べましたが、HTML ページ要素にスタイルを追加するときは、タグセレクター、ID セレクター、クラスセレクターをよく使用します。これらのセレクターにはそれぞれ独自の特徴があります。スタイルが統一されている場合は、ページ上のすべての同じタグのスタイルを統一できるタグセレクターを使用するのが最適です。ID セレクターは、より便利なパーソナライズされたスタイルを提供します。 , クラスセレクターに関しては、CSS では複数のクラスセレクタースタイル定義を使用できるため、多様なスタイル定義になります。もちろん、クラスセレクターにも「継承」があり、さまざまなスタイルを派生できます。これらの内容は少し抽象的で、引っ越したことのない人には実感できないかもしれません。いくつかの例を見てみましょう。

? CSS+DIV の威力を示す例をいくつか示します。

そのページのコードは実際には非常にシンプルですが、ページは見栄えが良くなるように作られています。私たちは熟練していないのでまだまだ、私たちは色々なことを使いこなすのが苦手で、ページのレイアウトやスタイルの把握も十分ではないので、作成するページはまだ少し未熟ですが、私たちを信じて応募してまとめてください。 CSS と HTML を提供していただければ、すぐにクールな Web ページが完成します

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。