အဆိုပါလုပ်ကွက်၏အပြင်အဆင်ကဘာလဲ? သူတို့ရဲ့ကိုယ်ပိုင်ပေါ်တွင်သင်၏ site ၏တစ်ခုတည်းစာမျက်နှာစည်းကြပ်ဖို့ဘယ်လိုနေသလဲ?

သင့်ကိုယ်ပိုင်စာမျက်နှာများက်ဘ်ဆိုက်များအောင်သင်ယူဖို့လိုတဲ့ဆန္ဒရှိသလော ထိုအခါရဲ့ဘာပိတ်ပင်တားဆီးမှု layout ကိုကျွမ်းကျင်ကြကုန်အံ့။ layout အတွေ့အကြုံမရှိသေးသောသူတို့မေးခွန်းတွေကအများကြီးရှိသည်, အခက်အခဲများစွာကိုဖြည့်ဆည်း။ ပိတ်ပင်တားဆီးမှုနိုင်တဲ့ coding ကဘာလဲဆိုတာစဉ်းစားပါ။

အရေးပါသောအစွန်အဖျား

သုံးပါ ဟာ WYSIWYG အယ်ဒီတာ, ဒါကြောင့်အရာအားလုံးရှင်းလင်းခဲ့သည်။ သူတို့အရာအားလုံးကိုနားလည်သောကွောငျ့ကောင်းစွာ HTML ကိုသိကြသူများသည်သည်, မှတ်စုစာအုပ်ထဲမှာအလုပ်လုပ်ကြသည်။ ထိုအအရင်ကဆိုရင်ထိုကဲ့သို့သော FrontPage သို့မဟုတ်ဥပမာ, Dreamweaver အဖြစ်အစီအစဉ်များ၏အားသာချက်ယူနိုင်ပါတယ်။

အပြင်အဆင်က်ဘ်ဆိုက်များအမျိုးအစားများ

အပြင်အဆင်အတော်ကြာမျိုးရှိပါတယ်:

1. tabular ။
2. block ။
3. ရောနှော။

ကျနော်တို့ပိတ်ပင်တားဆီးမှု layout ကိုစိတ်ဝင်စားနေကြသည်။ အဘယ်အရာကိုစားပွဲကနေခွဲခြား? ပိတ်ပင်တားဆီးမှု layout ကိုမှာ div tag ကိုသုံးပြီးအချို့အားသာချက်ရှိပါတယ်:

1. မြန်မြန်လုပ်ကွက်များ၏ဒီဇိုင်းနှင့်အတူ load ။
2. ဒေါင်းလုဒ်ဖြစ်ပေါ်အဖြစ်အကြောင်းအရာ (စားပွဲနှင့်မတူဘဲ) လုပ်ကွက်ပြသ။ လူသိများသည်နှင့်အမျှဤကျောက်ပြားကိုသာတစ်ခုလုံးကိုစားပွဲပေါ်မှာအပြီးပြသပါလိမ့်မယ်။
3. div-s ဖြင့် Code ကိုဖတ်ရှုဖို့ပိုမိုလွယ်ကူ။

ဒါဟာပိတ်ပင်တားဆီးမှု layout ကိုနာမည်ကြီးသောသူအပေါင်းတို့ကိုအားသာချက်များမဟုတ်ပါဘူး။

တည်နေရာ div-လုပ်ကွက်ပြောင်းလဲပစ်ရန်ဘယ်လိုနေသလဲ?

ဤသည်ကို float မှကျွန်တော်တို့ကိုကူညီလိမ့်မယ် - ဤပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု, အောက်ပါတို့မှနိုင်စွမ်းသောအရာ:

1. လက်ဝဲ align - ထားခဲ့တယ်။
2. လက်ျာဘက် - ညာဘက် align ရန်။
3. သူကဘယ်သူမျှမပေးထားလျှင်သူမရွှေ့မည်, ရှိရာ element နေဆဲဖြစ်သည်။ ဒါဟာတန်ဖိုးက default ဖြစ်လိမ့်မည်။

ကျနော်တို့လိုအပျကွောငျးနောက်ထပ်အရေးကြီးတဲ့အင်္ဂါရပ် - ရှင်းလင်းပြတ်သားတဲ့။ သူက 4 တန်ဖိုးများရှိစေခြင်းငှါ:

1. လက်ျာဘက် - ယခင် item တခုကိုအောက်မှာတပ်ဆင်ဘို့, လက်ျာ, ပိတ်ပင်တားဆီးမှုမှရွှေ့။
2. လက်ဝဲဘက်လက်ဝဲဘက်သို့ပြောင်းရွှေ့သောယခင်ဒြပ်စင်အောက်တွင်သတ်မှတ်။
3. နှစ်ဦးစလုံး - ယခင်အိုးအိမ်မဲ့ပိတ်ပင်တားဆီးမှုများတပ်ဆင်ခြင်း။
4. အဘယ်သူမျှမပြောင်းရွှေ့လျက်ရှိသောသူတို့ကိုဒြပ်စင်မှဆွေမျိုးပိတ်ပင်တားဆီးမှု၏အနေအထားအပေါ်ကန့်သတ်မရှိခြင်းဖော်ပြသည်။

