HTML နှင့် CSS ဖြင့် မာတိကာ ပုံစံများ အပေါ် လေ့ကျင့်ခန်း

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

ပထမဦးစွာ မာတိကာ၏ အခြေခံဖွဲ့စည်းပုံကို ပြုလုပ်ကြပါစို့-

html<div class="wrapper">
  <header>
    ...
  </header>
  <div class="container">
    <aside class="left">
      left
    </aside>
    <main>
      ...
    </main>
    <aside class="right">
      right
    </aside>
  </div>
  <footer>
    site.com
  </footer>
</div>

ယခု ဟက်ဒါနှင့် ပတ်သက်၍ ကြည့်ကြပါစို့။ နမူနာတွင် မြင်တွေ့ရသည့်အတိုင်း ဟက်ဒါတွင် ဝဘ်ဆိုဒ်၏ အမည်နှင့် မီနူးရှိမည်ဖြစ်သည်။ ထို့အပြင် ဤဘလောက်များသည် ဘယ်ဘက်အစွန်းမှ တူညီသော အကွာအဝေးတွင် ရှိကြသည်။ ထိုသို့သောအခြေအနေတွင် ၎င်းတို့ကို ယေဘုယျမိဘတစ်ဦးဖြင့် ပေါင်းစည်းပြီး ဘလောက်များကို တစ်ခုတည်းသော အရာတစ်ခုအဖြစ် ရွှေ့ခြင်းသည် ယုတ္တိရှိသည်-

html<div class="wrapper">
  <header>
    <div class="block">
      <div class="sitename"></div>
      <nav></nav>
    </div>
  </header>
</div>

ဟက်ဒါဘလောက်များ၏ အကြောင်းအရာကို ထည့်သွင်းကြပါစို့-

html<div class="wrapper">
  <header>
    <div class="block">
      <div class="sitename">site.com</div>
      <nav>
        <a href="#">home</a>
        <a href="#" class="active">blog</a>
        <a href="#">photos</a>
        <a href="#">about us</a>
        <a href="#">contacts</a>
      </nav>
    </div>
  </header>
</div>

ယခု ဟက်ဒါဘလောက်များ၏ စတိုင်များကို ရေးကြပါစို့။ ဤသို့ပြုလုပ်စဉ် ဟက်ဒါ၏ အမြင့်ကို သတ်မှတ်မထားပါနှင့် - ၎င်း၏ကိုယ်ပိုင်အကြောင်းအရာဖြင့် ကျယ်ပြန့်သွားစေပါစို့-

cssheader {
  border: 1px solid black;
}
.block {
  margin: 20px 0 50px 220px;
}
.sitename {
  margin-bottom: 10px;
  font: 20px Arial;
}
nav {
  display: flex;
  width: 600px;
  border: 1px solid black;
}

ကွန်တိန်နာထဲတွင် ကော်လံသုံးခုပါသည့် ကုဒ်ကို ရေးကြပါစို့။ ဤသို့ပြုလုပ်စဉ် အကြောင်းအရာ၏ အမြင့်ကို သတ်မှတ်မထားပါနှင့် - ၎င်း၏ကိုယ်ပိုင်အကြောင်းအရာဖြင့် ဖွဲ့စည်းပုံဖြစ်လာစေပါစို့-

css.container {
  display: flex;
}
main {
  width: 660px;
  padding: 20px;
  border: 1px solid black;
}
.left {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}
.right {
  width: 200px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid black;
}

ယခု ကျွန်ုပ်တို့၏ မာတိကာ၏ ကျန်ရှိသော စတိုင်များကို ရေးပြီး ကျွန်ုပ်တို့၏ ပြဿနာအတွက် အဖြေကို ရယူကြပါစို့-

html<div class="wrapper">
  <header>
    <div class="block">
      <div class="sitename">site.com</div>
      <nav>
        <a href="#">home</a>
        <a href="#" class="active">blog</a>
        <a href="#">photos</a>
        <a href="#">about us</a>
        <a href="#">contacts</a>
      </nav>
    </div>
  </header>
  <div class="container">
    <aside class="left">
      left
    </aside>
    <main>
      <h1>Our blog</h1>
      <p>
        ...
      </p>
      <p>
        ...
      </p>
      <p>
        ...
      </p>
      <p>
        ...
      </p>
      <p>
        ...
      </p>
    </main>
    <aside class="right">
      right
    </aside>
  </div>
  <footer>
    site.com
  </footer>
</div>

css* {
  box-sizing: border-box;
}

.wrapper {
  width: 1100px;
  margin: 30px auto;
  border: 1px solid black;
}
header {
  border: 1px solid black;
}
.container {
  display: flex;
}
main {
  width: 660px;
  padding: 20px;
  border: 1px solid black;
}
.left {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}
.right {
  width: 200px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid black;
}
footer {
  padding: 30px 0;
  border: 1px solid black;
  text-align: center;
}

.block {
  margin: 20px 0 50px 220px;
}
.sitename {
  margin-bottom: 10px;
  font: 20px Arial;
}
nav {
  display: flex;
  width: 600px;
  border: 1px solid black;
}
nav a {
  padding: 10px;
  color: blue;
  text-decoration: none;
  font: 15px Arial;
}
nav a:hover, nav a.active {
  color: red;
  text-decoration: underline;
}
main h1 {
  font: 20px "Times New Roman";
}
main p {
  margin: 10px 0;
  text-align: justify;
  font: 15px Arial;
}

လက်တွေ့လေ့ကျင့်ခန်းများ