CSS တွင် ရိုးရှင်းသော တစ်ကော်လံ ဝဘ်ဆိုဒ် ဒီဇိုင်းများ
ဤသင်ခန်းစာတွင် ရိုးရှင်းသော တစ်ကော်လံ ဝဘ်ဆိုဒ် ဒီဇိုင်းများကို လက်တွေ့လုပ်ဆောင်ပါမည်။ ဥပမာအနေဖြင့်၊ ဤကဲ့သို့သော ဒီဇိုင်းတစ်ခုကို ပြုလုပ်ကြည့်ပါမည်။
အကောင်အထည်ဖော်မှုကို စတင်ပါမည်။ ဒီဇိုင်းတိုင်းသည် ယေဘုယျအားဖြင့် ဝဘ်ဆိုဒ်၏ ကျန်အစိတ်အပိုင်းအားလုံးကို ပါဝင်သော wrapper ဟု အမည်ပေးထားသည့် အထွေထွေ div တစ်ခုဖြင့် စတင်သည်။
<div id="wrapper">
</div>
ကျွန်ုပ်တို့၏ ကိစ္စတွင် wrapper သည် စခရင်၏ အလယ်ဗဟိုတွင် ညှိထားလိမ့်မည်။
#wrapper {
width: 800px;
margin: 50px auto;
}
ထို့အပြင် ၎င်းတွင် နယ်နိမိတ်အတိုင်းအတာ တစ်ခုလည်း ရှိလိမ့်မည်။
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
ယခု စာမျက်နှာ၏ အဓိက ဖွဲ့စည်းပုံကို ဖန်တီးကြပါစို့။ ၎င်းတွင် menu နှင့် အဓိက အကြောင်းအရာ - content တို့ ပါဝင်လိမ့်မည်။
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
ကျွန်ုပ်တို့၏ ဘလောက်များတွင် အကြောင်းအရာများ ထည့်ပါမည်။
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
ယခု ကျွန်ုပ်တို့၏ ဘလောက်များကို စတိုင်များ ထည့်နိုင်ပါသည်။ menu ကို စတိုင် ထည့်ကြပါစို့။
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
ယခု အကြောင်းအရာ ဒြပ်စင်များကို စတိုင်များ ထည့်ပါမည်။
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
ကုဒ်အားလုံးကို အတူတကွ စုစည်းနိုင်ပါသည်။
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
အကြံပေးချက် 1
အပေါ်မှ အောက်သို့ အကွာအဝေးပေးခြင်းသည် အသင့်တော်ဆုံးဖြစ်သည်။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့တွင် menu နှင့် content ရှိပြီး၊ ၎င်းတို့ကြားတွင် ဗလာနေရာရှိသည်။ ထင်ရှားသည်မှာ ဤနေရာလွတ်ကို menu ၏ အောက်ဘက် အကွာအဝေး၊ content ၏ အပေါ်ဘက် အကွာအဝေး၊ သို့မဟုတ် ၎င်းတို့၏ တပြိုင်နက် သက်ရောက်မှုဖြင့် ပြုလုပ်နိုင်သည်။ ဤကိစ္စတွင် menu အတွက် အောက်ဘက် အကွာအဝေးကို သတ်မှတ်ပေးပြီး၊ h1 အတွက် ပုံသေအနေအထားရှိသော padding နှင့် margin ကို content မှ ဖယ်ရှားသင့်သည်။
အကြံပေးချက် 2
အမွေဆက်ခံသူများသည် မိဘများအကြား အကွာအဝေးကို ဖွဲ့စည်းခြင်း မပြုသင့်ပါ။ ဥပမာ၊ ကျွန်ုပ်တို့တွင် menu တစ်ခုရှိသည်။ ဤ menu ၏ အောက်ဘက် အကွာအဝေးကို menu div ၏ margin သို့မဟုတ် လင့်များ၏ margin ဖြင့် ဖွဲ့စည်းနိုင်သည်။ ပထမရွေးချယ်မှုကို ရွေးချယ်သင့်သည်၊ အဘယ့်ကြောင့်ဆိုသော် လင့်များသည် မိဘ၏ ခေါင်းကို ကျော်လွှား၍ လုပ်ဆောင်ခြင်း မရှိသင့်သောကြောင့်ဖြစ်သည်။
အကြံပေးချက် 3
ဒြပ်စင်နှစ်ခုကြားတွင် အကွာအဝေးရှိပြီး၊ ဤကိစ္စတွင် margin သို့မဟုတ် padding မည်သည့်အရာကို ရွေးချယ်ရမည်ကို မျက်စိဖြင့် ကွာခြားချက်မရှိပါ။ ဤကိစ္စတွင် margin ကို ရွေးချယ်ပါ၊ အဘယ့်ကြောင့်ဆိုသော် ဒြပ်စင်များအကြား အကွာအဝေးကို ဖန်တီးရန် ၎င်း၏ တာဝန်ဖြစ်သောကြောင့် ဖြစ်သည်။
