はじめに
この実験では、CSS プログラミングの基礎を学び、HTML ドキュメントにスタイルを適用する方法を学びます。一連の実践的な演習を通じて、CSS ルールを作成および変更する方法、特定の要素を対象とするセレクターの使用方法、およびテキスト、背景、および境界にスタイルを適用する方法を学びます。この実験が終了するとき、CSS について十分な理解を得ており、視覚的に魅力的な Web ページを作成するためにそれを使用できるようになります。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、CSS プログラミングの基礎を学び、HTML ドキュメントにスタイルを適用する方法を学びます。一連の実践的な演習を通じて、CSS ルールを作成および変更する方法、特定の要素を対象とするセレクターの使用方法、およびテキスト、背景、および境界にスタイルを適用する方法を学びます。この実験が終了するとき、CSS について十分な理解を得ており、視覚的に魅力的な Web ページを作成するためにそれを使用できるようになります。
VM 内には既に index.html
と style.css
が用意されています。
親要素内の子要素を均等に配置するには、親要素の display
プロパティを flex
に設定してフレックスボックスレイアウトを使用します。子要素を水平方向に均等な間隔で配置するには、justify-content: space-between
を使用します。子要素の周りに余白を持たせて配置するには、justify-content: space-around
を使用します。以下は例です:
<div class="evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
.evenly-distributed-children {
display: flex;
justify-content: space-between;
}
右下隅の「Go Live」をクリックして 8080 ポートでウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。
おめでとうございます! あなたは「子要素の均等配置」の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。