CSS実装メニュー

この記事では、CSS を使用して簡単なメニューを実装する方法を紹介します。 CSS (Cascading Style Sheets) は、Web ページ上にレイアウトして表示されるスタイル言語であり、その主な機能は HTML ドキュメントにスタイルとレイアウトを追加することです。このメニューの例では、CSS を使用してメニューのスタイルとレイアウトを制御します。

まず、

要素といくつかの
• 要素を含む HTML 構造を確立する必要があります。これらの要素はメニューを構成し、各
• 要素がメニュー項目になります。例:

  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

  ログイン後にコピー

  上記の HTML 構造は次のメニューを生成します:

  

  次に、CSS を使用してメニューにスタイルを追加します。

  まず、

  要素の基本スタイルをいくつか設定します:

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  ログイン後にコピー

  これにより、メニュー リストにデフォルトのドットが表示されなくなり、デフォルトのマージンとパディング距離が削除されます。

  次に、各メニュー項目にいくつかのスタイルを追加し、float 属性を使用してそれらを 1 行に配置します。

  li {
    float: left;
  }
  
  li a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }

  ログイン後にコピー

  これにより、各メニュー項目がメニュー バーの 1 行に並びます。また、リンクをブロック要素に変換したり、パディング、テキスト装飾、色やフォントを設定したりするなど、スタイルを追加しました。

  最後に、メニュー バーにいくつかのスタイルを適用します。

  nav {
    background-color: #f1f1f1;
  }
  
  nav ul {
    overflow: auto;
    width: 100%;
  }
  
  nav li {
    float: left;
  }
  
  nav a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }
  
  nav a:hover {
    background-color: #ddd;
    color: #333;
  }

  ログイン後にコピー

  background-color プロパティを使用してメニュー バーの背景色を設定し、overflow プロパティを使用してメニューを作成します。バーはスクロール可能。さらに、メニュー項目の背景とホバー スタイルを設定します。

  最後に、CSS によって実装されたメニューは次のとおりです:

  

  上記の手順により、単純な CSS メニューが実装されました。さまざまなプロジェクトで、さまざまなタイプの Web サイトにパーソナライズされた変更を適用できます。実装プロセスでは、CSS の関連するプロパティと機能を理解し、それらを柔軟に使用してメニューの望ましい効果を実現する必要があります。

  以上がCSS実装メニューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。