နမူနာ

ကပိတ်ပင်တားဆီးမှုများကဲ့သို့ကြည့်ရှုမည်ကိုမည်သို့စဉ်းစားကြည့်ပါ layout ကို div ။ ကျွန်တော်တို့ရဲ့ကုဒ်ရေးလိုက်:

code ကိုအောက်မှာသင်ရလဒ်ကိုကြည့်ပါ။ အလိုရှိသောအဖြစ်ထို့ကြောင့်အများအပြားဂုဏ်သတ္တိများ၏အခြေခံပေါ်မှာဘလောက်အစီအစဉ်ထိန်းချုပ်ထားနိုင်ပါတယ်။ လာမယ့်အခိုက်အသွားပါ။ မည်သည့် browser ကိုအသီးအသီးပိတ်ပင်တားဆီးမှု align လုပ်ဖို့စင်တာ: ကျနော်တို့ text-align အသုံးပြုခဲ့ကြသည်။

သငျသညျမွငျနိုငျကြောင့်ထို site ၏အတော်လေးရိုးရှင်းတဲ့ပိတ်ပင်တားဆီးမှု layout ကိုဖြစ်ပါတယ်။ ဒါဟာစာမကျြနှာတစ်ဦးထက်ပိုသောပြောင်းလွယ်ပြင်လွယ်ဖွဲ့စည်းပုံမှာဖန်တီးလိမ့်မည်ဟုပိုမိုဂုဏ်သတ္တိများလေ့လာပြီးလေ့ကျင့်ရန်အရေးကြီးပါသည်။

သာ. အရေးကြီးသောအရာတစ်ခုခု

အနေအထားက positioning ကိုအသုံးပြုသည် - ထို layout ကိုအတွက်အသုံးပြုကြောင်းတဦးတည်းလူကြိုက်များအင်္ဂါရပ်ရှိပါသည်။

အနေအထား၏ဂုဏ်သတ္တိများများအတွက်တန်ဖိုးများ:

1. ဆွေမျိုး - သူတို့ရဲ့မူရင်းနေရာများမှဆွေမျိုးဒြပ်စင်များ၏အနေအထားသတ်မှတ်။ လျှောက်လွှာကိုလက်ဝဲ, ထိပ်, righ, အောက်ခြေဒြပ်စင်အခြို့ဦးတည်လှုံ့ဆော်ပေး။
2. static - သာမန် display ကိုကို item ။ ကဘာမျှဖို့ဦးဆောင်လမ်းပြစေခြင်းငှါ - ဒါဟာလက်ဝဲလက်ယာ / ထိပ်တန်း / အောက်ခြေသုံးစွဲဖို့အဘယ်သူမျှမသဘာဝကျပါတယ်။
3. အကြွင်းမဲ့အာဏာ - absolute positioning ကိုဒြပ်စင်။
4. Fixed - အလားတူအကြွင်းမဲ့အာဏာ။ ဒါဟာ screen ပေါ်မှာအချို့သောအချက်မှဘောင်းဖြစ်ပါသည်, သို့သော်တောင်မှစာမျက်နှာ Flip လျှင်၎င်း၏ရပ်တည်ချက်ကိုမပြောင်းပါဘူး။

အတော်များများအဆင်အပြင်အဆိုပါလုပ်ကွက်တစ် fixed, အကြွင်းမဲ့အာဏာနှင့်ဆွေမျိုး positioning ကိုသုံးတဲ့အခါ superimposed ဖြစ်ကြောင်းသတိပြုမိသည်။ အရာအထက်အောက်ပါလုပ်ကွက်၏အရာကိုသိရန်, ပြီးတော့စိတ်ဝင်စားဖို့။ ဤမေးခွန်းကိုဖြေဆိုရန်, သင် z-index ကိုပိုင်ဆိုင်မှုလိုအပ်ပါတယ်။ ဒါဟာအသစ်တခုအဆင့်အထိ layout ကိုလုပ်ကွက်ဆောင်ခဲ့လေ၏။ ဒါဟာလေယာဉ်များ၏ positioning ကိုဖြစ်စေခြင်းငှါ, ဒါပေမယ့်လည်းထိုကဲ့သို့သောပိုင်ဆိုင်မှုများ၏တန်ဖိုးအားအပြုသဘောသို့မဟုတ်အပျက်သဘောဖြစ်နိုင်ပါတယ်တတိယဝင်ရိုး Z. အားဖွငျ့သာဖြစ်နိုင်စေသည်။

3 လုပ်ကွက်ကိုဖန်တီးပါ။ absolute positioning ကိုနှင့်အတူ ဆက်လက်. စမ်းသပ်ချက်။

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