1、PRD
フロントエンド FE (フロントエンド) ピクチャ スタイルは、デザイン UI によって指定される PRD ピクチャです。優れたデザイナーの中には、ピクチャにマークを付け、ピクチャ上の距離に応じてページを記述する人もいます。
2. プロジェクトの準備
まずページ構造を確認し、index.html エントリ ファイルにその構造を書き留め、構造がいくつあるかを確認してから、それを細分化します。
対応するスタイルをリセットするには、reset.css 内の対応するラベルをリセットします。
3. 経験が少ない
1) スタイルのリセットとモジュール化
スタイル シートを再設定し、対応するコンテンツを入力して自分でリセットします。一般に、誰かが大規模なプロジェクトの前にスタイル リセット コンテンツを作成または指定し、後でそれを直接引用してネストを最小限に抑えます。これは Web サイトの SEO (検索エンジンの最適化) に便利です。 ） クロールをすること
2) line-height の異なる値の違い
行の高さの値:
数値、150%、1px、1em、normal、通常は、1.5 などの継承可能な数値の値を受け取ります。
line-height の値は通常、font-size にデジタル値を掛けたものです。たとえば、font-size が 10px、line-height が 1.5 の場合、実際の line-height は 10x1.5=15px となります。
font-family:'宋体'(Simsun)\Microsoft YaHei
3) CSS @rules
@charset はスタイルシートのエンコーディングを設定します
たとえば、@charset 'utf-8' を設定します。
@import は他のスタイル ファイルをインポートします
@meida メディアクエリ
@font-face カスタム フォント
4）ファビコン
アイコンはタイトルのアイコン スタイルを指します。オンライン Web サイトを使用して画像を ico 形式の画像に変換し、対応する ico 画像をディレクトリにインポートし、対応するアイコンをヘッドにリンクします。
< link rel = "icon" href = "./淘.ico" >
5) ベースラベル
ヘッドに設定すると、最も基本的な Web ページのナビゲーション、URL を設定できます
6) カスタムアイコン
カスタムアイコン、Alibaba のアイコンフォントでインポート
7) Hタグの適用シナリオ
検索エンジンSEOはクロール時にタグの重みに応じて重要度を判別します
タイトルが最も重要で、次に h1 ～ h6 が続きます。h1 タグはページ上に 1 回だけ使用できます。タイトルがない場合は、h1 をロゴに使用できます。
h2 はサブタイトルに使用され、h3 はページセクションのタイトルに使用され、h4 はセクションのタイトルに使用されます。
8) 単語を絵で置き換える
HTMLで本文を記述し、CSSスタイルで背景URL（画像アドレス）を追加します。
非表示のテキスト: テキストインデックス: -9999
9) 奇妙なボックスモデル
ボックス モデルには 2 つのタイプがあります。
1.標準ボックスモデル
幅の合計 = ボーダー (左右) + 幅 + パディング (左右)
高さの合計 = 境界線 (上下) + 高さ + パディング (上下)
2.IEボックスモデル（変なボックスモデル）
全幅 = 幅
全高=身長
10) css3 (角丸、グラデーション、トランジション)
境界半径: 丸い角
グラデーション: 背景画像: 線形グラデーション (右へ、初期色、終了色) はデフォルトで下へ
Linear-gradient: 線形グラデーションです
トランジション: トランジション属性値のトランジション時間
11) IEフィルター
フィルター: IE8 のグラデーションのサポート
12）CSSハック
IE の互換性をサポートするために、特別な機能があります。
13) 画像は垂直方向の中央に配置されます
1、表示：テーブルセル
垂直整列:中央
画像をセルとしてシミュレートし、画像を垂直方向の中央に配置できます
2. フレックスボックス モデル:
ディスプレイ：フレックス；
コンテンツの位置揃え: 周囲のスペース;
整列アイテム:センター;
14）CSSスプライト
15) フォーム
table{border-collapse:collapse} (境界線のマージ計算)
table-layout: 固定 (列幅を定義するアルゴリズム、固定計算方法はテーブル幅に従って列幅を自動的に計算することであり、各列の幅はテーブル全体の幅となります)
16) 画像形式 webp
Google が開発した画像形式はメモリ使用量は少ないですが、サポートするブラウザは少なくなります