ul タグと li タグを使用して CSS 水平ナビゲーションメニューを作成します-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

ul タグと li タグを使用して CSS 水平ナビゲーションメニューを作成します

高洛峰

Nov 24, 2016 am 11:45 AM

css

おそらく、CSS スタイルのテキストナビゲーションバーを作成する最も簡単な解決策は、すべてのリンクをテキスト行に配置することです。この方法は合理的で直感的だと思われます。しかし問題は、すべてのリンクを 1 行のテキストに入れると、リンク間およびリンクの前後の空白を制御するのが難しくなるということです。したがって、すべてのリンクが混雑するのを避けるために、通常は、テキストを分離し、混在しないようにするために、区切り文字として何かまたは改行以外の空白文字を挿入する必要があります。

現在の通常のアプローチは、ul タグと li タグを使用してリンクを順序なしリストとして識別することです。次に、CSS スタイルを適用してそれを制御し、予想どおりコンテナーに表示します。ナビゲーションバーに順序なしリストを使用することは直観に反しているように思えます。なぜなら、順序なしリストを垂直方向に押し上げられたリスト項目として、それぞれの前にリストプリセットマークが配置されるものと考えることに慣れているからです。これは、ナビゲーションバーの水平方向と矛盾しているように見えます。ただし、独立したリストアイテムのコレクションとしてのリストの論理構造は、ナビゲーションバーのリンクに適用できます。また、CSS ルールを使用すると、リストアイテムのデフォルトの表示を強制的に削除して、コンテナ内でリストアイテムを水平に配置することができます。、トップダウンのルールではなく。次に、順序なしリストに基づいて CSS スタイルと XHTML タグを使用して水平ナビゲーションメニューを作成する例を見てみましょう。

CSS コード

 <div id="nav">   
  <ul>   
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>   
</div>

この CSS コードをもう一度見てみましょう:

CSS コード

#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    whitewhite-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}

上記のコードの完全な HTML を見て、コピーして HTML に入れてみましょう。効果を確認できます:

XML/HTML コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>www.52css.com</title>  
<style type="text/css">  
<!--    
#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    white-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}   
-->  
</style>  
</head>  
<body>  
<div id="nav">  
  <ul>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">CSS教程</a></li>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>  
</div>  
</body>  
</html>

上記のコードを分析してみましょう:

xhtml コードは、最初にコンテナ div id="nav" を定義します。このコンテナは、この順序なしリストの水平ナビゲーションメニューのコンテンツを配置するために使用されますが、このコンテナは冗長であると考えて、単に ul id="nav" を定義するだけの人もいます。これを行うことはお勧めしません。当社のサイトはスケーラブルであり、ナビゲーションスタイルがより複雑になるように設計されている場合、UL だけではニーズを満たせないことを知っておいてください。このようなコンテナの定義は、コーディングの習慣にもより一致しています。

#nav はウィンドウの幅、高さ、背景色を定義します。 #nav ul には、マージンとパディングの宣言、フォントと色の宣言が含まれます。 line-height: 30px; は非常に重要な定義です。行の高さの定義がキャンセルされると、リンクテキストの垂直方向のセンタリングが影響を受ける可能性があります。これは、テキストが終了するか br オブジェクトに遭遇するまで、すべてのテキストが強制的に同じ行に表示されることを定義しています。

List-style-type: none in #nav li は、リスト項目で使用されるデフォルトのタグを削除します。リストマークアップのないプレーンテキストに近づけます。 display: inline; ステートメントを使用すると、各項目を別の行に表示して上から下に配置するのではなく、リスト項目をページ上で左から右にフローティングできます。これら 2 つのステートメントは、順序なしリストの水平ナビゲーションメニューの実装の鍵となります。

#nav li a と #nav li a:hover はリンクのスタイルを定義します。内容については詳しく説明しません。padding: 7px 10px; 値を変更して試してみてください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

CSSカルーセル内のスクロール駆動型アニメーションMay 16, 2025 am 09:50 AM

ねえ、スクロール領域で動作するかなり新しいCSS機能がありますか？そうそう、それは＆＃039;のスクロール駆動型のアニメーションです。 CSSカルーセルのアイテムをスクロールしながらアニメーションをトリガーできることを意味するものではありませんか？

CSSインクルージョン：プロジェクトに適した方法を選択しますMay 16, 2025 am 12:02 AM

bestmethod forincludingcsssdependsonprojectsized complexity：1）forlargerprojects、useexternalcssssssssssssssavesainabyandperformance.2）

これは発生することは想定されていません。不可能をトラブルシューティングしますMay 15, 2025 am 10:32 AM

あなたが考えたことのない他の何かであることが判明したそれらの不可能な問題の1つをトラブルシューティングすることがどのように見えるか。

@KeyFrames対CSSトランジション：違いは何ですか？May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity：@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。

静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM

私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆

HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AM

CSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

See all articles