第31章 プロジェクト実践-PC固定レイアウト[1]_html/css_WEB-ITnose

学習ポイント:

1. 準備

2. プロジェクトの作成

4. ナビゲーションの完了

講師: Li Yanhu私

この章私主に HTML5 と CSS3 を使用して Web ページを構築し始めました。最初のプロジェクトは PC 側の固定レイアウトを使用して実装されました。

1つ。準備

1. 1024 ではページの最小幅が 1280 に設計されているため、最初のプロジェクトは 1440x900 の解像度で記録されます。スクロール バーなしで 1263 ピクセル。

2.最初のプロジェクトはPC側の固定レイアウトで、ピクセル(px)単位になります。 3. プロジェクトの素材画像は授業以外で独自にデザインされますが、どのようにデザインされるかについては、アートを理解していないプログラマーでも読みやすいスタイルをデザインできるように簡単に説明します。 。

4. 現在、インターネットの大部分は依然として PC 側のページによって支配されており、次の 2 つのプロジェクトは、この PC 側に基づいた流動的なモバイル側と応答性の高い互換性モードに変更されます。

2つ。プロジェクトを作成します

1.index.html ファイルを作成し、html5 の基本形式を追加します

2. style.css ファイルを作成します。ディレクトリを作成し、html5 に CSS を導入します ;

Three．ウェブサイトの構造

アイデアがない場合は、同じタイプの多数のウェブサイトを参照して、一般的な構造のアイデアを得ることができます。今回制作するWebサイトは旅行会社のコーポレートサイトです。多くの参考を経て、ホームページ用に最も基本的な 4 つのモジュールを選択しました。

//4 つの基本モジュール: ナビゲーション ナビゲーション、ヘッダー、セクション ホーム ページ本文、フッター テール

<nav></nav><header></header><section></section><footer></footer>

IV. CSS セレクター

4 つのモジュールが確立されたら、最初にどのセレクターを使用するかを検討します。セレクターにはさまざまな方法があります

コアは 3 つのタイプに分かれています: 1. 要素セレクター; 2. ID セレクター; 3. クラス セレクター。それぞれを詳しく分析してみましょう。

1. 要素セレクター

要素セレクターは通常、一般的な CSS 定義に使用され、ローカルまたは単一のスタイルには適していません。 Web サイトが非常に小さく、ページ全体に要素タグが 5 個以下でない限り、使用できます。

//要素定義型

body {}

2.id 定義型

id 定義型の特徴は、この要素が一意であり、現在のページの他の要素では定義できないことです

同じ ID 。小規模および中規模の Web サイトの場合、通常は 1 人でデザインおよび制作されており、レイアウト要素に使用できる要素タグの数はそれほど多くありません。たとえば、

、

、

、

の最上位要素です。

//id定義型

#nav {}

3.クラス定義型

クラス定義型の特徴は、同じ効果を得るために複数の定義を定義できることです。実際のアプリケーションでは、大規模および中規模の Web プロジェクトにより適しています。まず、複数の人が管理するプロジェクトでは、クラスを使用すると定義の競合も回避されます。次に、要素を複数のスタイル間で切り替えたり、同時に使用したりする必要がある場合、これを実現できるのはクラスだけです。プロジェクトが大きすぎる場合、クラスを使用すると、複数のモジュール間で切り替えるときの競合を回避することもできます。

//クラス定義タイプ

.center {}

上記の簡単な分析を通じて、私たちの旅行代理店の Web サイトは中小規模の Web サイトであり、一般的なスタイルは要素定義タイプを採用しており、トップレベルのレイアウト要素は ID 定義タイプを使用できます。 ; 他のタグはクラス定義タイプである必要があります。

5つ。完全なナビゲーション

プロジェクトの最初のレッスンでは、まず次のナビゲーションを完成させ、ロゴが提供されています。

//HTMLの最終バージョン、プロセス中に複数の変換プロセスが発生する可能性があります

<nav id="nav">    <section class="center">        <h1 class="logo"> 瓢城旅行社</h1>        <ul class="link">            <li class="active">                <a href="###"> 首页</a>            </li>            <li>                <a href="###"> 旅游资讯</a>            </li>            <li>                <a href="###"> 机票订购</a>            </li>            <li>                <a href="###"> 风景欣赏</a>            </li>            <li>                <a href="###"> 公司简介</a>            </li>        </ul>    </section></nav>

//CSS部分の最終バージョン、プロセス中に複数の変換プロセスが発生する可能性があります

body, h1, ul {    margin: 0;    padding: 0;}body {    background-color: #fff;}ul {    list-style: outsidenonenone;}a {    text-decoration: none;}#nav {    width: 100%;    height: 70px;    background: #333;}#nav .center {    width: 1263px;    margin: 0auto;}#nav .logo {    width: 240px;    height: 70px;    background-image: url(../img/logo.png);    text-indent: -9999px;    float: left;}#nav .link {    width: 650px;    height: 70px;    line-height: 70px;    font-size: 18px;    float: right;}#nav .link li {    width: 120px;    height: 70px;    text-align: center;    float: left;}#nav .link a {    display: block;    color: #eee;}#nav .active a, #nav .link a:hover {}

注: ロゴ採用 h1 タグです。一般に、検索エンジンがキーワードをより適切にクロールできるようにするために、ページには h1 を 1 つだけ配置し、その中に最も重要なキーワードを配置することをお勧めします。ホームページで最も重要なキーワードは旅行会社の名前です。もちろん、ニュース Web サイトの 1 つのニュースなど、他のページにある場合、最も重要なのはニュースのタイトルであり、次に Web サイトの名前が続きます。