CSS ကို layout ကိုသငျသညျတစျခုလုံးအဖြစ်သင့်ရဲ့ website layout ကိုစဉ်းစားလိုအပ်သည်, အဲဒီနောက်ကိုအပိုင်းပိုင်း ယူ. အတူတကွသွင်းထားလေ၏။ CSS နဲ့ရိုးရှင်းတဲ့ 3-ကော်လံ layout ကိုတညျဆောကျဖို့ဘယ်လိုလေ့လာပါ။
09 ၏ 01
သင့်ရဲ့ Layout ကိုခပ်
သငျသညျစက္ကူပေါ်တွင်သို့မဟုတ်တစ်ဦး၌သင်တို့၏ layout ကိုဆွဲနိုင်ပါတယ် ဂရပ်ဖစ်ပရိုဂရမျ ။ သငျသညျပြီးသားတစ်ဝါယာကြိုး-frame ကိုသို့မဟုတ်စိတ်တွင် ပို. ပင်ကျယ်ပြန့်ဒီဇိုင်းရှိပါကထို site ကိုတက်စေသောအခြေခံသေတ္တာများကရိုးရှင်း။ ဤဆောင်းပါးတွင်အတူသောဤဒီဇိုင်းကိုအဓိကအကြောင်းအရာဧရိယာအဖြစ်တစ်ဦးခေါင်းစဉ်နှင့်အောက်ခြေမှာရှိတဲ့သုံးကော်လံရှိပါတယ်။ သငျသညျကိုအနီးကပ်ကြည့်မယ်ဆိုရင်, သင်သုံးကော်လံအကျယ်အတွက်တန်းတူမစပ်ဆိုင်ကြောင်းကိုတွေ့မြင်နိုင်သည်။
သင်သည်သင်၏အပြင်အဆင်ကိုထုတ်ကြပြီးနောက်, သငျသညျရှုထောင်၏စဉ်းစားတွေးခေါ်စတင်နိုင်ပါသည်။ ဒီဥပမာဒီဇိုင်းကိုအောက်ပါအခြေခံရှုထောင့်ရှိမယ့်:
- အဘယ်သူမျှမကပို 900 ထက် pixels ကိုကျယ်ပြန့်
- လက်ဝဲဘက် 20 px ထိမြောင်း
- ကော်လံများနှင့်တန်းများအကြား 10 px
- 250px ဖြစ်ကြောင်းကော်လံ, 300px နှင့် 300px ကျယ်ပြန့်
- ထိပ်တန်း 150px အရပ်ရှည်ရှည်ဖြစ်ပါသည်
- အောက်ခြေအတန်း 100px အရပ်ရှည်ရှည်ဖြစ်ပါသည်
09 ၏ 02
အခြေခံ HTML / CSS ကိုရေးသားနေတဲ့ကွန်တိန်နာ Element ကို Create
ဒီစာမျက်နှာခိုင်လုံသောက HTML document ကိုဖွစျလိမျ့မညျကတည်းကတစ်ဦးအချည်းနှီးသော HTML ကိုကွန်တိန်နာနှင့်အတူ Start
အခြေခံ CSS ကိုမှစတိုင်များအတွက် Add စာမျက်နှာအမြတ်ထုတ်သုညနယ်နိမိတ်နှင့် padding တွေက ။ အခြားသောဘုရားမရှိနေမြဲနေစဉ် စံ CSS ကိုစတိုင်များ အသစ်သောစာရွက်စာတမ်းများအဘို့ဤစတိုင်များသင်တစ်ဦးသည်စင်ကြယ် layout ကိုရဖို့ရန်လိုအပ်ပါတယ်နိမ့်ဆုံးဖြစ်ကြသည်။ သင့်ရဲ့စာရွက်စာတမ်း၏ခေါင်းပေါ်မှသူတို့ကို Add:
<စတိုင်အမျိုးအစား = "စာသားကို / css"> html, body {margin: 0px; padding ကို: 0px; နယ်စပ်: 0px; } style>အဆိုပါ layout ကိုတည်ဆောက်ခြင်းကိုစတင်ရန်, တစ်ဦးကွန်တိန်နာဒြပ်စင်၌ထား၏။ ဒါဟာတခါတရံကွန်တိန်နာဒြပ်စင်ကြောင့်ပိုမိုလွယ်ကူကွဲပြားခြားနားသော web browser များအနှံ့စီမံခန့်ခွဲရန်စေသည်ရှိခြင်း, သင်အကြာတွင်ပေမယ့်အများဆုံးသတ်မှတ်ထားတဲ့-width ကိုအပြင်အဆင်များအတွက်ကွန်တိန်နာဖယ်ရှားပစ်ရနိုင်သည်ကိုတွေ့ကြုံတတ်၏။ ဒါကြောင့်ခန္ဓာကိုယ်၌ဤဝတ်:
ထိုအခါ CSS ကိုစတိုင်စာရွက်ထဲတွင်သွင်းထား:
#container {}09 ၏ 03
ယင်းကွန်တိန်နာ Style
ကွန်တိန်နာဝဘ်စာမျက်နှာပါအကြောင်းအရာများကိုဖြစ်အဖြစ်အတွင်းပိုင်းအပေါ်ပြင်ပနှင့် padding ကိုလှည့်ပတ်မဆိုမာဂျင်ပါလိမ့်မယ်ဘယ်လိုကျယ်ပြန့်သတ်မှတ်ပါတယ်။ ဤစာရွက်စာတမ်းအဘို့, ကွန်တိန်နာလက်ဝဲဘက် 20 pixel မြောင်းနှင့်အတူကျယ်ပြန့် 870px ဖြစ်ပါတယ်။ အဆိုပါမြောင်းတစ်ဦးရဲ့ margin စတိုင်နှင့်အတူထူထောင်ဖြစ်ပါတယ်, ဒါပေမယ့်ကွန်တိန်နာအပေါ် padding ကိုကွန်တိန်နာကဲ့သို့ကျယ်ပြန့်ဖြစ်ခြင်းကနေမဆိုဒြပ်စင်ကာကွယ်တားဆီးဖို့ထွက် zeroed ဖြစ်ပါတယ်။
#container {width: 870px; margin: 0 0 0 20px; / * ညာဘက်အောက်ခြေတွင် left * / padding ကို: 0; }သငျသညျယခုသင့်စာရွက်စာတမ်းကယ်မလျှင်အဲဒါကိုအတွက်ဘာမျှမရှိတယ်ဘာဖြစ်လို့လဲဆိုတော့ကကွန်တိန်နာကိုတွေ့မြင်ရန်ခက်ခဲပါလိမ့်မည်။ သငျသညျအမှတ်အသားစာသားကိုထပ်ထည့်ပါလျှင်, သင်ပိုမိုရှင်းလင်းစွာကွန်တိန်နာဒြပ်စင်ကြည့်ရှုနိုင်ပါလိမ့်မယ်။
09 ၏ 04
အဆိုပါ Header ကိုတစ်ခေါင်းကြီး Tag ကိုသုံးပါ
ဘယ်လိုသင် header ကိုအတန်း style ရန်ဆုံးဖြတ်ပါကတှငျအဘယျအပျေါ၌တစ်တွေအများကြီးမူတည်ပါသည်။ အဆိုပါခေါင်းစဉ်တန်းရုံလိုဂိုဂရပ်ဖစ်များနှင့်ခေါင်းစဉ်ရှိသည်ဖို့သွားလျှင်, (
) တစ်ဦးခေါင်းစဉ် tag ကိုသုံးပြီး သုံးပြီးထက်ပိုပြီးသဘာဝကျပါတယ်။ သင်ကခေါင်းစဉ်သင်တစ်ဦး div style တူညီသောလမ်း style နိုင်ပြီး, သငျသညျဆိုတဲ့စကားလုံးမလိုတော့ဘူး tags များရှောင်ကြဉ်ပါ။
အဆိုပါခေါင်းစဉ်အတန်းများအတွက် HTML ကိုကွန်တိန်နာရဲ့ထိပ်မှာသွားနှင့်ဤတူ:
ကြှနျုပျ၏ Header ကို Row h1>
ဒါဟာအဆုံးသတ်ရှိရာသင်တို့ကိုတွေ့မြင်နိုင်ကြောင်းဒါကြောင့်အပေါ်စတိုင်များကိုတင်ထားရန်, အနီရောင်နယ်စပ်အောက်ခြေပေါ်မှာထည့်သွင်းခဲ့သည်ထို့နောက်ယင်းမာဂျင်နှင့် padding ကိုထွက် zeroed width ကို 100% မှသတ်မှတ်ထားခြင်းနှင့် 150px မှအမြင့်သို့ရောက်ကြ၏
#container h1 {margin: 0; padding ကို: 0; width: 100%; အမြင့်: 150px; float: left; နယ်စပ်-အောက်ခြေ: # c00 အစိုင်အခဲ 3px; } ကတော့ float နှင့်အတူဤဒြပ်စင် float ဖို့မေ့လျော့တော်မမူပါနှင့်: left; ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု။ ကွန်တိန်နာကဲ့သို့တူညီသောအကျယ်ဖြစ်ကြောင်းပင်အမှုအရာ - CSS ကိုအပြင်အဆင်ရေးသားခြင်းမှတံခါးသော့ကိုအရာခပ်သိမ်းကို float ရန်ဖြစ်ပါသည်။ ဒြပ်စင်စာမျက်နှာပေါ်တွင်အိပ်ကြလိမ့်မည်ရှိရာထိုလမ်းကိုသင်အမြဲငါသိ၏။
တစ်ဦးက CSS ကိုဆင်းသက်လာ selector ကိုသာ #container ဒြပ်စင်အတွင်း၌ဖြစ်ကြောင်း H1 ဒြပ်စင်မှစတိုင်များလျှောက်လွှာတင်ခဲ့တယ်။
09 ၏ 05
သုံးကော်လံများ Get ရန်, နှစ်ဦးကော်လံများတည်ဆောက်ခြင်းအားဖြင့် Start
သငျသညျ CSS နဲ့သုံးကော်လံ layout ကိုတည်ဆောက်တဲ့အခါမှာ, သင်နှစ်ယောက်အုပ်စုများသို့သင့်ရဲ့အဆင်အပြင်ကိုဝေဖို့လိုအပ်ပါတယ်။ ဒါကြောင့်ဒီသုံးကော်လံ layout ကို, အလယ်နှင့်ညာဘက်ကော်လံအဘို့နှင့်လာမည့်လက်ဝဲကော်လံ 250px ကျယ်ပြန့်သည်အဘယ်မှာရှိတစ်ဦးနှစ်ဦး-ကော်လံ layout ကိုအတွက်လက်ဝဲကော်လံ, လက်ျာကော်လံမှအုပ်စုဖွဲ့နှင့်ထားရှိ 610px ကျယ် (နှစ်ခုကော်လံများအတွက် 300 ဦးချင်းစီ အပေါင်း 10px သူတို့ကိုအကြားမြောင်းအဘို့) ။
အဆိုပါ HTML ကိုဒီတူ:
Ut aliquip ဟောင်း ea commodo consequat ။ Velit esse cillum ဒေါ်လိုရေစ် ut enim ကြော်ငြာအနည်းငယ်မျှသာ veniam, ငါ့ရဲ့ဇာတ်မြင့်ဒေါ်လိုရေစ် amet ထိုင်။ voluptate quis nostrud exercitation eu fugiat nulla pariatur အတွက် reprehenderit ၌တည်၏။ Velit esse cillum ဒေါ်လိုရေစ် ullamco လောကီ nisi ut aliquip ဟောင်း ea commodo consequat ။ p> div>
Ut enim ကြော်ငြာအနည်းငယ်မျှသာ veniam, eiusmod incididunt ullamco လောကီ nisi ယာယီပါဘူး sed ။ ut အလုပ်သမားရေးရာ et ဒေါ်လိုရေစ် Magna aliqua ။ Velit esse cillum ဒေါ်လိုရေစ် eu fugiat nulla pariatur ။ p> div>
အဆိုပါစစ်ကြောင်းများအတွက် Placeholder ကိုစာသားစမ်းသပ်တဲ့အခါမှာသူတို့ကိုပိုပြီးမြင်နိုင်ခဲ့ကြစေသည်။ အဆိုပါ CSS ကိုဒီတူ:
#container # col1 {width: 250px; float: left; } #container # col2outer {width: 610px; float: ခွင့်, margin: 0; padding ကို: 0; } အခြားညာဘက်မြောနေစဉ်လက်ဝဲကော်လံ, လက်ဝဲဘက်သို့မြောနေသည်။ နှစ်ဦးစလုံးကော်လံ၏စုစုပေါင်းအကျယ် 860px သောကွောငျ့, သူတို့ကိုအကြားတစ်ဦး 10px မြောင်းရှိပါတယ်။
09 ၏ 06
အဆိုပါ Wide ဒုတိယအကော်လံအတွင်းပိုင်းကော်လံနှစ်ခု Add
သုံးယောက်ကော်လံကိုဖန်တီးရန်, သင်နောက်ဆုံးခြေလှမ်းအတွက်ကွန်တိန်နာကော်လံအတွင်း၌ 2 divs ဆက်ပြောသည်ရုံကဲ့သို့ကျယ်ပြန့်ဒုတိယကော်လံအတွင်း၌နှစ်ခု divs ထည့်ပါ။ အဆိုပါ HTML ကိုဒီတူ:
Ut enim ကြော်ငြာအနည်းငယ်မျှသာ veniam, eiusmod incididunt ullamco လောကီ nisi ယာယီပါဘူး sed ။ ut အလုပ်သမားရေးရာ et ဒေါ်လိုရေစ် Magna aliqua ။ Velit esse cillum ဒေါ်လိုရေစ် eu fugiat nulla pariatur ။ p> div>
နမ် libero ယာယီ, quia voluptas aspernatur dicta sunt explicabo ထိုင်။ Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem ။ Itaque earum rerum hic tenetur တစ် sapiente delectus, sed ut perspiciatis unde Omni tempora incidunt ut အလုပ်သမားရေးရာ et ဒေါ်လိုရေစ်။ p> div> div>
ထိုအခါ CSS ကိုဒီတူ:
# col2outer # col2mid {width: 300px; float: left; } # col2outer # col2side {width: 300px; float: ခွင့်, } အဲဒီနှစျခု 300px ကျယ်ပြန့်သေတ္တာများတစ်ဦး 610px ကျယ်ပြန့်သေတ္တာအတွင်းမှဖြစ်ကြသည်ကတည်းကနောက်တဖန်သူတို့ကိုအကြားတစ်ဦး 10px မြောင်းရှိရလိမ့်မည်။
09 ၏ 07
အဆိုပါ Footer ထဲမှာ Add
ယခုစာမျက်နှာ၏ကျန် style အမျိုးမျိုးသည် ဖြစ်. , သင်တို့ထဲက footer အတွက်ထည့်သွင်းနိုင်ပါတယ်။ တစ်ဦး "ထဲက footer" အိုင်ဒီနဲ့နောက်ဆုံး div ကိုသုံးပါ, သင်ကမြင်တွေ့နိုင်တယ်ဒါကြောင့်အကြောင်းအရာထည့်ပါ။ ကစတင်သည်ဘယ်မှာသင်သိပါလိမ့်မယ်ဒါကြောင့်လည်းသင်, ထိပ်မှာနယ်စပ်ထည့်သွင်းနိုင်ပါတယ်။
အဆိုပါက HTML:
မူပိုင်ခွင့်© 2017 p> div>
အဆိုပါ CSS ကို:
#container #footer {float: left; width: 870px; နယ်စပ်-top: # c00 အစိုင်အခဲ 3px; } 09 ၏ 08
သင့်ရဲ့ကိုယ်ရေးကိုယ်တာ Styles နှင့်အကြောင်းအရာအတွက် Add
အခုဆိုရင်သင် layout ကိုလက်စသတ်ကြပြီ, သင်သည်သင်၏ကိုယ်ပိုင်ပုဂ္ဂိုလ်ရေးစတိုင်များနဲ့ content ဖြည့်စွက်စတင်နိုင်ပါသည်။ အဆိုပါခေါင်းစဉ်နှင့်အောက်ခြေအပေါ်နယ်နိမိတ်မဟုတ်အထူးဒီဇိုင်းအဘို့, layout ကိုအပိုင်းကိုပြသရန်ဆက်ပြောသည်ခဲ့သတိရပါ။
09 ၏ 09
အဆိုပါနောက်ဆုံး HTML / CSS ကို
ဤတွင်တစ်ခုလုံးကိုစာရွက်စာတမ်း, HTML နဲ့ CSS ကိုဖြစ်ပါသည်:
ခေါင်းစဉ်မဲ့စာရွက်စာတမ်း ခေါင်းစဉ်>
အဆိုပါခေါင်းစဉ်အတန်းများအတွက် HTML ကိုကွန်တိန်နာရဲ့ထိပ်မှာသွားနှင့်ဤတူ:
ကြှနျုပျ၏ Header ကို Row h1>
ဒါဟာအဆုံးသတ်ရှိရာသင်တို့ကိုတွေ့မြင်နိုင်ကြောင်းဒါကြောင့်အပေါ်စတိုင်များကိုတင်ထားရန်, အနီရောင်နယ်စပ်အောက်ခြေပေါ်မှာထည့်သွင်းခဲ့သည်ထို့နောက်ယင်းမာဂျင်နှင့် padding ကိုထွက် zeroed width ကို 100% မှသတ်မှတ်ထားခြင်းနှင့် 150px မှအမြင့်သို့ရောက်ကြ၏
#container h1 {margin: 0; padding ကို: 0; width: 100%; အမြင့်: 150px; float: left; နယ်စပ်-အောက်ခြေ: # c00 အစိုင်အခဲ 3px; }ကတော့ float နှင့်အတူဤဒြပ်စင် float ဖို့မေ့လျော့တော်မမူပါနှင့်: left; ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု။ ကွန်တိန်နာကဲ့သို့တူညီသောအကျယ်ဖြစ်ကြောင်းပင်အမှုအရာ - CSS ကိုအပြင်အဆင်ရေးသားခြင်းမှတံခါးသော့ကိုအရာခပ်သိမ်းကို float ရန်ဖြစ်ပါသည်။ ဒြပ်စင်စာမျက်နှာပေါ်တွင်အိပ်ကြလိမ့်မည်ရှိရာထိုလမ်းကိုသင်အမြဲငါသိ၏။
တစ်ဦးက CSS ကိုဆင်းသက်လာ selector ကိုသာ #container ဒြပ်စင်အတွင်း၌ဖြစ်ကြောင်း H1 ဒြပ်စင်မှစတိုင်များလျှောက်လွှာတင်ခဲ့တယ်။
09 ၏ 05
သုံးကော်လံများ Get ရန်, နှစ်ဦးကော်လံများတည်ဆောက်ခြင်းအားဖြင့် Start
သငျသညျ CSS နဲ့သုံးကော်လံ layout ကိုတည်ဆောက်တဲ့အခါမှာ, သင်နှစ်ယောက်အုပ်စုများသို့သင့်ရဲ့အဆင်အပြင်ကိုဝေဖို့လိုအပ်ပါတယ်။ ဒါကြောင့်ဒီသုံးကော်လံ layout ကို, အလယ်နှင့်ညာဘက်ကော်လံအဘို့နှင့်လာမည့်လက်ဝဲကော်လံ 250px ကျယ်ပြန့်သည်အဘယ်မှာရှိတစ်ဦးနှစ်ဦး-ကော်လံ layout ကိုအတွက်လက်ဝဲကော်လံ, လက်ျာကော်လံမှအုပ်စုဖွဲ့နှင့်ထားရှိ 610px ကျယ် (နှစ်ခုကော်လံများအတွက် 300 ဦးချင်းစီ အပေါင်း 10px သူတို့ကိုအကြားမြောင်းအဘို့) ။
အဆိုပါ HTML ကိုဒီတူ:
Ut aliquip ဟောင်း ea commodo consequat ။ Velit esse cillum ဒေါ်လိုရေစ် ut enim ကြော်ငြာအနည်းငယ်မျှသာ veniam, ငါ့ရဲ့ဇာတ်မြင့်ဒေါ်လိုရေစ် amet ထိုင်။ voluptate quis nostrud exercitation eu fugiat nulla pariatur အတွက် reprehenderit ၌တည်၏။ Velit esse cillum ဒေါ်လိုရေစ် ullamco လောကီ nisi ut aliquip ဟောင်း ea commodo consequat ။ p> div>
Ut enim ကြော်ငြာအနည်းငယ်မျှသာ veniam, eiusmod incididunt ullamco လောကီ nisi ယာယီပါဘူး sed ။ ut အလုပ်သမားရေးရာ et ဒေါ်လိုရေစ် Magna aliqua ။ Velit esse cillum ဒေါ်လိုရေစ် eu fugiat nulla pariatur ။ p> div>
အဆိုပါစစ်ကြောင်းများအတွက် Placeholder ကိုစာသားစမ်းသပ်တဲ့အခါမှာသူတို့ကိုပိုပြီးမြင်နိုင်ခဲ့ကြစေသည်။ အဆိုပါ CSS ကိုဒီတူ:
#container # col1 {width: 250px; float: left; } #container # col2outer {width: 610px; float: ခွင့်, margin: 0; padding ကို: 0; }အခြားညာဘက်မြောနေစဉ်လက်ဝဲကော်လံ, လက်ဝဲဘက်သို့မြောနေသည်။ နှစ်ဦးစလုံးကော်လံ၏စုစုပေါင်းအကျယ် 860px သောကွောငျ့, သူတို့ကိုအကြားတစ်ဦး 10px မြောင်းရှိပါတယ်။
09 ၏ 06
အဆိုပါ Wide ဒုတိယအကော်လံအတွင်းပိုင်းကော်လံနှစ်ခု Add
သုံးယောက်ကော်လံကိုဖန်တီးရန်, သင်နောက်ဆုံးခြေလှမ်းအတွက်ကွန်တိန်နာကော်လံအတွင်း၌ 2 divs ဆက်ပြောသည်ရုံကဲ့သို့ကျယ်ပြန့်ဒုတိယကော်လံအတွင်း၌နှစ်ခု divs ထည့်ပါ။ အဆိုပါ HTML ကိုဒီတူ:
Ut enim ကြော်ငြာအနည်းငယ်မျှသာ veniam, eiusmod incididunt ullamco လောကီ nisi ယာယီပါဘူး sed ။ ut အလုပ်သမားရေးရာ et ဒေါ်လိုရေစ် Magna aliqua ။ Velit esse cillum ဒေါ်လိုရေစ် eu fugiat nulla pariatur ။ p> div>
နမ် libero ယာယီ, quia voluptas aspernatur dicta sunt explicabo ထိုင်။ Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem ။ Itaque earum rerum hic tenetur တစ် sapiente delectus, sed ut perspiciatis unde Omni tempora incidunt ut အလုပ်သမားရေးရာ et ဒေါ်လိုရေစ်။ p> div> div>
ထိုအခါ CSS ကိုဒီတူ:
# col2outer # col2mid {width: 300px; float: left; } # col2outer # col2side {width: 300px; float: ခွင့်, }အဲဒီနှစျခု 300px ကျယ်ပြန့်သေတ္တာများတစ်ဦး 610px ကျယ်ပြန့်သေတ္တာအတွင်းမှဖြစ်ကြသည်ကတည်းကနောက်တဖန်သူတို့ကိုအကြားတစ်ဦး 10px မြောင်းရှိရလိမ့်မည်။
09 ၏ 07
အဆိုပါ Footer ထဲမှာ Add
ယခုစာမျက်နှာ၏ကျန် style အမျိုးမျိုးသည် ဖြစ်. , သင်တို့ထဲက footer အတွက်ထည့်သွင်းနိုင်ပါတယ်။ တစ်ဦး "ထဲက footer" အိုင်ဒီနဲ့နောက်ဆုံး div ကိုသုံးပါ, သင်ကမြင်တွေ့နိုင်တယ်ဒါကြောင့်အကြောင်းအရာထည့်ပါ။ ကစတင်သည်ဘယ်မှာသင်သိပါလိမ့်မယ်ဒါကြောင့်လည်းသင်, ထိပ်မှာနယ်စပ်ထည့်သွင်းနိုင်ပါတယ်။
အဆိုပါက HTML:
မူပိုင်ခွင့်© 2017 p> div>
အဆိုပါ CSS ကို:
#container #footer {float: left; width: 870px; နယ်စပ်-top: # c00 အစိုင်အခဲ 3px; }09 ၏ 08
သင့်ရဲ့ကိုယ်ရေးကိုယ်တာ Styles နှင့်အကြောင်းအရာအတွက် Add
အခုဆိုရင်သင် layout ကိုလက်စသတ်ကြပြီ, သင်သည်သင်၏ကိုယ်ပိုင်ပုဂ္ဂိုလ်ရေးစတိုင်များနဲ့ content ဖြည့်စွက်စတင်နိုင်ပါသည်။ အဆိုပါခေါင်းစဉ်နှင့်အောက်ခြေအပေါ်နယ်နိမိတ်မဟုတ်အထူးဒီဇိုင်းအဘို့, layout ကိုအပိုင်းကိုပြသရန်ဆက်ပြောသည်ခဲ့သတိရပါ။
09 ၏ 09
အဆိုပါနောက်ဆုံး HTML / CSS ကို
ဤတွင်တစ်ခုလုံးကိုစာရွက်စာတမ်း, HTML နဲ့ CSS ကိုဖြစ်ပါသည်: