20191028-20191101フロントエンドの研究ノート

20191028学習の概要

(A)値引き使用

1.タイトル
#ヘッダ
##小見出し
### 3つのタイトル
2.順序付きリストと順不同リスト
番号なしリストまたは「+」、「1を追加することにより、テキスト-フロントテキスト「」 ""順序リストへの2 "" 3」。
3.基準は
「>」で参照することを示す
前記ハイパーリンク
ハイパーリンクが写真で[]()で表されます![]()を表し

(ii)のHTMLは
、コンテンツが定義された構造を有するようにHTMLハイパーテキストマークアップ言語は、コンテンツのタイトル、段落、または画像の部分によって定義されます。
化粧品の外観のためのバックボーンとしてのHTML CSS
カスケーディングスタイルシート/カスケーディングスタイルシート:CSS
API:アプリケーション・プログラミング・インターフェース
W3C:World Wide Webコンソーシアム
1.HTML項
ノート<!--........-->
<要素名>要素
<...>の開始タグ
</ ...>終了タグの
<a属性="属性值">.......... </a>には、要素の追加の属性情報を追加することができます

<ヘッダ>は、特定の領域またはページヘッダを表すために使用される
<NAV>ナビゲーション
<脇>を周囲テーマに関連する追加情報を示すために使用される
<論文>別の記事または他のページコンテンツの存在を示すために使用される
<部>とをテーマの不可欠な部分を表す
<フッタ>脚注ページを示すために使用されているかのエリア
〜H6は、h1のタイトルを表し-タイトル6つの
複数の文字間のスパンを、文字が異なることになることができます
ハイパーリンク
のp段落、段落の記事

書かれた形式の2要素:<ahref="目标"target="页面打开位置">含有する</a>

3.リストの種類
順不同リスト:ドット標識
<UL>タグで順不同のリストを、各リストは、<LI>タグで始まり、
順序付きリスト:数字で標識されたが
、<オール>タグを始め、各リストは、<で始まりますLI>タグの
カスタムリスト:コメントそれとアイテムの組み合わせは
、<DL>タグで始まり、各カスタムリスト項目<DT>が始まり、各カスタムリストの項目は、<DD>で始まります。

4.偽ナンスパケット
Loremのプラスタブキー

 

20191029研究では結論づけ
CSS
CSS3:CSSが最新バージョンである
(a)のCSSスタイルシート
1.外部スタイルシート
外部スタイルシートの参照でCSSの<head>と<リンク>
<リンクのrel =「スタイルシート」のhref =「のmain.css」 >
../前へ戻る
2.内部スタイルシート
内のCSSは、<ヘッド>使用<スタイル> Waibuyangshibiao参照
行3スタイルシート/インラインスタイルシート(不略)内には
直接開始タグにパターンを書きます

(II)CSSのコメントは
フォーマットを書かれた:/ *コメントの内容* /
VSCodeコメントで:CTRL +?

(C)CSSルール
のH1 {
色:赤
テキストALIGN =左:センター;
}
全体のルールセットは、h1はセレクタ,:左性である、所属:右の属性値、括弧の文があります。

(IV)CSSセレクタ
セレクタ素子1
タグ角括弧を除去、効果、その要素に文書全体。
2.クラスセレクタ
。宣言ブロック・クラス名{}
3.IDセレクタ
#ID {名}宣言ブロック
IDは、ユニークな、各ドキュメントの値は一度だけ使用できる属性。

原則と名付けられこぶ
二単語の先頭が大文字(一般用):小さなこぶ原理
大きなこぶの原則:大文字ですべての単語の最初の文字

