ဇယားမရှိရင် Layout များဖန်တီး CSS ကိုနေရာချထားအသုံးပြုနည်းကိုဘယ်လို

Tableless Layout များပွင့်လင်းနယူးဒီဇိုင်း Frontiers

ရှိပါတယ် layout ကိုများအတွက်စားပွဲမသုံးစွဲဖို့အကြောင်းရင်းများစွာ ။ က CSS နဲ့ layout ကိုလုပ်ဖို့ခက်ပါတယ်ဘာလို့လဲဆိုတော့လူတွေကသူတို့ကိုသုံးစွဲဖို့ဆက်လက်ဘို့ပေးအများဆုံးမကြာခဏအကြောင်းရင်းတစ်ခုဖြစ်သည်။ CSS ကို scripting နည်းတဲ့သင်ယူမှုကွေးပါဝငျမဖြစ်သော်လည်းသင်သည် CSS ကို layout ကိုလုပ်ဖို့ဘယ်လိုနားလည်သောအခါ, သင်ကရှိနိုင်ပါသည်ဘယ်လောက်လွယ်ကူသောမှာအံ့အားသင့်ဖြစ်လိမ့်မယ်။ သငျသညျကိုသင်ယူတစ်ချိန်ကနှင့်အညီ, သငျသညျကလူ CSS- အသုံးမပြုဘို့ပေးပါဒုတိယအသုံးအများဆုံးအကြောင်းပြချက်ကိုင်တွယ်ဖြေရှင်းကြပါလိမ့်မယ် "ဒါဟာကျောက်ပြားကိုရေးသားဖို့ပိုမြန်ပါတယ်။ " သင်စားပွဲသိသောကြောင့်၎င်းသည်ပိုမြန်မယ့်, သင်မူကား CSS ကိုလေ့လာသင်ယူတခါ, သင်ရုံအဖြစ်အမြန်ဖြစ်စေခြင်းငှါ, ကြောင်းနှင့်အတူ။

CSS ကိုနေရာချထားခြင်း၏ Browser ကိုပံ့ပိုးမှု

CSS ကို positioning ကိုကောင်းစွာအားလုံးခေတ်သစ် browser များအတွက်ထောက်ခံသည်။ သငျသညျကို Netscape 4 သို့မဟုတ် Internet Explorer ကို 4 site တစ်ခုတည်ဆောက်ခြင်းဖြစ်ကြောင်းမဟုတ်လျှင်, သင့်စာဖတ်သူများသင့်ရဲ့ CSS ကို-positioned က်ဘ်စာမျက်နှာများကိုကြည့်ရှုမည်သည့်ဒုက္ခရှိသည်မဟုတ်သငျ့သညျ။

သင်ကစာမျက်နှာ Build ဘယ်လို Rethinking

သငျသညျစားပွဲသုံးပြီး site တစ်ခုတည်ဆောက်တဲ့အခါမှာ, သင်ကအတွက်ကိုစဉ်းစားရန်ရှိသည် tabular format နဲ့။ တနည်းအားဖြင့်သင်ကဆဲလ်များနှင့်အတန်းများနှင့်ကော်လံ၏စည်းကမ်းချက်များ၌စဉ်းစားပါတယ်။ သင်၏ Web စာမျက်နှာများကိုဒီချဉ်းကပ်နည်းကိုထင်ဟပ်ပါလိမ့်မယ်။ သင်တစ်ဦး CSS ကို positioning ကိုဒီဇိုင်းပြောင်းရွှေ့တဲ့အခါမှာအကြောင်းအရာဘယ်နေရာမှာမဆိုငျသညျအလွှာအခြားအကြောင်းအရာကိုထိပ်ပေါ်တွင်-ပင်အပြင်အဆင်အတွက်ချင်ပါတယ်ထားရှိနိုင်ပါသည်ကွောငျ့, သငျသညျ, အကြောင်းအရာ၏စည်းကမ်းချက်များ၌သင်၏အစာမကျြနှာ၏စဉ်းစားတွေးခေါ် start ပါလိမ့်မယ်။

