“အသင်းအမှုထမ်း သတင်းစာ” စာသင်းရေးလုပ်ကိုင်ခြင်း ကို မူကြမ်းလုပ်ပါ

“အသင်းအမှုထမ်း သတင်းစာ” စာသင်းရေးလုပ်ကိုင်ခြင်းကို မူကြမ်းလုပ်ပါ

ပထမပိုင်း - HTML အသုံးပြုပါ

<div class="row">
  <div class="column">
    <div class="card">
      <img src="img1.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Bill Gates</h2>
        <p class="title">CEO & Founder</p>
        <p>ကျမ်းမှူးအသင်းအယူအဆ ကျမ်းမှူးအသင်းအယူအဆ ကျမ်းမှူးအသင်းအယူအဆ。</p>
        <p>example@example.com</p>
        <p><button class="button">ဆက်သွယ်</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img2.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>အီလက်ကွန်း မူကြီး</h2>
        <p class="title">ပန်းချီဆရာ</p>
        <p>ကျမ်းမှူးအသင်းအယူအဆ ကျမ်းမှူးအသင်းအယူအဆ ကျမ်းမှူးအသင်းအယူအဆ。</p>
        <p>example@example.com</p>
        <p><button class="button">ဆက်သွယ်</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="width:100%">
      <div class="container">
        <h2>စုဗူး ဂျို့</h2>
        <p class="title">ဖျက်သန်းဆရာ</p>
        <p>ကျမ်းမှူးအသင်းအယူအဆ ကျမ်းမှူးအသင်းအယူအဆ ကျမ်းမှူးအသင်းအယူအဆ。</p>
        <p>example@example.com</p>
        <p><button class="button">ဆက်သွယ်</button></p>
      </div>
    </div>
  </div>
</div>

ဒုတိယပိုင်း - စီးပွားရေးဆိုင်ရာ CSS ပြုလုပ်:

/* တစ်လျှောက်လျှောက် သုံးလျှောက် */
.column {
  ပြား: left;
  ဝတ်: 33.3%;
  ဝိုက်ချင်း: 16px;
  ဝိုက်: 0 8px;
}
/* သတ္တုံကွန်းပြင် ကျော်လွှား မှာ တစ်လျှောက်လျှောက် ပြသောအပြင် */
@media screen and (max-width: 650px) {
  .column {
    ဝတ်ကြောင်း: 100%;
    ပြ: block;
  }
}
/* အကွန်းအစိုးရကို အကွဲခြားကြောင်းကို ပြုလုပ် */
.card {
  အကွန်း: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* အကွန်းအစိုးရတွင် ချည်ချင်းတူပါ */
.container {
  ဝိုက်: 0 16px;
}
/* တိုးလျက်သွားကြောင်းပြန် */
.container::after, .row::after {
  အရိပ်: "";
  ရှားလည်: both;
  ပြား: table;
}
.title {
  အရေနံ: grey;
}
.button {
  အတွန်း: none;
  ခြောက်လုံး: 0;
  ပြားတူ: inline-block;
  ဝိုက်ထဲ: 8px;
  အရေနံ: white;
  နောက်ခဲ့: #000;
  အရှူးအဆို: center;
  စီးဆင်း: pointer;
  ဝတ်ကြောင်း: 100%;
}
.button:hover {
  background-color: #555;
}

亲自试一试