ホームページ > 記事 > ウェブフロントエンド > 水平ナビゲーション構造の設定方法_html/css_WEB-ITnose
水平ナビゲーション構造の設定方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:22:501376ブラウズ
水平ナビゲーション構造を設定する方法
ここで紹介する水平ナビゲーション構造を設定する 2 つの方法は、主にリスト構造に依存します。
方法 1: ブロック構造とインライン構造の組み合わせ。
ここでは、まずブロック要素とインライン構造の違いを紹介します。
(1) ブロック構造では、行の高さ、幅（幅、高さ）、マージン（余白、パディング）、ボーダー（枠線）などの属性を設定できます。インライン要素で設定できるのは行の高さ、左右のマージンのみであり、外側のマージン、上下のパディング、境界線などの属性はありません。
(2) ブロック構造はより横暴であり、他の要素と行を共有しません。インライン要素は他の要素内でネストできます。
一般的なブロック要素には、ul、ol、p、form などが含まれます。一般的なインライン要素には、meta、img、span、h1 ～ h6、label などが含まれます。
しかし、場合によっては、ブロック構造にインライン要素の特性を持たせたり、インライン要素にブロック要素の特性を持たせたりするために、この 2 つを組み合わせることもあります。インライン要素にブロック要素の特性を持たせる例を挙げると、a タグは最も重要なインライン タグの 1 つであり、ユーザーは指定されたリンクに従って対応するページにアクセスできます。 a タグの下の要素をより美しくするために、このリンクに境界線、マージン、背景色などの属性を設定します。これらの属性はブロック構造のみが持つことがわかっているため、現時点では、リンク コンテンツを収容するためにインライン タグ a を引き続き使用するだけでなく、このインライン要素がブロック構造に関連する属性も持つことができることを期待しています。
この問題は「a{display:block}」の設定で解決できます。
同様に、水平ナビゲーションを設定する目的を達成するためにリストを使用したい場合、リストの各行を同じ行に表示する必要があります。このとき、次のことを組み合わせることでもこの目標を達成できます。ブロック構造とインライン構造。
リストにコード行を追加するだけです: list{display:inline;}
方法 2 float 属性設定を使用します。
属性 float は、左右を含む 2 方向に浮動するように設定できます。水平ナビゲーションを設定すると、リストが左に水平にフローティングされます。これは、フローティングを設定した後、ナビゲーションの順序が左から右、つまり左から右の順に水平になることを期待しているためです。ナビゲーション 4 へ。これにより、より多くのユーザーの習慣に沿ったものになります。
コード:
<!DOCTYPE html><br /><html><br /><head lang="en"><br /> <meta charset="UTF-8"><br /> <title></title><br /> <style type="text/css"><br /> ul{<br /> float:right;<br /> }<br /> li{<br /> padding-right:30px;<br /> float:left;<br /> }<br /> a{<br /> margin-left:20px;<br /> font-size:20px;<br /> font-weight:bold;<br /> color:white;<br /> display:block;<br /> border:1px solid black;<br /> width:100px;<br /> text-decoration:none;<br /> text-align:center;<br /> background-color:darkseagreen;<br /> }<br /> a:hover{<br /> color:red;<br /> }<br /> </style><br /></head><br /><body><br /><ul><br /> <li>导航一</li><br /> <li>导航二</li><br /> <li>导航三</li><br /></ul><br /><br /><a href="http://www.baidu.com">百度</a><br /></body><br /></html>