シンプルなHTMLとCSSの使い方の詳細な説明

HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます。

1.開発の前に、まず開発環境を構成する必要があります。Sublime、WebStorm、Vscode、Hbuilder、Atom などの開発ソフトウェアをインストールする必要があります。いずれか 1 つを選択してください。私はWebstormを使用しています。

2.メイン フォルダー内に関連するプロジェクト フォルダーを作成します。プロジェクト関連のファイルをまとめて、管理と将来のメンテナンスを容易にします。

その中には、プロジェクトに関連するいくつかのファイルが含まれています

ホームページまたはホームページ index.html default.html

CSS フォルダ CSS ファイル

ベース.css グローバル.css

画像フォルダは、Web サイト上のすべての画像を保存するために使用されます。

Jsファイル

オーディオまたはビデオファイル

3.その後、スタイルの初期化を実行する必要があります。通常、すべての Web サイトは開発前にスタイルの初期化を実行します。たとえば、Taobao や JD などの大規模な Web サイトには、独自のスタイル初期化 CSS ファイルがあります。のように：

これにより、開発者は各タグのスタイルを初期化し、共通クラスを再利用しやすくなります。

4.ウェブサイトの構造を分析する

ウェブサイトを作る際の標準または一般的な慣行もあります

レイアウトの順序は通常、上から下、左から右になります。

ページを作成するときは、一般的には標準フローの要素を使用し、次にフローティングまたは配置を使用することが考えられます。

標準フロー要素の中では、幅と高さが最も安定しているため、パディングが最初に使用され、マージンが最後に使用されます。

ウェブサイト構造内のどのタグもボックスモデルとみなされ、幅と高さを設定できます。ただし、一部の要素では、幅と高さを設定しても機能しません。

インライン要素の幅と高さを機能させるには:

1. インライン要素をブロックレベル要素またはインラインブロック要素に変換する

2. フローティングラベル

3. 位置決めとラベルの取り外し

インライン ブロック要素をレイアウトする場合、インライン ブロック要素間にはデフォルトで数ピクセルの間隔が設けられます。これらの数ピクセルの間隔は、フロートを使用してのみクリアできます。

位置決めには 4 つの種類があります。

固定絶対相対静的

通常、Web サイトの構造を分析する場合、Firefox を使用してこの Web ページのスクリーンショットを撮って保存できます。

次に、Fireworks を使用して、Web サイト上の特定のコンテンツの幅、高さ、色などを抽出できます。

Fw の一般的なショートカットキー:

スポイトツールで色を拾う

K スライスツール 要素の幅を計測する

Z 拡大鏡ツール

Vムーブ

ポインターツール

よく使用される複合属性:

背景

mso-char-indent-count:3.4900;">フローティングの理由は、親ボックスに高さがないためです。元の高さは、標準フロー内の子要素によってサポートされます。ただし、子要素がフローティングすると、標準フローから外れ、親要素の高さが 0 になります。

1.親ボックスの高さを設定する

2. クリア：両方

3. オーバーフロー: 隠しはBFCモードをトリガーし、フローティングをクリアするためにも使用できます。

4. 擬似要素または二重擬似要素除去法

(疑似要素はフロートをクリアするためによく使用されます)

配置要素の階層:

trbl値を書き込まずに要素に絶対位置のみを指定すると、その位置に表示されます。

配置された要素 (相対的および絶対的または固定的) には、階層のプロパティまたは概念があります。複数の隣接する要素が同じ位置に配置されている場合、デフォルトでは後者の要素が前者の要素を抑制します。両方とも配置された要素である場合、デフォルトではレベルはすべて 0 ですが、後者の要素は前者の要素を抑制します。現在の要素をその背後にある要素の上に表示したい場合は、z-index を使用して階層を変更する必要があります。

z-index の値の範囲は 0 ～ 9999999 です。正の数を使用し、負の数を使用しないようにすることをお勧めします。

また、position:relative は標準フローでの位置を占有し続けるため、そのレベルで他のコンテンツが表示されなくなることに注意してください。

不透明度

不透明度: 互換性の問題があり、背景色を透明にするだけでなく、内部のコンテンツも透明になります。

背景: rgba(0,0,0,.3);

背景色のみを透明にし、コンテンツを不透明にする

隣接要素の階層

マウスがTaobaoのウェブページに入ると境界線が点滅します

このように、ホバー疑似要素を使用して、隣接する要素の階層を利用して境界線の色やその他のプロパティを制御し、Taobao と同じ効果を実現できます。

シンプルな HTML と CSS の使い方に関する上記の詳細な説明は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.html