CSS တွင် wrapper များစွာပါသည့် အပြင်အဆင်ပုံစံ

ဝဘ်ဖွံ့ဖြိုးရေးတွင် ဘလောက်များတွင် စာမျက်နှာအကျယ်တစ်ခုလုံးကို နောက်ခံအဖြစ်ပြသနိုင်ပြီး ထိုဘလောက်များရှိ အကြောင်းအရာများက ဗဟိုချက်ထားသည့် အပြင်အဆင်ပုံစံများကို မကြာခဏတွေ့ရသည်။ ဤကဲ့သို့သောအပြင်အဆင်ပုံစံ၏ ဥပမာတစ်ခုမှာ-

ထိုကဲ့သို့သောအပြင်အဆင်ပုံစံတွင် wrapper တစ်ခုတည်းမဟုတ်ဘဲ ဘလောက်တစ်ခုစီအတွက် များစွာသော wrapper များပြုလုပ်ရန်လိုအပ်ပါမည်။ ထို့အပြင် wrapper အတွင်းတွင် အကြောင်းအရာများကို ဗဟိုချက်ညှိပေးသည့် နောက်ထပ်ဘလောက်တစ်ခုရှိရပါမည်။ အကြောင်းအရာများကို နောက်ခံအရောင်ဖြင့် ခြယ်သနိုင်ရန် အတန်းတစ်ခုလည်းရှိရပါမည်။

ကျွန်ုပ်တို့၏ အပြင်အဆင်ပုံစံ၏ ယေဘူယျပုံစံမှာ အောက်ပါအတိုင်းဖြစ်ပါမည်-

html<div class="wrapper">
  <div class="center">
    
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    
  </div>
</div>
<div class="wrapper">
  <div class="center">
    
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    
  </div>
</div>

အတန်း center ကို ဘလောက်များကို ဗဟိုချက်ညှိရန် အသုံးပြုပါမည်-

css.center {
  width: 800px;
  padding: 20px;
  margin: 0 auto;
}

အတန်း line ကို ဘလောက်များကို အရောင်ခြယ်ရန် အသုံးပြုပါမည်-

css.wrapper.line {
  background-color: #008040;
  color: white;
}

အတန်း wrapper သည် ဘလောက်တစ်ခုစီ၏ မိဘဖြစ်ပါမည်။ ဘလောက်များအကြား အကွာအဝေးသတ်မှတ်ရန် ၎င်းကို အသုံးပြုပါမည်-

css.wrapper {
  margin-bottom: 30px;
}

ယခု ကျွန်ုပ်တို့၏ တာဝန်၏ ပြည့်စုံသော ကုဒ်ကိုရေးကြည့်ပါစို့-

html<div class="wrapper">
  <div class="center">
    <h1>ဝဘ်ဆိုက်ပင်မ ခေါင်းစဉ်</h1>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>ကျွန်ုပ်တို့၏ကုမ္ပဏီ</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper">
  <div class="center">
    <h2>ကျွန်ုပ်တို့၏စျေးနှုန်း</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>ကျွန်ုပ်တို့၏ဆက်သွယ်ရန်နေရာများ</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

css* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.wrapper {
  margin-bottom: 30px;
}
.wrapper.line {
  background-color: #008040;
  color: white;
}
.center {
  width: 800px;
  padding: 20px;
  margin: 0 auto;
}
.wrapper h1 {
  margin: 0;
  font: 40px "Times New Roman";
}
.wrapper h2 {
  margin: 0;
  font: 25px "Times New Roman";
}
.wrapper p {
  font: 16px/1.4 Arial;
  text-align: justify;
}