CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのインラインリストアイテムとは

インラインリストアイテムを使用して、水平方向のナビゲーションバーを作成します。 ＆amp; lt; li＆amp;gt;を設定しますインラインとしての要素。

例

次のコードを実行して、水平方向のナビゲーションバーを作成してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
         }
         .active {
            background-color: #4CAF50;
            color: white;
         }
         li {
            border-bottom: 1px solid #555;
            display: inline;
         }
      </style>
   </head>
   <body>
      <ul>
         <li><a href = "#home">Home</a></li>
         <li><a href = "#company" class="active">Company</a></li>
         <li><a href = "#product">Product</a></li>
         <li><a href = "#services">Services</a></li>
         <li><a href = "#contact">Contact</a></li>
      </ul>
   </body>
</html>

  1. CSSの疑似クラスとは何ですか

    CSS疑似クラスは、さまざまな要素の特殊な状態を表します。これらのクラスは、ドキュメント内の基本要素だけでなく、ステータス、位置、履歴などの外部要因も表します。これらの疑似クラスを使用すると、開発者は、を介して直接選択できない要素のスタイルを設定することもできます。 CSSセレクター。 構文 以下は、要素でCSSPseudoクラスを使用する構文です- Selector:pseudo-class {    css-property: /*value*/; } 例 CSS疑似クラスを使用する例を見てみましょう- <!DOCTYPE html> <html&

  2. CSSの疑似要素とは何ですか

    CSS疑似要素は、基本的に、最初の文字、最初の行など、要素の特定の部分のセレクターです。：afterおよび：before疑似要素を使用して、要素の前後にそれぞれ挿入できます。 構文 以下は、要素でCSS疑似要素を使用するための構文です- Selector::pseudo-element {    css-property: /*value*/; } 例 CSS疑似要素の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> ol, ul {    list-st