特定のウェブサイトのCSSレイアウト

私は本当にこのウェブサイトがCSSレイアウトで何をしているのが好きです。誰かが私にレイアウトの説明を教えることができるチュートリアルはありますか？特に、より小さいリンクされたイメージをより大きなイメージに整列させる方法。私は少し新しいデザインです。お知らせ下さい。特定のウェブサイトのCSSレイアウト

サイト：http://www.fssjax.org

おかげ

出典

2011-07-14 TopChef

大きな画像の上にある小さな画像は、単純に絶対的に配置されたdivにすぎないかもしれません...私は、CSSの絶対的な配置についてのチュートリアルをお探しになることをお勧めします。 –

Firefox's Web Developer Add-onとFirebugをダウンロードしてください。（Chromeには同様の機能がありますが、他のブラウザでも同様です）。

インストール後、問題のページにアクセスし、アウトライン - >アウトライン要素をクリックします。これによりロールオーバーすると、その周りに赤い枠線が表示され、ページを構成するすべての部分を理解するのに役立ちます。

次に、要素を右クリックし、要素の検査（ポップアップオプションの下部にある）をクリックします。これにより、左側のHTMLと右側のCSSが表示され、ページのレイアウト方法を学ぶのに最適です。

出典

2011-07-14 14:23:17 Dave

ありがとう。 firefoxのプラグインは私が何の手がかりも持っておらず、非常に助けてくれました。 – TopChef

Firefox用

ダウンロードFirebug、それはあなたが簡単にWebページ上の要素を検査し、そのCSSなどクロームもBultの-でインスペクタを持って見ることができます。

要素を調べ、cssを確認してから、わからない場合はcssが何をするかを調べます。

出典

2011-07-14 14:22:14 Ant

まあOKが、それはしかしがらくたナビゲーションのようなものだ...とにかく

、NAVは、フロート（http://www.w3schools.com/css/css_float.asp）属性を使用して構築されています。 2つの要素（コンテナ）が順番に配置され、最初の（ナビゲーション）が2番目の要素の左側にフローティングされます。また、位置（http://www.w3schools.com/cssref/pr_class_position.asp）の属性を使用して画像上に移動させることもできます。

他の人が言ったように、Firebugを使ってすべてが何をしているのか把握します。

出典

2011-07-14 14:28:29

特定のウェブサイトのCSSレイアウト

答えて

関連する問題