ကွဲပြားခြားနားသောဝက်ဘ်ဆိုက်များကွဲပြားခြားနားသောအဆောက်အဦများရှိသည်။ သငျသညျကအကြောင်းအရာ assign မီထိရောက်သောစာမျက်နှာကိုတည်ဆောက်ရန်, မည်သည့်ပေးထားသောစာမျက်နှာ၏ဖွဲ့စည်းပုံမှာအကဲဖြတ်ရန်။ ဥပမာတစ်ခုစာမျက်နှာငါးကွဲပြားကဏ္ဍများပါဝင်သည်မယ်:

1. header ။ ထိုနဖူးစည်းစာတမ်းကြော်ငြာ, ဆိုက်အမည်, အညွှန်းလင့်များတစ်ခုဆောင်းပါးခေါင်းစဉ်နဲ့အဖြစ်အနည်းငယ်နဲ့အခြားအမှုအရာမှနေအိမ်။
2. ညာဘက်ကော်လံ။ ဒါက Search Box မှာ, ကြော်ငြာတွေ, ဗီဒီယိုသေတ္တာများနှင့်စျေးဝယ်ဒေသများနှင့်အတူစာမျက်နှာ၏ညာဘက်အခြမ်းဖြစ်ပါတယ်။
3. အကြောင်းအရာ။ အဆိုပါဆောင်းပါးတစ်ပုဒ်၏စာသား, blog post: သို့မဟုတ်စျေးဝယ်လှည်း-The စာမျက်နှာ၏အမဲသားကို-and အာလူး။
4. inline ကြော်ငြာများ။ အဆိုပါကြော်ငြာများအကြောင်းအရာအတွင်းမှာ inline ။
5. footer ။ အောက်ခြေအညွှန်း, စာရေးဆရာသတင်းအချက်အလက်, မူပိုင်ခွင့်အချက်အလက်, အနိမ့်နဖူးစည်းစာတန်းကြော်ငြာတွေများနှင့်ဆက်စပ်လင့်များ။

အဲဒီအစားအကြောင်းအရာ၏ကွဲပြားခြားနားသောဝေမျှသတ်မှတ်, အဲဒီနောက်စာမျက်နှာပေါ်တွင်အကြောင်းအရာ element တွေကိုနေရာ CSS ကို positioning ကိုသုံးဖို့ဖို့ HTML5 ကို sectioning ဒြပ်စင်ကိုသုံးမယ့် table ထဲမှာသူများငါး element တွေကိုချပြီးထက်။

သင့်ရဲ့အကြောင်းအရာကဏ္ဍများဖော်ထုတ်ခြင်း

သင်သည်သင်၏ site ၏ကွဲပြားခြားနားသောအကြောင်းအရာဒေသများသတ်မှတ်င့်ပြီးနောက်, သင်သည်သင်၏ HTML ကိုသို့သူတို့ကိုငါရေးသားဖို့လိုအပ်ပါတယ်။ သငျသညျ, ယေဘုယျအားဖြင့်ဆိုနိုင်ရန်အတွက်သင့်ရဲ့ကဏ္ဍများကိုနေရာချလို့ရပါတယ်နေစဉ်, ဒါကြောင့်ပထမဦးဆုံးသင့်ရဲ့စာမျက်နှာ၏အရေးအပါဆုံးအစိတ်အပိုင်းနေရာကောင်းတစ်ခုစိတ်ကူးပါတယ်။ ဤသည်ချဉ်းကပ်မှုအဖြစ်ကောင်းစွာ, ရှာအင်ဂျင် optimization နှင့်အတူကူညီပေးပါမည်။

positioning ကိုသရုပ်ပြသုံးကော်လံဒါပေမယ့်ဘယ်သူမျှမ header ကိုသို့မဟုတ်ထဲက footer နှင့်အတူစာမျက်နှာကြဖို့အရေးကြီးနေသည်။ သင်ကြိုက်နှစ်သက် layout ကိုမဆိုအမျိုးအစားကိုဖန်တီးရန် positioning ကိုသုံးနိုင်သည်။

သုံးကော်လံ layout ကိုများအတွက်သုံးကဏ္ဍများကိုသတ်မှတ်: ဘယ်ဖက်ကော်လံ, ညာဘက်ကော်လံနှင့်အကြောင်းအရာ။

