はじめに
この実験では、CSS プログラミングの基本を学びます。この実験の目的は、CSS を使って HTML 要素をスタイリッシュにレイアウトする方法をより深く理解することです。CSS セレクター、プロパティ、値を使って視覚的に魅力的で応答性の高い Web ページを作成する方法を学びます。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
ゼブ模様のリスト
VM には既に index.html と style.css が用意されています。
交互の背景色を持つリストを作成するには、:nth-child(odd) または :nth-child(even) の疑似クラスセレクターを使用して、兄弟要素の中での位置に基づいて要素に異なる background-color を適用します。これは <div>、<tr>、<p>、<ol> などのさまざまな HTML 要素に適用できます。
<li> 要素で横並びのリストを作成する方法の例を以下に示します。
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
</ul>
li:nth-child(odd) {
background-color: #999;
}
右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。
まとめ
おめでとうございます！あなたはゼブ模様のリストの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。