CSSを使用してWebサイトに注目の見積もりボックスを作成する方法（セクション6）

投稿日: 2022-04-20 2022-04-20
タグ: css, Spin Up

序章

このチュートリアルでは、デモンストレーションWebサイトの6番目のセクションに表示されているように、CSSを使用して注目の引用をWebサイトに追加します。このセクションを使用して、お気に入りの引用、あなたの仕事についての証言、またはサイト訪問者へのメッセージを特集することができます。必要に応じて、この引用を別のWebページにハイパーリンクすることもできます。ここで使用するメソッドは、他のCSS /HTMLWebサイトプロジェクトに適用できます。

Featured quote section on demonstration website

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

注目の見積もりセクションのスタイルルールの作成

注目の引用セクションを作成するには、コンテナーのスタイルを設定するクラスと、注目のテキストのスタイルを設定するクラスを作成します。 styles.cssファイルに、次のコードスニペットを追加します。

styles.css

. . .

/* Section 6: Featured Quote  */

.column-quote {
  width: 90%;
  height: 475px;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:100px;
  margin:auto;
  margin-bottom:150px;
  border: 20px solid #FEDE00;
}

.quote {
  font-size:80px;
  font-weight:bold;
  line-height: 1;
  text-align: center;
}

このコードスニペットでは、CSSコメント/* Section 6: Featured Quote */を追加して、CSSコードのこのセクションにラベルを付けています。次に、引用ボックスのスタイルを設定するために使用するクラスcolumn-quoteを定義し、コンテナーのサイズ、パディング、マージン、および境界線を指定しました。

余白はautoに設定されていることに注意してください。これにより、コンテナはページの中央で水平方向に中央揃えになります。さらに、ページの下部にいくらかのスペースを与えるために、下余白は200ピクセルに設定されています。他の宣言について詳しく知りたい場合は、コンテンツ、パディング、ボーダー

getdocs

13036