ပြုလုပ်ခြင်း: ပစ္စည်းကို ထိုးထားရာ

ပစ္စည်းကို ထိုးထားရာ ပြုလုပ်ခြင်း

ပထမပုံ - HTML ထပ်ထည့်ခြင်း:

<div class="card">
  <img src="jeans3.jpg" alt="Jeans" style="width:100%">
  <h1>လျှို့ဆွဲသောရုပ်တန့်</h1>
  <p class="price">$19.99</p>
  <p>ရုပ်တန့်ကို စာကြည့်မှု...</p>
  <p><button>ထပ်ထည့်ကာလတင်</button></p>
</div>

ဒုတိယပုံ - CSS ထပ်ထည့်ခြင်း:

.card {
  အကျယ်: 0 4ပဲ 8ပဲ 0 rgba(0, 0, 0, 0.2);
  အကျယ်: 300ပဲ;
  အဝေး: auto;
  အစိတ်ချဲ့: center;
  စာရင်း: arial;
}
.price {
  အရောင်: grey;
  သုံးရာချင်း: 22ပဲ;
}
.card button {
  နှဲချဲ့: none;
  ခြေါင်း: 0;
  ပေါက်ရုံ: 12ပဲ;
  အရောင်: white;
  နောက်ခံမျက်နှာ: #000;
  အစိတ်ချဲ့: center;
  နှုတ်ချိန်: pointer;
  အကျယ်: 100%;
  သုံးရာချင်း: 18ပဲ;
}
.card button:hover {
  opacity: 0.7;
}

亲自试一试