Html_HTML/Xhtml_Web ページ制作で水平ナビゲーション構造を設定する方法-htmlチュートリアル-php.cn

Html_HTML/Xhtml_Web ページ制作で水平ナビゲーション構造を設定する方法

WBOY

リリース： 2016-05-16 16:36:03

オリジナル

2810 人が閲覧しました

この記事では、主にリスト構造を利用して水平方向のナビゲーション構造を設定する 2 つの方法を紹介します。

方法 1: ブロック構造とインライン構造の組み合わせ。

ここでは、まずブロック要素とインライン構造の違いを紹介します。

(1) ブロック構造では、行の高さ、幅（幅、高さ）、マージン（余白、パディング）、ボーダー（枠線）などの属性を設定できます。インライン要素は行の高さ、左右のマージンのみを設定できますが、外側のマージン、上下のパディング、境界線などの属性はありません。

(2) ブロック構造はより高圧的であり、他の要素と行を共有しません。インライン要素は他の要素内でネストできます。

一般的なブロック要素には、ul、ol、p、form などが含まれます。一般的なインライン要素には、meta、img、span、h1 ～ h6、label などが含まれます。

しかし、ブロック構造にインライン要素の特徴を持たせたり、インライン要素にブロック要素の特徴を持たせたりするために、両者を組み合わせることがあります。インライン要素にブロック要素の特性を持たせる例を挙げると、a タグは最も重要なインラインタグの 1 つであり、ユーザーは指定されたリンクに従って対応するページにアクセスできます。 a タグの下の要素をより美しくするために、このリンクに境界線、マージン、背景色などの属性を設定します。これらの属性はブロック構造のみが持つことがわかっているため、現時点では、リンクコンテンツを収容するためにインラインタグ a を引き続き使用するだけでなく、このインライン要素がブロック構造に関連する属性も持つことができることを期待しています。

この問題は、「a{display:block}」の設定によって解決できます。

同様に、水平ナビゲーションを設定する目的を達成するためにリストを使用したい場合、リストの各行を同じ行に表示したい場合、このとき、を組み合わせることでこの目的を達成することもできます。ブロック構造とインライン構造。

リストにコードを 1 行追加するだけです: list{display:inline;}

方法 2: float 属性設定を使用します。

float 属性は、左右を含む 2 方向に浮動するように設定できます。水平ナビゲーションを設定すると、リストが左に水平にフローティングされます。これは、フローティングを設定した後、ナビゲーションの順序が左から右、つまり左から右の順に水平になることを期待しているためです。ナビゲーション 4 へ。これにより、より多くのユーザーの習慣に沿ったものになります。

コード:

XML/HTML コードコンテンツをクリップボードにコピー