基本レビュー（5）| PC静的Webアプリケーション開発

PC静的Webアプリケーションの開発

HTMLとCSSのコンテンツを学習した後、完全なページを作成するには、基本を習得するためにページの全体的なレイアウトを明確に理解する必要もあります。

開発プロセス

1.需要分析

開発した製品の位置付け（製品タイプ、機能、顧客志向）

2.全体的な計画

ウェブサイトに表示するコンテンツ、レベル、表示フォームを決定し、対応するコンテンツのコピーを提供します

3.インターフェースデザイン

ウェブサイトの各ページをデザインし、最終的なデザインの図面、色、データ情報を提供します

4.フロントエンドプログラミング

得られた設計図をコーディングして、Webページのインターフェース機能を実現します。

5.フロントエンドとバックエンドのシステム統合

バックエンド開発者はデータベース設計を実行し、プログラム機能とインターフェースを統合します

6.テストの受け入れ

製品のテストと受け入れ、製品の相互作用の効果、および機能の実現のためのプロジェクト前の計画

一般的な概念

バージョンハート

• Webページのメインコンテンツが配置されている領域は、通常、ブラウザウィンドウの中央に水平に表示されるため、ユーザーはより集中できます。
• 一般的なコア幅の値には、960px、980px、1000px、1200pxが含まれます
• 標準フローでマージンセンタリング方法を使用します

レイアウトプロセス

• ページセンター（表示可能領域）を決定します
• ページ内の行モジュールと各行モジュール内の列モジュールを分析します
  • 固定幅で中央に配置された1列
  • 左に狭く右に広い2列
  • 均等に分散
• HTMLページ、CSSファイルを作成する
• ボックスモデルの原理を使用したCSSの初期化により、DIV + CSSレイアウトを介してWebページの各モジュールを制御します。

ケース演習

タブアイコンアイコン

• アイコンのファイル名は.icoである必要があります（コンバーターで変換できます）
• ファイルはindex.htmlと同じディレクトリに保存する必要があります
• リンクタグを介して設定し、

 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

CSSの段階的な導入

• ページの複数のパブリック部分を抽出し、それらを同時に複数のhtml参照に提供し、デフォルトスタイルのCSS、WebサイトのパブリックスタイルのCSS、および各ページに固有のCSSをクリアします。

• 紹介するときは、公開部分をカバーできるように、最後にそれぞれ紹介する必要があります

  • デフォルトのサンプルをクリアする
    • すべてのウェブサイトで利用可能
    • ネットワーク上の既存のリソースは最初のレイヤーにインポートされ、書き込み後に再度変更することはできません。
    • reset.css
  • パブリックスタイル
    • 1つのWebサイトのすべてのページ
    • すべてのページまたは複数のページの共通部分を見つけて、それらを異なるモジュールに分割します
    • common.css
  • ページのユニークな部分
    • 単一のHTMLページ
    • cssスタイルで個別に記述されており、対応するhtmlファイルにのみ役立ちます
    • common.css

ヘッダーエリア

• ページの上部構造の一般名。通常、ロゴ、ナビゲーションなどが含まれます。

  • ロゴはh1> a構造を使用し、SEO検索キーワードを適切に追加します
  • Navは、ul> li> aのリスト構造を使用してビルドします

• 列の背景、コンテンツにはボードの中央にメインコンテンツが含まれ、コンテンツには2つの部分が浮かんでいます。

• スタイルの書き込みの過程で、最初に書き込みを行って要素の読み込みモードを変更し、次にボックスモデルの属性を変更できます。

• カーソル属性は、マウスが上に移動したときにスタイルポインタ（小さな手）を変更できます

• 小さなプラグインを追加する必要がある場合は、相対位置と絶対位置を使用して追加します

  • border-radiusを使用して、境界線の丸みを設定できます

• 小さなスプライトアイコンを配置します。幅全体を使用して背後の要素の表示に簡単に影響を与える場合は、フックに個別に設定してから、配置して位置をロックできます。

