CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。

1. リストシンボルを設定する

list-style-type: attribute; //リストのスタイルを設定する

list-style-type: none; //スタイルをクリア

円、円盤、小数点など、自分で試すことができるプロパティは多数あります。。。。

2. リスト画像シンボルを設定する

ul、ol のイメージシンボルを設定する

ul、ol{
     リストスタイルの画像: url("li.png")
 }

コード：

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>リストシンボルを設定する</title>
<スタイル タイプ="text/css">
ul、ol{
 リストスタイルの画像: url("li.png")
}
</スタイル>
</head>
<本文>
<ul>
 <li>ホーム</li>
 <li>私のブログ</li>
 <li style="list-style-image: url('image.png')">私のフォトアルバム</li>
 <li>メッセージを残す</li>
 <li>私について</li>
</ul>
<オル>
 <li>ホーム</li>
 <li>私のブログ</li>
 <li>私の写真アルバム</li>
 <li>メッセージを残す</li>
 <li>私について</li>
</ol>
</本文>
</html>

表示効果:

3. シンプルなナビゲーションメニューを作成する

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>シンプルなナビゲーション メニューを作成する</title>
<スタイル タイプ="text/css">
#ナビゲーション{
/* 幅: 120px; */
 
 フォントファミリ: Arial;
 フォントサイズ: 14px;
 テキスト配置: 中央;
}
#ナビゲーション ul{
 リストスタイルタイプ: なし;
 マージン:0px;
 パディング:0px;
}
#ナビゲーション li{
 border-bottom:1px solid #9F9FED; /* 下線を追加 */ 
 float: left; /* 水平配置 */
} 
#ナビゲーションli a{
 表示: ブロック;
 高さ:1em;
 パディング: 5px 5px 5px 0.5em;
 テキスト装飾: なし;
}
#ナビゲーション li a:link、#ナビゲーション li a:visited{
 背景色: #1136c1;
 色: #FFF;
}
#navigation li a:hover{ /* マウスが通過したとき*/
 background-color: #002099; /* 背景を変更する */
 color: #ff0; /* テキストの色を変更する */
}
</スタイル>
</head>
<本文>
<div id="ナビゲーション">
 <ul>
  <li><a href="#">ホーム</a></li>
  <li><a href="#">私のブログ</a></li>
  <li><a href="#">私のフォトアルバム</a></li>
  <li><a href="#">メッセージを残す</a></li>
  <li><a href="#">私について</a></li>
 </ul>
</div>
</本文>
</html>

要約する

上記は、エディターが紹介した CSS リストスタイル設定とナビゲーションメニュー作成の実装コードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: W3C チュートリアル (4): W3C XHTML アクティビティ

>>: Vueのコンポーネントの詳細な説明