3

私が話しているヘッダー

私は最近、潜在的なクライアントからこのデザインを受け取りました。一緒に作業することに同意しませんでしたが、練習のためにデザインをコーディングしようとしていました。これは私の設計ではありません (そうであると主張しているわけではありません)。純粋に練習のために使用するつもりはありません。これが、私が会社の名前をブロックした理由でもあります。

とにかく、このヘッダー/ナビゲーション領域に関しては、かなり困惑しています。ロゴの横の装飾と、基本的に 2 つの div にまたがるロゴには、本当にうんざりします。これをどのようにコーディングするのだろうかと思っていました。

各サイドの装飾用の div だけを考えていたので、ロゴは絶対に配置する必要があります。これは正しい解決策ですか？

最初は 960grid システムに組み込むことさえ試みましたが、ロゴのスパンの問題がグリッドを非常に困難にしていたため、うまくいきませんでした。

4

3 に答える 3

3

1 つのリストを使用し、3 番目の項目にクラスを追加して、ロゴmargin-right用のスペースを作成するのに十分な大きさにします。h1このようにして、マークアップは適切でセマンティックになり、複数divの やリストを使用する必要がなくなります。

nth-childクラスを追加する代わりに、CSS セレクターを使用することもできます。

于 2012-08-13T02:31:25.283 に答える
2

クライアントがフォントを購入したかどうかを見たことがありますか?

それ以外は、リンクとテキストの間のドットを削除し、背景に画像を使用してから、ページのクラス、つまりホーム、アバウト、ギャラリーを指定する UL を 1 つ作成し、PHP を使用して current_page クラスを追加します。 .

次に、ギャラリーが次のマークアップで別の li を作成した後:

<li class="logo"><a href="/">Logo</a></li>

このようにスタイルを追加します。

li.logo {
    background: transparent url(....) no-repeat;
    width: width of logo;
    height: height of logo;
    display: block;
    overflow: hidden;
}

li.logo a {
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

私があなたのためにそれをしたい、またはあなたに例を見せてほしいなら、私は喜んでします.

于 2012-08-13T02:33:31.280 に答える
1

次のように、デザインを 2 行に分割します。

ここに画像の説明を入力

「デザイン」ビットは、最初の行の中央にあるロゴ イメージの両側に配置できます。これにより、ロゴはリンクできますが、デザインはリンクできません。2 行目は、ナビゲーション要素とロゴ用にスライスされます。さまざまな画像すべての正確な寸法である幅と高さを設定して、すべてを div 内に配置します。複雑にしないでおく。行を個々の div に入れることはできますが、それがなくても問題ないと思います。

超低予算で実装するには、画像をそのまま使用し、必要なリンクを追加するために画像マップを適用します。ロールオーバー画像などのオプションが失われますが、それが低予算の理由です.

これは学習課題なので、いくつかの異なる方法でコーディングしてみてください。すべての要素をフロートさせ、それらを絶対的に配置し、列を作成し、行を作成し、大きな背景画像を使用し、その上にナビゲーションを配置します。その他、考えられることはすべて行いますが、テーブルはありません! :)

于 2012-08-13T02:59:26.300 に答える