ログインバナーエリア

• レイアウトタイプ、列のフローティングスタイル

• フォームがフォーム要素を使用しないのはなぜですか？実際のWebページでは、一部のフォーム効果は通常、ボタンやドロップダウンメニューなどの他のタグ+ cssスタイル効果によってシミュレートされます。

• ドロップダウンメニューの作成

  • たくさんのdtddを箱に入れるのと同じです
  • 内部コンテンツは左右に浮かせて両端に表示できます

検索エリア

• 次に、列の背景が中央に配置されます
• コンテンツ情報入力の特定の実現は、フォーム属性を介して渡されます

コンテンツエリア

• より多くの製品情報を表示するために使用されるウェブページのメインコンテンツ領域

メインエリア

• 左側のレイアウトは細くて広く、フローティングで実現しています
• 脇の部分の順序付けられていないリスト構造、マウスがliタグに移動した後に子要素が表示され、データが動的に変更されます。後のバックエンド開発を容易にするために、適切なHTMLおよびCSS構造を構築する必要があります。着信データ
  • 小さなアイコンは、フックを使用してコンテンツに追加されます（bタグを設定してから、背景画像を追加します）
• バナー部分のカルーセル、原点をクリックするとjsで実現
  • すべての画像をulに入れ、並べて表示し、相対位置で位置表示を調整し、余分な部分を非表示にして非表示にします
  • 矢印のレイアウトは水平方向のセンタリング方法を使用し、topは100％の中心を与え、次にmargin-topを使用して余分な部分を引き戻します。
  • 右側の矢印は、単一の属性のスタイルを設定するのと同じです

Hot_recruitセクション

• 人気のあるポジションと以下の人気のある会社に関連するパブリックパーツがあるため、パブリックスタイルを慎重に抽出し、パブリッククラス名を使用してCSSを設定し、ポジションでスタイルを分離する必要があります

• レイアウトタイプ：タブバーとタブ構造、全体が上下に配置されたレイアウト中央構造です

• 内容は省略されて...効果

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  

• パブリックスタイルは、パブリックスタイルのcssファイルに追加する必要があります

• 競合するWebページを表示する場合は、display：noneをpublic ulに設定してから、現在のWebページを表示できます。

ホットカンパニーセクション

• 最も重要な鍵は、パブリックスタイルを変更する方法です。これは、以前のパブリックスタイルの表示には影響しませんが、さまざまな場所も変更します。
  • F12を開いた後、継承されたスタイルを確認し、パブリックスタイルの導入後に次のスタイルがインポートされていることを確認してから、パブリックスタイルの名前を変更してCSSの重みを増やします。
  • ボックスに別のスタイルがある場合は、別のクラスを追加してから、そのクラスに1つの属性を設定する必要があります。

フッターエリア

• 左右の領域をフローティングした後にコンテンツを表示する

• 主に一部のテキストとスプライトの表示。小さな画像の表示は通常、背景表示にiタグを追加することによって実現されます。

バックトップエリア

• 設定の先頭に戻り、通常はトランジションを使用して構造を構築します
• ポジショニング方法：固定ポジショニング、プレートの中心で固定位置に保持され、解像度の違いによる要素の位置の大きな違いを避けるために、アニメーション効果はjsを介して実現されます

新しいページを再構築する

• 他のページとの共通性を分析し、モジュールに従って選択を分割およびコピーします

バックトップエリア

• 設定の先頭に戻り、通常はトランジションを使用して構造を構築します
• ポジショニング方法：固定ポジショニング、プレートの中心で固定位置に保持され、解像度の違いによる要素の位置の大きな違いを避けるために、アニメーション効果はjsを介して実現されます

新しいページを再構築する

• 他のページとの共通性を分析し、モジュールに従って選択を分割およびコピーします
• htmlファイルを直接コピーし、不要な構造を削除し、会社のページに必要なパブリック構造部分を保持し、不要なCSSファイルによって導入されたリンクタグを削除し、必要なパブリックスタイルファイルを保持します