W3.CSS

W3.CSS ပင်မစာမျက်နှာ W3.CSS နိဒါန်း W3.CSS အရောင်များ W3.CSS ကွန်တိန်နာများ W3.CSS Panels များ W3.CSS နယ်နိမိတ်များ W3.CSS ကတ်များ W3.CSS ပုံသေများ W3.CSS ဖောင့်များ W3.CSS Google W3.CSS စာသား W3.CSS Round W3.CSS Padding W3.CSS အနားသတ်များ W3.CSS ရုပ်ထွက် W3.CSS ခလုတ်များ W3.CSS မှတ်စုများ W3.CSS Quotes W3.CSS သတိပေးချက်များ W3.CSS ဇယားများ W3.CSS စာရင်းများ W3.CSS ပုံများ W3.CSS ထည့်သွင်းမှုများ W3.CSS တံဆိပ်များ W3.CSS Tag W3.CSS အိုင်ကွန်များ W3.CSS တုံ့ပြန်မှု W3.CSS Layout W3.CSS Animations W3.CSS Effects များ W3.CSS ဘားများ W3.CSS Dropdowns W3.CSS Accordions W3.CSS လမ်းညွှန် W3.CSS Sidebar W3.CSS Tabs များ W3.CSS Pagination W3.CSS တိုးတက်မှုဘားများ W3.CSS Slideshow W3.CSS Modal W3.CSS Tooltips W3.CSS ဇယားကွက် W3.CSS ကုဒ် W3.CSS စစ်ထုတ်မှုများ W3.CSS လမ်းကြောင်းများ W3.CSS Case W3.CSS ရုပ်ဝတ္ထု W3.CSS အတည်ပြုခြင်း W3.CSS ဗားရှင်းများ W3.CSS မိုဘိုင်း

W3.CSS အရောင်များ

W3.CSS အရောင်အတန်းများ W3.CSS Color Material ပါ။ W3.CSS Color Flat UI W3.CSS အရောင် Metro UI W3.CSS Color Win8 W3.CSS Color iOS ပါ။ W3.CSS အရောင်ဖက်ရှင် W3.CSS Color Libraries များ W3.CSS Color Schemes W3.CSS Color Themes W3.CSS Color Generator

ဝဘ်အဆောက်အဦ

ဝဘ်မိတ်ဆက် ဝဘ် HTML ဝဘ် CSS ဝဘ် JavaScript ဝဘ်လက်ကွက် Web Band Web Catering ဝဘ် စားသောက်ဆိုင် ဝဘ်ဗိသုကာ

ဥပမာများ

W3.CSS ဥပမာများ W3.CSS သရုပ်ပြများ W3.CSS Templates များ

ကိုးကား

W3.CSS အကိုးအကား W3.CSS ဒေါင်းလုဒ်များ

W3.CSS Layout

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။


W3.CSS Layout အတန်းများ

W3.CSS ဗားရှင်း 2.90 / 2.91 သည် "ကော်လံကဲ့သို့" အပြင်အဆင်အတွက် အောက်ပါအတန်းများကို မိတ်ဆက်ပေးခဲ့သည်-

အတန်း ဖော်ပြချက်
w3-ဆဲလ်-အတန်း ဆဲလ်များ (ကော်လံများ) အတွက် ကွန်တိန်နာ။
w3-ဆဲလ် အပြင်အဆင် ဆဲလ် (ကော်လံ)။
w3-ဆဲလ်-ထိပ် ဆဲလ်တစ်ခု (ကော်လံ) ၏ထိပ်တွင် အကြောင်းအရာကို ညှိပေးသည်။
w3-ဆဲလ်-အလယ် ဆဲလ်တစ်ခု၏ ဒေါင်လိုက်အလယ်တွင် အကြောင်းအရာကို ညှိပေးသည် (ကော်လံ)။
w3-ဆဲလ်-အောက်ခြေ ဆဲလ်တစ်ခု (ကော်လံ) ၏အောက်ခြေရှိ အကြောင်းအရာကို ညှိပေးသည်။
w3-မိုဘိုင်း ဆဲလ် (ကော်လံ) သို့ မိုဘိုင်း-ပထမ တုံ့ပြန်မှုကို ပေါင်းထည့်သည်။
မိုဘိုင်းလ်စက်ပစ္စည်းများတွင် ပိတ်ဆို့ထားသော အစိတ်အပိုင်းများအဖြစ် အစိတ်အပိုင်းများကို ပြသပါ။

အပြင်အဆင်အတန်းများသည် ကန့်ကွက်ထားသော အပြင်အဆင်အတန်းများကို အစားထိုးသည်။

Layout classer အသစ်သည် ပိုမိုစွယ်စုံရနှင့် အသုံးပြုရပိုမိုလွယ်ကူသည်။

ကန့်ကွက်ထားသော အပြင်အဆင်အတန်းများကို ဤစာမျက်နှာ၏အောက်ခြေတွင် ဖော်ပြထားပါသည်။


HTML Block Elements များ

မူလအားဖြင့်၊ HTML ဘလောက်ဒြပ်စင်များ ( <div> ဒြပ်စင်များကဲ့သို့) သည် ဒေါင်လိုက်တုံးများအဖြစ် ပြသသည်-

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

ဥပမာ

<div class="w3-container w3-red">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green">
  <p>Hello W3.CSS Layout.</p>
</div>



အပြင်အဆင် ဆဲလ်များ

w3-cell အတန်းအစား သည် အလျားလိုက်ဖော်ပြရန် ပိတ်ဆို့ထားသောဒြပ်စင်များကို ပြန်လည်သတ်မှတ်သည် (ဇယားဆဲလ်များကဲ့သို့)။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

