CSS の欠陥チェックと埋め込み_html/css_WEB-ITnose

前の言葉 : CSS については、以前にもいくつかの基礎知識を紹介しました。 CSS は主にページのスタイルを設定するために使用されます。一般に、Web サイトでは、CSS を別の .css 外部ファイルに個別にパッケージ化する必要があります。一般的に、スタイルの設定は難しくありませんが、十分な注意と忍耐が必要です。以前に単純な静的ページを作成したとき、フロートのクリアや聖杯のレイアウトなどの問題が頻繁に発生しました。これらの知識は難しいものではありませんが、まだ完全には整理できていません。また、後で具体的な問題に基づいて具体的な分析を行います。前回、興味があれば、以下でコミュニケーションをとることができます。

1. Fireworks ツール

——このツールは、デザイン図面に基づいて Web ページを作成するために使用されます。一般的に使用されるツールには、picpick などが含まれます。このツールについて簡単に紹介します。

1.1 通常の切り替え

K	V	H	Z	U	T	I	G
スライス	ブラック	手	ズーム	グラフィック	テキスト	色選択	色塗り

1.2 一時的な切り替え

ctrl—Xiaohei	ctrl+space—ズームイン
スペース—小さな手	ctrl+Alt+スペース—ズームアウト
通常のズームインとズームアウトは自動的に画像の中央に移動しますが、一時的なズームインとズームアウトは元の位置のままで、非常に便利です (Ctrl+N で作成できます)新規; Ctrl+O で開きます)

1.3 その他のヒント

写真:

、2、Web サイトの 2 つの構築戦略

段階的な強化 - 最初はサイトの最小限の特徴のみを構築し、その後さまざまな機能を継続的に追加します。サイトの完全な機能を最初から構築し、ブラウザ用にテストして修正します

3. 一般的なレイアウトの紹介

1) 固定レイアウト 固定レイアウト

2) レスポンシブ レイアウト レスポンシブ レイアウト

3) 流動的レイアウト

4) グリッド レイアウト

5) ウォーターフォール レイアウト

6) 聖杯レイアウト、両翼レイアウト 聖杯レイアウト 両側固定、中央に流れるレイアウト

4. Web サイトのアイコンを設定

4.1 http を開く://www.jd.com/favicon.ico を参照して、アイコンを右クリックし、[名前を付けて画像を保存] を選択してローカルに保存します (他のディレクトリでも構いません)。 )、ページ ソース ファイル内で & Lt; head & gt; & lt;/head & gt; 4.3 SHORTCUT ショートカット ショートカット

参照順序に注意してください。 、index は特定のスタイルです。特定の Web ページのスタイルは、オーバーライドできるようにパブリック スタイルの後ろに配置する必要があります

リンクタグ

それだけ理解してください

charset

文字エンコーディングリンクされたドキュメントのテキスト

この属性をサポートする主流ブラウザはほとんどありません

href

リンクされたドキュメントの位置 リンクされたドキュメント内のテキスト 言語 リンクされたドキュメントと現在のドキュメントの関係 その逆rel、逆の関係リンクされたドキュメントがロードされるウィンドウまたはフレームリンクのタイプドキュメント

6. レベル

6.1 必ず位置を追加してください。そうしないと Z インデックスが有効になりません

6.2 後ろのボックスは前のボックスを抑制し、Z インデックスの高いボックスは抑制します。 z インデックスが低いボックス。ボックスの z インデックスが高いほど、そのボックス自体を参照するだけでなく、その親レベルも高くなります。になります。

要約: 階層は子だけでなく、親 (ピンパパ) も比較する必要があります。理論上、z-index には最大値はありませんが、実際には 21474836472 の 32 乗になります。最小値は 0 ではなく、負の数になる可能性があります。

7. 丸い角 (border-radius border-radius)

7.1 要素に丸い境界線を追加するための CSS3 プロパティ:

border-top-left-radius:2px; ;

border-bottom-right-radius:2px;

border-bottom-left-radius:2px;

7.2 短い形式: border-radius:2px; 順序は左上隅 (上) から時計回りに設定されます。左上、右下、左下)

8. 絶対的な配置では要素の表示モードを変更できますが、相対的な配置では変更できません

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

Green Blue Alpha (赤の値、緑の値、青の値、透明度)

色の値の範囲は 0 ～ 1、ゼロの場合は先頭を省略できます。

補足 1: Emmet 構文

http://docs.emmet.io/cheat-sheet/

補足 2: Web ページのパフォーマンスの最適化

CSS 圧縮

http://tool.oschina.net/jscompress/

Web ページのパフォーマンス テスト

http://www.webpagetest.org/

		hreflang
		レル
一般的に使用されるものは、スタイルシートとショートカットアイコン (サイズ - Web サイトのアイコンのサイズ、rel="icon" にのみ適用)		rev
この属性をサポートする主流のブラウザはほとんどありません		target
この属性をサポートする主流のブラウザはほとんどありません		type