色単位
・カラーキーワード{のH1:赤;}
*によってHEX 16進数{色位のH1:#foo;}
・関数H1 {色で表されるRGB(赤、緑、青)のRGB:RGB(255,0、 0);}
* HSL値(UI設計)
長さの単位
絶対長さは、デバイスの解像度に依存して変化する特異画素サイズPX
- %の相対長さは、
*ワイルドカードは、すべての要素に適用されます

4.子孫セレクタ
親コレクションセット

サブセット選択
スーパーセット>サブセット

前記擬似クラスセレクタ(制御を必要としません)

および7セットセレクタ/コンバイナセレクタ
例:{H2、H3、H4、H5、H6、h1との
フォント重量:ノーマル;
}
にホバー/
のH1:ホバー{
色:赤;
}

(E)は、重みセレクタは、
IDクラス要素嵌
ABCDの
スタイル。1 0 0 0
ID 1つの0 0 0
クラス0010
要素0001
ワイルドカード0
重要トップ

!重要な特性値の裏に書くこと

(VI)は、ソースシーケンス
重み付け値が上書きされ、後者の前に、同じです。

(VII)は継承され
、いくつかのスタイルの先祖は、クラスの子孫が継承されます。テキストスタイルクラスが継承されています。

(VIII)デバッガ
の要素を表示するには、Firefoxの右にある場合。

方法(IX)表示素子の
表示:ブロック(ブロック要素)
インライン(内側の線要素)
インラインブロック(ブロック内の行)
なし(物理的空間を離れることなく、隠された要素)

(10個)の箱モデル
内容:ボックスの内容
パディング:内のコンテンツの周りのパディング領域
境界:外側境界及び内側境界縁コンテンツ
マージン:透明な外側の余白の境界領域

パディング:パディング値が値であり、その後4週間は、この値です。
例えば10pxのように、2つの値の値をパディング、垂直周りに20ピクセル配列
の3つの値のパディング値は、10pxのような、20ピクセル程度のオーダーの30px
4つの値の値をパディングなど10pxの、 20ピクセル、30pxは、右上の下位40ピクセルの左
仕様例を書き込む:10pxのソリッドカラー境界を

(XI)ノーマルストリーム
CSSの介入なしには、別個のライン、幅及び高さにブロックレベル要素を自動的に、インライン要素が並んで表示され、幅と高さを設定することができます。

(XII)フロート
フロート要素は、左のための属性値と右フローティング要素は
どれも、フロートない:フロート
左方向に残っていない
右右まで

 

 

20191030研究は結論付けた
新しいステートメントを(A):
1.テキストセンター:テキスト整列=左:センター
2.削除に下線:テキスト装飾:なし
3.水平センター:マージン:オート
見つけることができ、親の崩壊に浮き、リードの4サブセット高:オーバーフロー:隠された
(。またはデジタル)削除リストエントリ5.ライフスタイル:なし

(ii)のレイアウト
設計レイアウト使用
1..containerの
コンテナ{
幅:XXのPX;
マージン:オート0;
}
<BODY>
<DIV CLASS = "コンテナ">
...
</ div>
</ BODY>

2.header +コンテナ
ヘッダ{
幅:100%。
}
.container {
幅:XXpx。
マージン:0自動;
}
<BODY>
<ヘッダ> </ヘッダ>
<DIV CLASS = "コンテナ">
...
</ div>
</ BODY>

3.ヘッダ+容器+フッタの
ヘッダ、フッタ{
幅:100%。
}
.container {
幅:XXpx。
マージン:0自動;
}
<BODY>
<ヘッダ> </ヘッダ>
<DIV CLASS = "コンテナ">
...
</ div>
<フッタ> </フッタ>
</ BODY>

(C)なお、ルールウェブ生産
1.ホームページインデックス
いるglobal.css 2. Waibuyangshibiao
3.避け冗長コード
画像又はビデオ別フォルダIMG /画像

 

 

20191031学習の概要

(A)に画像を挿入

 

(ii)は、単一のテキストの垂直中心線の高さが略垂直にセンタリングされ=高い行の高さ= XXpx。

(C)画像の間隔を減少させます

好きサイズ:0;

(D)液体レイアウト

特長は、高い崩壊を生成しません。ボックス柔軟なフレックスに= フレックス:ディスプレイザ・正当化-コンテンツ:センター横方向に中心を。-アイテムを揃える:垂直センター。正当化コンテンツ:空間との間に整列端部は、アイテム間の間隔は等しいです。正当化コンテンツを:スペースの周りに各項目の両側に等間隔。したがって、二回プロジェクトのプロジェクトの大きさと境界の間隔との間のギャップ。フレックス成長:1/2/3 .....残りのスペースの配分比率。

CSSの背景の要素に(E)を挿入{DIV ;:500pxなど高} / :URLタイル張りのポジションの背景色の背景/ NO REPEAT-URL( "パス");タイルないでください:背景背景:URLを( "パス")無反復中心中心ない。庁中間背景:URL(「パス」)は反復しない右上、右上背景:URL(「パス」)なしリピート100pxには50px;横垂直背景サイズ:30px幅30px高い画像スケーリング( F)画像結合:スプライトは、スプライト図滴下したCSSを座標:正の方向に高いとして次の正方向について右幅に.sprite { / 所与のビューポート/ 幅:XXpx; 高さ:XXpx; 背景:URL(「パス」) XXpx XXpx、位置の変化}

 

 

20191101学習の概要

今日、TVguide、あなたのノートでとても少ない新しい知識を記述するためのほとんどの時間。

1.テキストインデント:テキストインデント:XXのPX;

2.サブセット3、n番目の子(3)=最後の子の場合

3.下の要素の境界線スタイル:のborder-bottom

 

 

 

おすすめ

転載: www.cnblogs.com/Wardenclyffe/p/11789346.html