はじめに
この実験では、CSS プログラミングの基本を学びます。この実験の目的は、CSS を使ってウェブページをスタイリッシュにする基本を学習者に紹介することです。この実験が終了するまでに、学習者は CSS を使って視覚的に魅力的なウェブページを作成する方法をしっかりと理解しているようになります。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 94%です。学習者から 100% の好評価を得ています。
縞模様の背景パターン
VM には既に index.html と style.css が用意されています。
このコードは、白い背景に垂直な縞模様を作成します。
パターンを作成するには：
background-colorプロパティを白に設定します。background-imageにlinear-gradient()値を使用して垂直な縞を作成します。background-sizeプロパティを設定して各縞のサイズを指定します。background-repeatをrepeatに設定して、パターンが要素を埋めるようにします。
要素の固定された width と height は、示すためだけのものであることに注意してください。
以下はコードの例です：
<div class="stripes"></div>
.stripes {
width: 240px;
height: 240px;
background-color: #fff;
background-image: linear-gradient(90deg, transparent 50%, #000 50%);
background-size: 60px 60px;
background-repeat: repeat;
}
右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。
まとめ
おめでとうございます！あなたは縞模様の背景パターンの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。