第31章プロジェクト実戦-PC端固定レイアウト[1]

11350 ワード

学習のポイント:
1.準備
2.プロジェクトの作成
3.サイト構成
4.CSSセレクタ
5.ナビゲーションの完了
先生:李炎恢
 
本章では主に学習用HTML 5とCSS 3を用いてWebページの構築を開始し,最初の項目はPC側固定レイアウトを用いて実現する.
一.準備
1.最も低い効果を達成するために、最初の項目は1440 x 900の解像度で録画される.なぜなら、1024は最低幅のページを収容できないからである.ページは1280の最低幅設計を採用し、スクロールバーを1263ピクセルに削除します.
2.最初の項目はPC側の固定レイアウトで、画素(px)単位を採用します. 
3.プロジェクトの素材のピクチャー、课外で独立して设计するので、课程は设计することはできなくて、どのように设计することについて、私は简単に说明することができて、美工のプログラマーを知らないで、设计することができてまた见ることができる格调を设计することができます.
4.現在、インターネットの大部分はPC端末のページが主で、後の2つの項目は、このPC端末によって流体移動端末と応答式互換モードに変更されます.
二.プロジェクトの作成
1.indexを作成する.htmlファイル、html 5基本フォーマットを追加します. 
2.imgとcssの2つのディレクトリを作成します.
3.styleを作成する.cssファイルは、cssディレクトリに格納され、html 5にcssが導入されます.
三.ウェブサイトの構造
何の考えもない場合は、同じタイプのサイトを大量に参考にして、大まかな構造を理解することができます.私たちが作るサイトは旅行会社の企業サイトです.多くの参考を経て、トップページでは、最も基本的な4つのモジュールを選択しました.
//4つの基本モジュール:navナビゲーション、headerヘッダ、sectionトップページ本体、footer末尾
<nav></nav>
<header></header>
<section></section>
<footer></footer>

四.CSSセレクタ
4つのモジュールが構築されると,まずどのセレクタを選択すべきかを考える.セレクタにはいろいろな方法があります
コアは3種類に分けられる:1.エレメントセレクタ;2.idセレクタ;3.classセレクタ.それぞれ具体的に分析してみましょう.
1.エレメントセレクタ
要素セレクタは一般的に一般的なCSS定義に使用され、ローカルまたは単一のスタイルでは適用されません.あなたのサイトが非常に小さい限り、ページ全体の要素ラベルが5つを超えない限り、それは使用できます.
//要素定義型
body {
}

2.id定義型
id定義型の特徴は、この要素が一意性であり、現在のページの他の要素を再定義できないことを示すことです.
同じid.中小規模のWebサイトでは、一般的にシングルデザインで作成され、要素ラベルはあまり多くなく、レイアウト要素にid定義型を使用することができます.たとえば、