スタイルのよい価格表

10613 ワード
tailwindcss css tutorial テキストリンク
ようこそ私たちのシリーズで最新のCSSのチュートリアルを風に.このエディションでは、応答価格表のコンポーネントをスタイリングされます.これらは一般的にユーザーのSaaS製品、Webホスティング、またはサブスクリプションサービスの計画機能と価格の簡単な概要を与えるために使用されます.
ここで、私たちが作成する価格表は、一旦完成したように見えるでしょう.

新しい空白のHTMLファイルを作成し、CDN経由で風車をロードします.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive Pricing Table - Tailwind CSS</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
  </head>
  <body>
    <!-- responsive pricing table here -->
  </body>
</html>
注-私たちは、このチュートリアルの目的のためにCDNを使用しているので、それは私たちを取得し、迅速かつ容易に実行することができます.実際の世界では、PostwindプラグインとしてTailwindをインストールすることをお勧めしますhere .
我々は今、すべての家を収容するためのコンテナで始まる価格表を構築することができます.
<div class="container m-auto">        
  <div class="flex flex-wrap items-center justify-center w-full text-center">            
    <!-- 3 x pricing plan columns here -->
  </div>    
</div>
私たちはcontainer m-auto 幅と中央値を制限するには、価格表を揃えます.また、Trewindでは3列レイアウトを達成するためにFlexboxを使用していますflex 追加するクラス.

コラムφ1 -基本計画


1列目のマークアップは以下の通りです.
<!-- basic plan -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
  <div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
    <div class="py-5 text-blue-700 bg-white">
      <h3>Basic</h3>
      <p class="text-5xl font-bold">
        $19.<span class="text-3xl">95</span>
      </p>
      <p class="text-xs uppercase">Per Month</p>
    </div>           
    <div class="py-5 bg-blue-700 text-white rounded-b">
      <p>Feature of the plan</p>
      <p>Another feature plan feature</p>
      <p>Yet another plan feature</p>
      <button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
        Get Started
      </button>
    </div>            
  </div>
</div>
これを読んで、あなたはクラスのほとんどがかなり自己説明的であるとして起こっていることを理解することができます.しかし、より重要なクラスのいくつかを詳しく見てみましょう.
  • w-full md:w-1/2 lg:w-1/3 – これは、小さな画面(最大幅:767 px)、1/2媒体の画面(最大幅:1023 px)のコンテナの幅の1/2幅と大きな画面(分幅:1024 px)のコンテナの幅の1/2の列として列を設定します.
  • hover:bg-blue-900 hover:text-white – Tarwindを使用すると、ホバーとクラスの前にホバースタイルを適用することができます.
  • border-blue-700 bg-blue-700 text-blue-700 – 尾風の色は50から900の間にスケールで調整することができます.

    • スタンダードコラム2


    2列目のマークアップを次のように追加します.
    <!-- standard plan -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
   <div class="flex flex-col rounded">
     <div class="py-7 bg-blue-700 text-white rounded-t">
       <h2 class="uppercase text-yellow-300 font-extrabold">
         Most Popular
       </h2>
       <h3>Standard</h3>
       <p class="text-5xl font-bold">
         $49.<span class="text-3xl">95</span>
       </p>
       <p class="text-xs uppercase">Per Month</p>
     </div>
     <div>
       <div class="pt-1 pb-7 bg-blue-700 text-white rounded-b">
         <p>Feature of the plan</p>
         <p>Another feature plan feature</p>
         <p>Yet another plan feature</p>
         <button class="px-5 py-2 mt-5 uppercase rounded bg-yellow-300 text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
            Get Started
         </button>
      </div>
    </div>
  </div>
</div>
    私たちはこのコラムに暗い背景を与えました、それで、それが他のコラムより背が高いように、それはいくつかの追加パディングとともにより目立っています.Flexレイアウトを使用しているので、すべての列は水平軸に沿ってきれいに集中します.

    コラム経度3


    3列目のマークアップを次のように追加します.
    <!-- advanced plan -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
  <div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
   <div class="py-5 text-blue-700 bg-white">
      <h3>Advanced</h3>
      <p class="text-5xl font-bold">
        $99.<span class="text-3xl">95</span>
      </p>
      <p class="text-xs uppercase">Per Month</p>
    </div>          
    <div class="py-5 bg-blue-700 text-white rounded-b">
      <p>Feature of the plan</p>
      <p>Another feature plan feature</p>
      <p>Yet another plan feature</p>
      <button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
        Get Started
      </button>
   </div>            
 </div>
</div>
    この列のマークアップは、テキスト変更のみの第1カラムと同じです.
    私たちの価格表は現在ブラウザでテストする準備ができています.すべてのレイアウトをレイアウトに移動する場合は、レイアウトのモバイルデバイス上の単一の列、デスクトップデバイス上の3つの列には、デスクトップのレイアウト.
    これは、このチュートリアルを終了します.あなたがすぐにジャンプして、この価格表の機能的なバージョンがこのコードで遊ぶことを望むならば、この価格表を見つけることができますGitHub . あなたがこのチュートリアルを楽しむならばTailwind CSS tutorials .
    [react]userRefの使用
    バイパスWindows