はじめに
この実験では、CSS プログラミングの基本を学びます。この実験は、初心者が CSS を始める手助けと、美しく応答性のある Web ページを作成するための CSS の使い方を学ぶことを目的としています。実験全体を通じて、セレクター、プロパティ、値などのさまざまなトピックを扱い、概念を強化するための実践演習を行います。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 95%です。学習者から 100% の好評価を得ています。
三角形
VM 内には既に index.html と style.css が用意されています。
CSS のみを使って三角形を作成するには、次の手順に従います。
- 同じ
border-width（20px）を持つ 3 つのボーダーを使って三角形を作成します。 - 三角形が向いている側と反対側の
border-colorを目的の色に設定します。隣接するボーダーのborder-colorはtransparentにする必要があります。 - 三角形のサイズを調整するには、
border-widthの値を変更します。
以下はコードの例です。
<div class="triangle"></div>
.triangle {
width: 0;
height: 0;
border-top: 20px solid #9c27b0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
右下隅の「Go Live」をクリックして 8080 ポートで Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。
まとめ
おめでとうございます！あなたは三角形の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。