CSS ဝဘ်ဆိုဒ် အပြင်အဆင်
ဝဘ်ဆိုဒ် အပြင်အဆင်
ဝဘ်ဆိုက်တစ်ခုအား ခေါင်းစီးများ၊ မီနူးများ၊ အကြောင်းအရာနှင့် အောက်ခြေမှတ်စုအဖြစ် မကြာခဏ ပိုင်းခြားထားသည်။
အမျိုးမျိုးသော အပြင်အဆင် ဒီဇိုင်းများစွာကို ရွေးချယ်ရန် ရှိပါသည်။ သို့သော်၊ အထက်ဖော်ပြပါဖွဲ့စည်းပုံသည် အသုံးအများဆုံးတစ်ခုဖြစ်ပြီး၊ ဤသင်ခန်းစာတွင် ၎င်းကို ကျွန်ုပ်တို့ပိုမိုသေချာစွာကြည့်ရှုပါမည်။
ခေါင်းစီး
ခေါင်းစီးသည် များသောအားဖြင့် ဝဘ်ဆိုက်၏ထိပ်တွင် (သို့မဟုတ် ထိပ်တန်းလမ်းညွှန်မီနူးတစ်ခုအောက်တွင်) ရှိသည်။ ၎င်းတွင် လိုဂို သို့မဟုတ် ဝဘ်ဆိုဒ်အမည် ပါဝင်လေ့ရှိသည်-
ဥပမာ
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
ရလဒ်
Header
လမ်းကြောင်းပြဘား
လမ်းကြောင်းပြဘားတစ်ခုတွင် သင့်ဝဘ်ဆိုက်မှတစ်ဆင့် သွားလာနေသောဧည့်သည်များကို ကူညီရန် လင့်ခ်များစာရင်းပါရှိသည်-
ဥပမာ
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
ရလဒ်
အကြောင်းအရာ
ဤကဏ္ဍရှိ အပြင်အဆင်သည် ပစ်မှတ်အသုံးပြုသူများအပေါ်တွင် မူတည်သည်။ အသုံးအများဆုံး အပြင်အဆင်မှာ အောက်ပါတို့မှ တစ်ခု (သို့မဟုတ် ၎င်းတို့ကို ပေါင်းစပ်ခြင်း) ဖြစ်သည်-
- 1-ကော်လံ (မကြာခဏမိုဘိုင်းဘရောက်ဆာများအတွက်အသုံးပြုသည်)
- ကော်လံ 2 (တက်ဘလက်နှင့် လက်ပ်တော့များအတွက် အသုံးပြုလေ့ရှိသည်)
- ကော်လံ ၃ ခု အပြင်အဆင် (ဒက်စ်တော့များအတွက်သာ အသုံးပြုသည်)
1-ကော်လံ-
2-ကော်လံ-
3-ကော်လံ-
ကျွန်ုပ်တို့သည် 3-ကော်လံအပြင်အဆင်ကိုဖန်တီးပြီး သေးငယ်သောဖန်သားပြင်များရှိ 1-ကော်လံအပြင်အဆင်သို့ပြောင်းပါမည်-
ဥပမာ
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
ရလဒ်
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
အကြံပြုချက်- ကော်လံ 2 ခု အပြင်အဆင် ဖန်တီးရန်၊ အကျယ်ကို 50% သို့ ပြောင်းပါ။ ကော်လံ 4 ခု အပြင်အဆင် ဖန်တီးရန် 25% စသည်တို့ကို အသုံးပြုပါ။
အကြံပြုချက်- @media စည်းမျဉ်းသည် မည်သို့အလုပ်လုပ်သည်ကို သင်တွေးမိပါသလား။ ၎င်းအကြောင်းကို ကျွန်ုပ်တို့၏ CSS Media Queries အခန်းတွင် ပိုမိုဖတ်ရှုပါ ။
အကြံပြုချက်- ကော်လံ အပြင်အဆင်များ ဖန်တီးခြင်း၏ ပိုခေတ်မီသော နည်းလမ်းမှာ CSS Flexbox ကို အသုံးပြုခြင်း ဖြစ်သည်။ သို့သော်လည်း ၎င်းကို Internet Explorer 10 နှင့် အစောပိုင်းဗားရှင်းများတွင် မပံ့ပိုးပါ။ IE6-10 ပံ့ပိုးမှုလိုအပ်ပါက၊ floats (အထက်တွင်ပြထားသည့်အတိုင်း) ကိုသုံးပါ။
Flexible Box Layout Module အကြောင်း ပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Flexbox အခန်းကို ဖတ်ရှုပါ ။
မညီမျှသော ကော်လံများ
အဓိက အကြောင်းအရာသည် သင့်ဆိုဒ်၏ အကြီးဆုံးနှင့် အရေးအကြီးဆုံး အစိတ်အပိုင်းဖြစ်သည်။
ကော်လံအနံ မညီမညာ ဖြစ်လေ့ရှိသော ကြောင့် နေရာအများစုကို အဓိကအကြောင်းအရာအတွက် သီးသန့်ထားခြင်းဖြစ်သည်။ ဘေးထွက်အကြောင်းအရာ (ရှိလျှင်) ကို အစားထိုးလမ်းညွှန်မှုအဖြစ် သို့မဟုတ် ပင်မအကြောင်းအရာနှင့်သက်ဆိုင်သော အချက်အလက်သတ်မှတ်ရန် မကြာခဏအသုံးပြုသည်။ အကျယ်ကို သင်နှစ်သက်သလို ပြောင်းပါ၊ ၎င်းသည် စုစုပေါင်း 100% အထိ ထည့်သင့်သည်ကိုသာ သတိရပါ။
ဥပမာ
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
ရလဒ်
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
အောက်ခြေမှတ်တိုင်
အောက်ခြေမှတ်စုကို သင့်စာမျက်နှာ၏အောက်ခြေတွင် ထားရှိထားသည်။ မူပိုင်ခွင့်နှင့် ဆက်သွယ်ရန်အချက်အလက်ကဲ့သို့သော အချက်အလက်များ ပါဝင်လေ့ရှိသည်-
ဥပမာ
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
ရလဒ်
တုံ့ပြန်မှုရှိသော ဝဘ်ဆိုက်အပြင်အဆင်
အထက်ဖော်ပြပါ CSS ကုဒ်အချို့ကို အသုံးပြုခြင်းဖြင့်၊ ကျွန်ုပ်တို့သည် မျက်နှာပြင်အကျယ်ပေါ် မူတည်၍ ကော်လံနှစ်ခုနှင့် မျက်နှာပြင်အကျယ်ပေါ် မူတည်၍ ကော်လံနှစ်ခုနှင့် အပြည့်အနံကွဲပြားသည့် တုံ့ပြန်နိုင်သော ဝဘ်ဆိုက်အပြင်အဆင်ကို ဖန်တီးထားပါသည်။
W3Schools Spaces အကြောင်း ကြားဖူး ပါသလား။ ဤနေရာတွင် သင်သည် သင့်ဝဘ်ဆိုဒ်ကို အစမှအဆုံး ဖန်တီးနိုင်သည် သို့မဟုတ် နမူနာပုံစံတစ်ခုကို အသုံးပြုကာ ၎င်းကို အခမဲ့ လက်ခံဆောင်ရွက်ပေးနိုင်သည်။
❯ အခမဲ့ စတင်လိုက်ပါ။* ခရက်ဒစ်ကတ်မလိုအပ်ပါ။