基本レビュー（7）|ストリーミングLayout_JDプロジェクト

Lagou Educationの「ビッグフロントエンド雇用トレーニングキャンプ」コースに登録してから1か月が経ちました。自習とクラスへの登録についての私の見解について話したかったの
ですが、クラスには登録しないといつも感じていました。コストは比較的高いですが、自分の勉強で学習内容をマスターできると思います。私自身の状況では、ほぼ1年間の自習フロントエンドコースがあります。この自習プロセスでは、まずクラスメートに質問し、さまざまなフロントエンド学習ルートを調べて学習計画を指定してから、視聴します。 Bilibiliのコースで、おそらくフレームワークがあることを学びましたが、私の基盤は特にしっかりしていないことがわかりました。私はいくつかを学んでいます。学んだ後、クラスでそれを使用する方法がわかりません。またはそれが最終的に使用されるかどうか...私は特に大胆で、私はいつも何も知らないと感じています（実際には少しですが、私が学んだことを忘れています）
一部の人々がいることを除外していません自習や自分で考えてみるのに適していますが、結局、学習方法や知識のレベルは人それぞれ違うことがわかりました。コース登録後の最大の感想は、学習が非常に体系的で、節約できるということです。あなたはリソースを尋ねて見つけるために時間を費やし、あなたが理解していないいくつかの詳細を研究して熟考することにもっと時間を費やします。最も重要なことは、クラスの先生と家庭教師に、いつでも、どのような側面でも、問題を解決するように依頼できることです。
これに関しては、プルフックによって割り当てられた家庭教師や校長について話す必要はありません。これはドラゴンサービスの完全なセットです。問題はすべて解決できます。解決できない場合は、支援するチームがあります。以前の研究では、わからないことを他の人に聞かないかもしれませんが、クラスに登録した後、家庭教師に難病を尋ねました。これにより、独立して考えることもできました（チャットと学習相談はどちらもオンラインサービスです） ）

---

素晴らしい最後

FlowLayout_JDプロジェクト

原理

• フローレイアウトはパーセンテージレイアウトであり、非固定ピクセルレイアウトとも呼ばれます

• ボックスの幅をパーセンテージで設定すると、ボックスの伸びに応じて特定のページを変更できます

• フローレイアウトは、モバイルWebの一般的なレイアウト方法です

• ページの最大サイズを定義する必要があります（max-width \ min-width）

JDホーム

準備オーケー

• cssスタイルでコンテンツを初期化します
• ブラウザの互換性の問題の解決策を含む

ヒントエリア

• 最初にレイアウトを作成してから、コンテンツを変更します
• 最初にdivタグ内のすべての要素を配置してから、それらを連続してフロートさせることができます
• ベースラインの垂直方向の配置垂直方向の配置：中央

検索バー

• 左右固定幅・高さ、お父さんとは真ん中のみ変更可能（ホーリーグレイルレイアウト）

  • 左右の位置を固定し、標準フローから分離
  • 中央のアダプティブ100％幅、左右のマージンを与え、中央のコンテンツを縮小させます

• 小さなアイコンの疑似要素の追加について

  • content： ""コンテンツ属性から直接
  • 疑似要素の配置の問題：右：-8px;正の数は属性の方向が反対であることを意味し、負の数は属性の方向が同じであることを意味します

/* 通过伪元素来设置它的边线 */
.search-box .search span::after {
    position: absolute;
    content: "";
    right: -8px;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

• ダブルスプライト

  • 花火では、スプライト画像は元の画像の半分に拡大縮小されます
  • 次に、新しいサイズに従って座標を測定します
  • コードの背景サイズも記述する必要があることに注意してください。スプライト画像は元の画像の半分です。

• 検索バー

  • CSS3スタイル属性を使用して検索ボックスのコンテンツを配置します
  • background-color：transparentは、入力ラベルの背景色を透明にするために使用できます
  • border：noneは検索ボックスの境界線を表示できません

フォーカスマップのレイアウト

• 背景はCSS3スタイルを使用して作られています

• border-radiusをarcに設定します

• 固定固定位置決めについて

  • 固定が設定されると、ドキュメントフローを離れ、次の要素をカバーできるように位置を放棄します

• CSS3背景グラデーション効果

  • MDAを使用して新しい属性を学習する

  • 線形グラデーション

    background-image: linear-gradient(0deg, #f1503b, #c82519 50%);

カルーセルレイアウト

• 画像タイプ

  • dpg picture：JDが独自に開発した画像圧縮テクノロジーにより、ユーザーの閲覧トラフィックが50％節約され、ユーザーのWebページの開封速度が大幅に向上します。
  • webp画像：Googleが開発した画像フォーマットで、画像の読み込みを高速化し、サーバーのブロードバンドリソースとデータスペースを大幅に節約します。

• ボックスのスタイルを設定します

  • ボックスに境界線を付けたいので、CSS3で新しいボックスのインデントを使用できます

.banner ul li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 187px;
    /* 利用CSS3的样式来进行修改，让盒子进行内缩 */
    padding: 44px 3.3% 0;
    box-sizing: border-box;
}

アクティビティ割引レイアウト

• ビッグボックス設定幅
• タグが連続して表示されるように、内部のタグごとにfloatを設定し、対応するセグメントのパーセンテージを設定します
• 各タグ内の画像は個別のブロックであり、幅は100％に設定でき、高さは比例して減らすことができます

スーパーマーケットのナビゲーション

• 外の大きなボックスはオーバーフローを設定する必要があります：非表示
• 写真のサイズはカスタムスタイルで個別に設定できます
• コンテンツの次のページでは、水平方向に100％になるように配置を設定すると、非表示になります。

新規参入者限定

2つの部分の内容を50％に設定した後、境界線を持つようにマージン値を指定します

100％横に並べると隠れてしまいます

[外部リンク画像が転送されています...（img-DTTribkh-1609679064583）]

新規参入者限定

2つの部分の内容を50％に設定した後、境界線を持つようにマージン値を指定します

オンラインコースノートの内容はすべてLagouEducationの「BigFront-endEmployment Training Camp」からのものです。興味のある友達がすぐに参加します〜行動を起こす方が良いです

次のコンテンツはもっとエキサイティングです〜