Ra ra バンジョー バンジョー
Ra ra へようこそバンジョー バンジョー ページ。ラ ラ バンジョー バンジョー。
(ラ ラ バンジョー バンジョー)
。
次の CSS を適用します。
ソース コードの例 [www.52css.com]
#navigation {
position: abstract; left: 0;
}
#content
{
margin-left: 10em
;長さ 10em のナビゲーション バーが左側に設定されます。ナビゲーションは絶対的に配置されるため、ページの残りの部分のフローには影響を与えません。そのため、コンテンツ領域の左境界線の幅をナビゲーションの幅と同じに設定するだけで済みます。バー。
とても簡単です！ただし、この 2 列のアプローチに制限されるものではありません。スマートな配置により、必要な数のブロックをレイアウトできます。たとえば、3 番目の列を追加する必要がある場合は、HTML に「navigation2」ブロックを追加し、次の CSS を適用
でき
ます
。
left: 0; width: 10em;
}
#navigation2 {
位置: 絶対; right: 0;
}
#content {
margin: 0 および right と left を設定します。 margin to 10em */
}
要素を絶対配置することの唯一の副作用は、要素が独自の世界に存在するため、最終的にどこに配置されるかを正確に決定する方法がないことです。上記の例をナビゲーションが少なく、コンテンツ領域が多い領域で使用する場合は問題ありませんが、特に長さと幅に相対値を使用する場合は、下に脚注のようなものを配置することを諦めなければならないことがよくあります。本当にそうしたい場合は、絶対に配置するのではなく、フロートさせてください。
Float
Floating は要素を同じ行の左または右に移動し、周囲のコンテンツはフローティングします。
フローティングは、ページ内に小さな要素を配置するためによく使用されます (このサイトの元のデフォルト CSS では、HTML 基本ガイドと CSS 基本ガイドの「次のページ」リンクは右側にフロート表示されます。以下も参照してください: first-in pseudo-elements文字の例) だけでなく、ナビゲーション列などの大きなブロックでも使用できます。
次の HTML の例では、次
の CSSを
適用できます。
ソース コードの例 [www.52css.com]
#
navigation2 {
float
:
right;
}
margin: 0 10em;
}
次の要素が浮動オブジェクトの周囲に回り込まないようにする場合は、clear プロパティを使用できます。 Clear: left は左側の要素をクリアし、clear: right は右側の要素をクリアします。clear: Both は左側と右側の要素の両方をクリアします。したがって、たとえば、ページ フッターが必要な場合は、ID が「footer」である HTML にブロックを追加して、次の CSS を使用
でき
ます
。
}
はい、わかりました。脚注は、列の長さに関係なく、すべての列の下に表示されます。
ページの「大きな」ブロックに重点を置き、一般的な位置決めとフローティング
について説明
しましたが、これらのメソッドはそれらのブロック内の任意の要素にも使用できることに注意してください。配置、フローティング、ボーダー、パディング、ボーダーを組み合わせることで、レイアウトに関しては CSS なしではテーブルでできることは何もありません。
テーブル レイアウトを使用する唯一の理由は、古いブラウザに対応したい場合です。ここで CSS が実際に進歩を示します。ユーザビリティの高いページは、テーブルベースのページのファイル サイズのほんの一部です。