W3.CSS Quotes
နာကျင်မှုကိုယ်တိုင်က အချစ်ကို ပင်မသိမ်းဆည်းခြင်းဖြစ်ပါသည်။ ဘဝအစုလိုက်အပြုံလိုက်သည် ဝံပုလွေများ၏ နွေးထွေးသောအပြုံး မဟုတ်ပါ။ ကွီးရယ် ဘာမှ မရှုပ်ထွေးပါဘူး။
မျက်တောင်များပြသခြင်း။
w3-panel အတန်း သည် ကိုးကားဖော်ပြရန် အကောင်းဆုံးအတန်းဖြစ်သည်။
အကိုးအကားများကို မီးခိုးရောင်နောက်ခံ၊ ဘယ်ဘက်ဘောင်ဘားနှင့် စာလုံးစောင်းပုံစံဖြင့် ပြသသည်-
ဥပမာ
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
ကြီးမားသောမျက်တောင်များ
ကြီးမားသောကိုးကားချက်များကို အင်တာနက်ပေါ်တွင် မကြာခဏအသုံးပြုသည်-
ဥပမာ
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
ကိုးကားချက်များ
အကယ်၍ သင်သည် စံ HTML <blockquote> ဒြပ်စင်ကို အသုံးပြုပါက၊ ဘရောက်ဆာသည် အပိုဘယ်နှင့် ညာဘက်အနားသတ်ကို ပေါင်းထည့်မည်ကို သတိပြုမိသည်-
"Make it as simple as possible, but not simpler."
Albert Einstein
ဥပမာ
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
HTML သင်္ကေတများကိုအသုံးပြုခြင်း။
ampersand များအစား ပုံမှန် HTML သင်္ကေတများကို သင်သုံးနိုင်သည်-
သင်္ကေတ | ကုဒ် |
---|---|
≪ | #၈၈၁၀ |
✂ | #9986 |
❝ | #၁၀၀၇၇ |
❞ | #၁၀၀၇၈ |
❠ | #၁၀၀၈၀ |
✔ | #၁၀၀၀၄ |
နာကျင်မှုကိုယ်တိုင်က အချစ်ကို ပင်မသိမ်းဆည်းခြင်းဖြစ်ပါသည်။ ဘဝအစုလိုက်အပြုံလိုက်သည် ဝံပုလွေများ၏ နွေးထွေးသောအပြုံး မဟုတ်ပါ။ ကွီးရယ် ဘာမှ မရှုပ်ထွေးပါဘူး။
နာကျင်မှုကိုယ်တိုင်က အချစ်ကို ပင်မသိမ်းဆည်းခြင်းဖြစ်ပါသည်။ ဘဝအစုလိုက်အပြုံလိုက်သည် ဝံပုလွေများ၏ နွေးထွေးသောအပြုံး မဟုတ်ပါ။ ကွီးရယ် ဘာမှ မရှုပ်ထွေးပါဘူး။
ဥပမာ
<div class="w3-panel w3-light-grey">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert
Einstein</p>
</div>
ဥပမာ
<div class="w3-panel w3-center w3-leftbar w3-sand">
<p><i
class="w3-serif w3-xlarge">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">✔</span>
Programming in C will slowly decline.<br>
Programming in JavaScript
will be more important.</i></p>
</div>
Font Awesome Icons ကိုအသုံးပြုခြင်း။
Font Awesome ဒစ်ဂျစ်တိုက်မှ အိုင်ကွန်များကို သင်လည်း အသုံးပြုနိုင်ပါသည်။
ဥပမာ
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
</div>
သင်သည် အရောင်နှင့် အလင်းပိတ်မှုကိုလည်း ပြောင်းလဲနိုင်သည်-
ဥပမာ
<div class="w3-panel w3-sand w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge w3-opacity"></i>
<span class="w3-serif
w3-xlarge">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</span></p>
</div>
အနက်ရောင်ကိုးကား-
နာကျင်မှုကိုယ်တိုင်က အချစ်ကို ပင်မသိမ်းဆည်းခြင်းဖြစ်ပါသည်။ ဘဝအစုလိုက်အပြုံလိုက်သည် ဝံပုလွေများ၏ နွေးထွေးသောအပြုံး မဟုတ်ပါ။ ကွီးရယ် ဘာမှ မရှုပ်ထွေးပါဘူး။
ဥပမာ
<div class="w3-panel w3-black">
<p class="w3-large
w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
ကတ်များအဖြစ် ကိုးကားချက်များကို ပြသပါ။
နာကျင်မှုကိုယ်တိုင်က အချစ်ကို ပင်မသိမ်းဆည်းခြင်းဖြစ်ပါသည်။ ဘဝအစုလိုက်အပြုံလိုက်သည် ဝံပုလွေများ၏ နွေးထွေးသောအပြုံး မဟုတ်ပါ။ ကွီးရယ် ဘာမှ မရှုပ်ထွေးပါဘူး။
ဥပမာ
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
<p
class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge
w3-text-red"></i><br>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit ...</p>
</div>
နာကျင်မှုကိုယ်တိုင်က အချစ်ကို ပင်မသိမ်းဆည်းခြင်းဖြစ်ပါသည်။ ဘဝအစုလိုက်အပြုံလိုက်သည် ဝံပုလွေများ၏ နွေးထွေးသောအပြုံး မဟုတ်ပါ။ ကွီးရယ် ဘာမှ မရှုပ်ထွေးပါဘူး။
ဥပမာ
<div class="w3-panel w3-card-4 w3-center" style="width:50%">
<span
style="font-size:100px">❝</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>