ဤရွေ့ကားကဏ္ဍများအကြောင်းအရာများအတွက်ဆောငျးပါးဒြပ်စင်ကို အသုံးပြု. instantiated ထိုသူနှစ်ယောက်ကော်လံနှစ်ခုအပိုင်း element တွေကိုပါလိမ့်မည်။ အရာအားလုံးကိုလည်းဖော်ထုတ်ကာ attribute ကိုရပါလိမ့်မယ်။ သင်အိုင်ဒီ attribute ကိုအသုံးပြုသောအခါသငျသညျအသီးအသီးအိုင်ဒီများအတွက်ထူးခြားသောနာမကိုအမှီဆောင်ခဲ့ရကြမည်။

အဆိုပါအကြောင်းအရာတည်နေရာအား

CSS ကိုအသုံးပြုခြင်း, သင့် ID'd ဒြပ်စင်များအတွက်အနေအထားသတ်မှတ်။ သင့်ရဲ့အနေအထားသတင်းအချက်အလက်ဤကဲ့သို့သောစတိုင်ခေါ်ဆိုမှုထဲမှာသိုလှောင်သိမ်းဆည်း:

#content {

}

ဒါကြောင့်တတ်နိုင်သမျှအတိုင်းဤဒြပ်စင်အတွင်းအကြောင်းအရာ, လက်ရှိတည်နေရာသို့မဟုတ်စာမျက်နှာ၏အကျယ်၏အမည်ရ 100 ရာခိုင်နှုန်းအဖြစ်အများကြီးအာကာသကိုတက်ယူပါလိမ့်မယ်။ သတ်မှတ်ထားတဲ့အကျယ်ကအတင်းအကျပ်မရှိဘဲအပိုင်း၏တည်နေရာကိုထိခိုက်ဖို့, padding ကိုဒါမှမဟုတ်အနားသတ်ဂုဏ်သတ္တိများကိုပြောင်းလဲ။

ဒီအဆင်အပြင်အဘို့, fixed width မှနှစ်ခုကော်လံကိုသတ်မှတ်ပြီးတော့သူတို့က HTML မှာတွေ့ရှိထားရာအားဖြင့်ထိခိုက်ခံရမှာမဟုတ်ဘူးဒါကြောင့်အကြွင်းမဲ့အာဏာဟာသူတို့ရဲ့အနေအထား, ထားကြ၏။

# လက်ဝဲ-ကော်လံ {
အနေအထား: အကြွင်းမဲ့အာဏာ;
left: 0;
width: 150px;
margin-left: 10px;
margin-top: 20px;
အရောင်: # 000000;
padding ကို: 3px;
}
# Right-ကော်လံ {
အနေအထား: အကြွင်းမဲ့အာဏာ;
လက်ဝဲ: 80%;
ထိပ်တန်း: 20px;
width: 140px;
padding ကို-လက်ဝဲ: 10px;
z-index ကို: 3;
အရောင်: # 000000;
padding ကို: 3px;
}

ထိုအခါအကြောင်းအရာဧရိယာအဘို့, လက်ျာအပေါ်အမြတ် ထား. အကြောင်းအရာနှစ်ခုပြင်ပမှာကော်လံထပ်မှာမဟုတ်ဘူးဒါကြောင့်ထွက်ခွာသွားခဲ့သည်။

#content {
ထိပ်တန်း: 0px;
margin: 0px 25% ပါ 0 င် 165px;
padding ကို: 3px;
အရောင်: # 000000;
}

အစားတစ်ဦးက HTML table ၏ CSS ကိုသုံးပြီးသင့်ရဲ့ page ကို defining နည်းနည်းပိုပြီးနည်းပညာပိုင်းဆိုင်ရာကျွမ်းကျင်မှုလိုအပ်သော်လည်းငွေပမာဏကိုပိုမိုပြောင်းလွယ်ပြင်လွယ်ခြင်းနှင့်တုံ့ပြန်မှုဒီဇိုင်းများနှင့်နောက်ပိုင်းတွင်သင့်စာမျက်နှာမှဖွဲ့စည်းတည်ဆောက်ပုံဆိုင်ရာချိန်ညှိရာတွင် သာ. ကြီးမြတ်လွယ်ကူခြင်းထဲကနေအောက်ပါအတိုင်း။