1

ホームページを作ろうと思っているのですが、なかなかうまくいきません。フローティングやボクシングなどのさまざまな用語をすべて目にしますが、アイテムの配置に何を使用しているか混乱しています。これは、このウェブサイトhttp://happycog.com/で私が意味することの非常に良い例です

ヘッダーが画面の特定のスペース、ナビゲーションが別のスペース、別のエリアが別のエリア、フッターが別のエリアなどになるようにするにはどうすればよいですか。

私の言いたいことを理解し、いくつかのヘルプ/チュートリアルに私を導くことができれば、私はそれを感謝します. ありがとう

4

4 に答える 4

2

pomologue の回答に追加すると、見ているサイトについて混乱を招く可能性があることの 1 つは、ユーザーがスクロールしたときにメニュー バーが画面の上部に固定されていることです。彼らはjavascriptでそれを行っているので、CSS でそれができなくても、自分を責めないでください! 本当にjsでそれをしたい場合は、コメントを返してください。いくつかの指針を示します:)

于 2013-07-20T18:23:54.130 に答える
0

あなたが提供しているウェブサイトは、divを次々と配置しているだけです:

    <div id="first block"> ... </div>
    <div id="second block"> ... </div>

同様の結果が必要な場合は、これが役立つかもしれません: http://www.insitedesignlab.com/how-to-make-a-single-page-website/

于 2013-07-20T18:19:50.967 に答える
0

View Source と Firebug/Web Inspector はあなたの友達です。最も簡単に言えば<div>、スタイルを設定した一連のタグを作成するだけです。

<div id="header">...</div>
<div id="navigation">...</div>
<div id="content">...</div>
<div id="footer">...</div>
于 2013-07-20T18:15:31.263 に答える
0

投稿した例から、 sticky-header/persistent-headerと呼ばれるものを探しています。

引用した例は特定の divと画面位置にロックされているため、JavaScript が必要になる可能性があります。

ヘッダーが常に一番上にある永続的なヘッダー部分のみを探している場合は、このリンクに CSS での優れた実装があります。

http://www.virendrachandak.com/techtalk/sticky-header-and-footer-using-css/

http://happycog.com/のようなより動的なものについては、CSS-Tricks に優れたチュートリアルがありますが、JQuery も含まれます。

http://css-tricks.com/persistent-headers/

デモ: http://css-tricks.com/examples/PersistantHeaders/

さらに、Google、Firebug/Chrome 開発者ツール、およびその他の関連ツールがあなたの味方です。

幸運を！

于 2013-07-20T18:25:15.577 に答える