HTMLで水平ナビゲーション構造を設定する方法-htmlチュートリアル-php.cn

HTMLで水平ナビゲーション構造を設定する方法

高洛峰

リリース： 2017-02-21 13:36:06

オリジナル

1858 人が閲覧しました

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

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

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

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

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

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

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

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

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

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

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

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

コード:

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style type="text/css">  
        ul{   
            float:right;   
        }   
        li{   
            padding-right:30px;   
            float:left;   
        }   
        a{   
            margin-left:20px;   
            font-size:20px;   
            font-weight:bold;   
            color:white;   
            display:block;   
            border:1px solid black;   
            width:100px;   
            text-decoration:none;   
            text-align:center;   
            background-color:darkseagreen;   
        }   
        a:hover{   
            color:red;   
        }   
    </style>  
</head>  
<body>  
<ul>  
    <li>导航一</li>  
    <li>导航二</li>  
    <li>导航三</li>  
</ul>  
  
<a href="#">百度</a>  
</body>  
</html>

ログイン後にコピー

上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。

HTML で水平ナビゲーション構造を設定する方法に関するその他の記事については、PHP 中国語 Web サイトに注目してください。