1

HTML5に慣れるためにサンプルのWebページを作成しようとしています。また、Facebookのページレイアウトを複製してみたいと思います。つまり、画面の幅全体に広がるヘッダー、下部の小さなフッター、左側のリンクのリスト、中央のメインコンテンツ、およびオプションのセクションで構成される3列の本文です。右側（広告、フレームなど）。それはきちんとしていて、複数のウィンドウサイズでうまく表示されます。

<header>これまで、それぞれ、、<footer>およびブロックを使用<nav>してこれを達成しようとしました。<section>ただし、ページにはいくつかの異常があります。ウィンドウが最大化されると、フッター（著作権情報を含む単純なテキストブロックを含む）がヘッダーの下のページの右上に表示されます。一方、ウィンドウにすべてを表示するのに十分なスペースがない場合は、本文のテキストがセクションの下に配置されます。つまり、ウィンドウに合わせて要素を動かし続けます。

誰かが私が目指している外観をどのように達成するか教えてもらえますか？Googleで読んだいくつかのCSS属性を試してみましたが、自分が何をしているのかわからないと確信しており、実際にいくつかのガイダンスを使用できます。

ありがとうございました！

4

4 に答える 4

0

これは、HTML と CSS の基本的な理解であるため、HTML5 に関する質問ではありません。Web 開発に飛び込む場合は、フローティングなどの基本的な CSS を理解する必要があります。YouTube や NetTuts のチュートリアルをお勧めします。いくつかの div をいじって、ページ内で移動し、CSS で操作するだけで、まとまり始めます。次に、ヘッダーとフッターが固定された 3 列のレイアウトを作成するのは簡単なことのように思えます。

CSS を使用したフローティング Div

于 2012-12-15T05:00:40.060 に答える
0

CSSはとても難しいと思います。見栄えがよく、さまざまなプラットフォームやブラウザーで機能するページを作成することは非常に困難です。Bootstrapなどの css フレームワークを使用するのが最も簡単な場合があります。

それをあなたのウェブサイトにドロップし、それを使用してレイアウトを作成します。ブラウザーの開発ツール ( firefox の場合はFirebug ) を使用して、さまざまな要素に適用されているスタイルを調べます。ニーズに合わせてスタイルを変更します。

HTML5 は、無料でページ レイアウトを提供するわけではありません。あなたが言及した要素（、、headerなどsection）は、表示方法を指定するのではなく、セマンティックページを作成するために使用されます。

于 2012-12-15T05:00:49.200 に答える
0

あなたのコードがなければ、あまり役に立ちません。しかし、私はそれがfloat問題のためだと確信しています。この CSS プロパティをフッターに追加しますclear: both

それが役立つことを願っています。

于 2012-12-15T05:03:46.367 に答える
0

ちょっとしたハックをしようとしているのか、それともこれらすべてを実行する完全なライブラリを探しているのかはわかりませんが、後者を探している場合は、Twitter Bootstrapをお勧めします。これは、多くの HTML5 機能を実装するためのクロスプラットフォーム ソリューションであり、非最新ブラウザーのフォールバックに頼ることさえあります。唯一の欠点は、レスポンシブなコンポーネントを初期化するためにjQueryが必要なことです*。ただし、これらの機能を実装する予定がない場合、これはオプションです。レスポンシブ デザインは、驚くべきことに、純粋な CSS であるため、JavaScript を必要としません。お役に立てれば！

*編集：「レスポンシブ」ではなく、「インタラクティブ」を意味します。

于 2012-12-15T05:07:27.890 に答える