ဥပမာ

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">
  <p>Hello W3.CSS Layout.</p>
</div>


Layout ကွန်တိန်နာ

w3- ဆဲလ်-အတန်း သည် ဆဲလ်များ (ကော်လံများ) အတွက် ကွန်တိန်နာတစ်ခုဖြစ်သည်။

w3-cell-row container ၏ အကျယ်သည် ပါရှိသောဆဲလ်အားလုံး၏ စုစုပေါင်း width ကို သတ်မှတ်သည်။

မူရင်းအကျယ်သည် 100% ဖြစ်သည်-

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

ဥပမာ

<div class="w3-cell-row">

  <div class="w3-container w3-red w3-cell">
    <p>Hello W3.CSS Layout.</p>
  </div>

  <div class="w3-container w3-green w3-cell">
    <p>Hello W3.CSS Layout.</p>
  </div>

</div>

ဆဲလ်ကွန်တိန်နာ၏ အကျယ်ကို သင်ပြောင်းလဲပါက၊ ၎င်းသည် ပါရှိသောဆဲလ်များ၏ စုစုပေါင်းအကျယ်ကို လျှော့ချလိမ့်မည်-

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

ဥပမာ

<div class="w3-cell-row" style="width:75%">

  <div class="w3-container w3-red w3-cell">
    <p>Hello W3.CSS Layout.</p>
  </div>

  <div class="w3-container w3-green w3-cell">
    <p>Hello W3.CSS Layout.</p>
  </div>

</div>


Layout Cell များသည် Self Adjusting ဖြစ်သည်။

w3-cell အတန်း သည် အလွန်ကောင်းမွန်သော built-in ကိုယ်တိုင်ချိန်ညှိမှုစံနှုန်းတစ်ခုရှိသည်။ ဘေးချင်းကပ်ဒြပ်စင်များသည် လိုအပ်သော အကျယ်သို့ အလိုအလျောက် ချိန်ညှိပါမည်-

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။ မင်္ဂလာပါ W3.CSS Layout။

ဥပမာ

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">
  <p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>


အပြင်အဆင်ဆဲလ်များသည် တူညီသောအမြင့်သို့ ချိန်ညှိသည်။

ဘေးချင်းကပ်လျက် w3-ဆဲလ် ဒြပ်စင်များသည်လည်း တူညီသောအမြင့်သို့ အလိုအလျောက် ချိန်ညှိပေးလိမ့်မည်-

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

ဥပမာ

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
</div>


တုံ့ပြန်မှုပုံစံ

w3-mobile class သည် မည်သည့် HTML ဒြပ်စင်သို့မဆို မိုဘိုင်းလ် ၏ ပထမဆုံးတုံ့ပြန်မှုကို ပေါင်းထည့်သည်။

w3-cell နှင့် တွဲသုံးပါက ၎င်းသည် သေးငယ်သော စခရင်/မိုဘိုင်းဖုန်းများပေါ်တွင် ဒေါင်လိုက် အကွက်များကို ဒေါင်လိုက်နှင့် အလတ်စား/ကြီးမားသော စခရင်များတွင် အလျားလိုက် ပြသပေးမည်ဖြစ်သည်။

အလတ်စားနှင့် ကြီးမားသော စခရင်များတွင်-

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

သေးငယ်သော စခရင်များတွင်

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

ဥပမာ

<div class="w3-container w3-red w3-cell w3-mobile">
  <p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell w3-mobile">
  <p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-mobile">
  <p>Hello W3.CSS Layout.</p>
</div>


အလွယ်တကူ ချိန်ညှိခြင်း။

w3-cell အတန်း သည် စာသားကို ချိန်ညှိရန် အလွန်လွယ်ကူစေသည်။

မတူညီသော ချိန်ညှိမှု အတန်း ၃ မျိုး ရှိသည်။

  • w3-ဆဲလ်-ထိပ် (မူလ)
  • w3-ဆဲလ်-အလယ်
  • w3-ဆဲလ်-အောက်ခြေ

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

ဥပမာ

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell w3-cell-middle">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-blue w3-cell w3-cell-bottom">
  <p>Hello W3.CSS Layout.</p>
</div>

w3- ဆဲလ်-အတန်း အတန်းသည် စာမျက်နှာအကျယ်နှင့် ကိုက်ညီစေရန် အစိတ်အပိုင်းများကို ဆန့်သည်-

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

မင်္ဂလာပါ W3.CSS Layout။

ဥပမာ

<div class="w3-cell-row">

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell w3-cell-middle">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-blue w3-cell w3-cell-bottom">
  <p>Hello W3.CSS Layout.</p>
</div>

</div>


W3.CSS Table Layout အတန်းများကို ကန့်ကွက်ထားသည်။

w3-အပြင်အဆင်-ကွန်တိန်နာ ၎င်းအစား w3-cell-row ကိုသုံးပါ။
w3-layout-row  
w3-အပြင်အဆင်-ဆဲလ် ၎င်းအစား w3-cell ကိုသုံးပါ။
w3-အပြင်အဆင်-အပေါ်ဆုံး ၎င်းအစား w3-cell-top ကိုသုံးပါ။
w3-အပြင်အဆင်-အလယ် ၎င်းအစား w3-cell-middle ကိုသုံးပါ။
w3-layout-အောက်ခြေ ၎င်းအစား w3-cell-bottom ကိုသုံးပါ။
w3-layout-col ယင်းအစား w3-mobile ကိုသုံးပါ။

ကန့်ကွက်ထားသောအတန်းများကို ဗားရှင်း 4.0 တွင် W3.CSS မှ ဖယ်ရှားပါမည်။