検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >Html_HTML/Xhtml_Web ページ制作で水平ナビゲーション構造を設定する方法

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

WBOY
WBOYオリジナル
2016-05-16 16:36:032797ブラウズ

この記事では、主にリスト構造を利用して水平方向のナビゲーション構造を設定する 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 コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭 lang="en" >
  4. <メタ charset="UTF- 8">
  5. <タイトル>タイトル>
  6. <スタイル タイプ="text/ css">
  7. ul{
  8. float:right;   
  9. }
  10. li{
  11. padding-right:30px;   
  12. float:left;   
  13. }
  14. a{
  15. margin-left:20px;   
  16. font-size:20px;   
  17. font-weight:bold;   
  18. 色:白;   
  19. display:block;   
  20. border:1px solid black;   
  21. 幅:100px;   
  22. テキスト装飾: なし;   
  23. text-align:center;   
  24. 背景色:darkseagreen;   
  25. }
  26. a:hover{
  27. 色: 赤;   
  28. }  
  29. スタイル>
  30. 頭>
  31. <ボディ>
  32. <ul>
  33. <li>导航一リ>
  34. <li>导航二リ>
  35. <li>导航三リ>
  36. ul>
  38. <a href="#" >百度a>
  39. ボディ>
  40. html>

以上が本書のすべての内容であり、広く学術的に役立つことが期待されます。

翻訳：

http://www.cnblogs.com/xiaoqqmin/p/5317551.html

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：htmlダウンロード機能の詳細解説_HTML/Xhtml_Webページ制作次の記事：htmlダウンロード機能の詳細解説_HTML/Xhtml_Webページ制作

関連記事

続きを見る