シンプルな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 ファイルがあります。のように：

XML/HTML コードコンテンツをクリップボードにコピー

html、本文、ul、li、ol、dl、dd、dt、p、h1、h2、h3、h4、h5、h6、フォーム、フィールドセット、凡例、img {
マージン: 0;
パディング: 0;
}
フィールドセット、画像、入力、ボタン {
境界線: なし;
パディング: 0;
マージン: 0;
アウトラインスタイル: なし;
}
ul、ol {
リストスタイル: なし;
}
/*元のスタイルにある小さな黒い点を削除します*/
入力{
パディング上部: 0;
パディング下部: 0;
フォントファミリー: "SimSun", "宋体";
}
選択、入力{
垂直位置合わせ: 中央;
}
/*入力した単語は中央に表示されます*/
選択、入力、テキストエリア {
フォントサイズ: 12px;
マージン: 0;
}
/**/
テキストエリア {
サイズ変更: なし;
}
/*ドラッグを禁止する*/
画像 {
境界線: 0;
vertical-align: middle; /* 画像の下部にあるデフォルトの 3 ピクセルの空白を削除します*/
}
テーブル {
border-collapse: collapse; /*外部リンクを結合*/
}
体 {
フォント: 12px/150% Arial、Verdana、"\5b8b\4f53"; /*UnitedCode は Songti で書かれています*/
color: #666; /*現在のフォントサイズに基づいて 150% の行間隔*/
背景: #fff;
}
.clearfix:before、.clearfix:after {
/* クリアフローティング、これを記述する最も優れた標準的な方法 */
コンテンツ： "";
表示: テーブル;
}
.clearfix:後{
クリア: 両方;
}
.clearfix {
*ズーム: 1; /*IE/7/6*/ /*IE6と互換性あり*/
}
{
色: #666;
テキスト装飾: なし;
}
ホバー{
色: #C81623;
}
h1、h2、h3、h4、h5、h6 {
テキスト装飾: なし;
フォントの太さ: 標準;
フォントサイズ: 100%;
}
s、i、em {
フォントスタイル: 通常;
テキスト装飾: なし;
}
.col-red {
色: #C81623 !重要;/*JD.com メインカラー*/
}
/*パブリッククラス*/
.w {
/*ページのコンテンツを抽出します */
幅: 1210ピクセル;
マージン: 0 自動;
}
.fl {
フロート: 左;
}
.fr {
フロート: 右;
}
.al {
テキスト配置: 左;
}
.ac {
テキスト配置: 中央;
}
.ar {
テキスト配置: 右;
}
。隠れる {
表示: なし;
}

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

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. 擬似要素または二重擬似要素除去法

XML/HTML コードコンテンツをクリップボードにコピー

.clearfix:before、.clearfix:after {
/* クリアフローティング、これを記述する最も優れた標準的な方法 */
コンテンツ： "";
表示: テーブル;
}
.clearfix:後{
クリア: 両方;
}
.clearfix {
*ズーム: 1; /*IE/7/6*/ /*IE6と互換性あり*/
}

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

配置要素の階層:

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

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

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

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

不透明度

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

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

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

隣接要素の階層

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

XML/HTML コードコンテンツをクリップボードにコピー