HR tags များနှင့်အတူ web စာမျက်နှာများပေါ်တွင်စိတ်ဝင်စားဖို့ရှာဖွေနေလိုင်းများ Making
သင်သည်သင်၏က်ဘ်ဆိုက်များမှအလျားလိုက်, separator-စတိုင်လိုင်းများကိုထည့်သွင်းဖို့လိုအပ်လျှင်, သင်အနည်းငယ် options များရှိသည်။ သင်သည်သင်၏စာမျက်နှာအဲဒီလိုင်းများအမှန်တကယ်ပုံရိပ်ဖိုင်များကို add နိုင်ပေမယ့် site ကိုစွမ်းဆောင်ရည်အပေါ်အပျက်သဘောဆောင်သောအကျိုးသက်ရောက်မှုရှိနိုင်သောဖိုင်များ, retrieve နှင့် load ရန်သင့် browser ကိုလိုအပ်ပေလိမ့်မည်။
သင့်အနေဖြင့်အသုံးပြုနိုင်တယ် CSS ကို ထည့်သွင်းဖို့နယ်စပ်ပိုင်ဆိုင်မှု နယ်နိမိတ် ထိရောက်စွာသင့်ရဲ့ separator လိုင်းအတွက်ထိပ်မှာသို့မဟုတ် Element တစ်ခုရဲ့အောက်ခြေမှာဖြစ်စေလိုင်းများအဖြစ်ပြုမူသော။
နောက်ဆုံးအနေနဲ့သင်သုံးနိုငျ HTML ကို အလျားလိုက်စိုးမိုးရေးများအတွက်ဒြပ်စင် - ဟာ
အဆိုပါ Horizontal နည်းဥပဒေ Element ကို
သငျသညျအစဉျအမွဲဝဘ်စာမျက်နှာပေါ်တွင် Element တစ်ခုရဲ့ထားပါဘူးလျှင်သင်ဖွယ်ရှိသည်ဤလိုင်းများပြသသော default အလမ်းစံပြမစပ်ဆိုင်ကြောင်းကိုရှာဖွေတွေ့ရှိခဲ့သည်။ ဒါဟာသင့်ရဲ့ site ကိုကြည့်ချင်သလဲဆိုတာနဲ့အညီဖြစ်ဤဒြပ်စင်များ၏အမြင်သဏ္ဌာန်ကိုထိန်းညှိဖို့ CSS ကိုမှဖွင့်ရန်လိုအပ်သည်ဟုဆိုလိုသည်။
တစ်ဦးကအခြေခံ HR tag ကို browser ကိုပြုလုပ်ဖော်ပြရန်လိုလားလမ်းကိုပြသနေသည်။ ခေတ်သစ် browser များပုံမှန်အားဖြင့်မျဉ်းကိုဖန်တီးရန် 100% ၏အကျယ်, 2px အမြင့်နှင့်အနက်ရောင်ထဲမှာ 3D နယ်စပ်နှင့်အတူ unstyled HR tags များပြသ။
ဤတွင်ဖြစ်ပါတယ် စံ HR ဒြပ်စင်၏ဥပမာတစ်ခု ဒါမှမဟုတ်သင်တစ်ဦး unstyled HR ခေတ်သစ် browser များတွင်မြင်တွေ့ရပုံကဒီပုံတွင်တွေ့နိုင်ပါသည်။
width နဲ့အမြင့် web browser များအသုံးပြုနိုင်ရန်တစ်ဝှမ်းညီများမှာ
ကို web browser များအနှံ့တသမတ်တည်းဖြစ်ကြောင်းတစ်ခုတည်းသောစတိုင်များအဆိုပါများမှာ အကျယ် နှင့်စတိုင်များ။ ဤလိုင်းဖွစျလိမျ့မညျကိုဘယ်လိုကြီးမားတဲ့သတ်မှတ်။ သင် width နဲ့ height သတ်မှတ်မပြုရင် default အ width ကို 100% နှင့်က default အမြင့် 2px ဖြစ်ပါတယ်။
ဒီဥပမာမှာ width ကို (။ အားလုံးအောက်တွင်ဖော်ပြထားသောဤဥပမာ inline စတိုင်များပါဝင်သည်ထုတ်လုပ်မှု setting ကိုခုနှစ်တွင်ဤစတိုင်များအမှန်တကယ်အားလုံးသင့်ရဲ့စာမကျြနှာတလျှောက်လုံးစီမံခန့်ခွဲမှု၏လွယ်ကူခြင်းအဘို့အအနေနဲ့ external style sheet ၌ရေးထားလျက်ရှိ၏မည်ဖြစ်ကြောင်းသတိပြုပါ) မိဘဒြပ်စင်များ၏ 50% သည်:
စတိုင် = "width: 50%;">
နှင့်ဤဥပမာထဲမှာအမြင့် 2em ဖြစ်ပါသည်:
စတိုင် = "အမြင့်: 2em;">
အဆိုပါနယ်ခြားမဲ့ပြောင်းခြင်း Challenge Be နိုင်သလား
ခေတ်သစ် browser များအတွက်, browser ကိုနယ်စပ်ချိန်ညှိခြင်းအားဖြင့်လိုင်းတည်ဆောက်။ သင်စတိုင်လ်ပိုင်ဆိုင်မှုနှင့်အတူနယ်စပ်ကိုဖယ်ရှားမယ်ဆိုရင်ဒါကြောင့်လိုင်းစာမျက်နှာပေါ်ပျောက်ကွယ်သွားပါလိမ့်မယ်။ သင်ဤဥပမာထဲမှာ (အလိုင်းမမြင်ရတဲ့ဖွစျလိမျ့မညျအဖြစ်ကောင်းစွာသင်ဘာမှမမြင်ရပါလိမ့်မယ်) ကြည့်ရှုနိုင်သကဲ့သို့:
စတိုင် = "နယ်စပ်: none;">
နယ်စပ်အရွယ်အစားချိန်ညှိ, အရောင်, နှင့်စတိုင်မျဉ်းကွဲပြားခြားနားသောကြည့်ရှုစေအပေါင်းတို့နှင့်ခေတ်သစ် browser များအတွက်တူညီသောအကျိုးသက်ရောက်မှုရှိပါတယ်လိမ့်မယ်။ ဥပမာ, ဒီဆန္ဒပြပွဲအတွက်နယ်စပ်, အနီရောင် dashed နှင့် 1px ကျယ်ပြန့်သည်:
စတိုင် = "နယ်စပ်: 1px # 000 dashed;">
သင်နယ်စပ်နှင့်အမြင့်ကိုပြောင်းလဲလျှင်မူကား, ထိုစတိုင်များသူတို့ခေတ်သစ် browser များအတွက်လုပ်ပေးထက်အလွန်ခေတ်မမီတော့ browser များတွင်အနည်းငယ်ကွဲပြားကြည့်ရှုပါ။ သင်ဤဥပမာထဲမှာကြည့်ရှုနိုင်သကဲ့သို့သငျသညျ IE7 ထဲမှာကြည့်ရှုအောက်တွင်ဖော်ပြထားသော (woefully ခေတ်မမီတော့ဖြစ်ပါတယ်မရှိတော့သည် Microsoft ကထောက်ခံသည့်ဘရောက်ဇာ) ပါလျှင်, (ထ IE8 နဲ့အပါအဝင်) အခြား browser များတွင်မပြပါဘူးတဲ့ beveled အတွင်းလိုင်းလည်းမရှိ :
စတိုင် = "အမြင့်: 1.5em; width: 25em; နယ်စပ်: 1px အစိုင်အခဲ # 000;">
သူတို့အကြီးအကျယ်ပိုပြီးခေတ်မီ options များဖြင့်အစားထိုးခဲ့ကြစဉ်ကတည်းကသူများသည် antiqued browser များ, တကယ်ကယနေ့ကို web ဒီဇိုင်းအတွက်စိုးရိမ်စရာအများကြီးမရှိကြပေ။
တစ်ဦးနောက်ခံပုံရိပ်နဲ့အလှဆင်လိုင်း Make
အစားအရောင်ကသင်ချင်အတိအကျအဖြစ်ကြည့်ပေမယ့်နေဆဲသင့်ရဲ့ markup အတွက်ဝေါဟာရအသုံးအနှုံးကိုဖော်ပြပေးနိုင်အောင်, သင်သည်သင်၏ HR များအတွက်နောက်ခံပုံသတ်မှတ်နိုင်ပါတယ်။
ဒီဥပမာမှာကျွန်တော်တို့ဟာသုံးထူ ထပ်. လိုင်းများကြောင်းကိုပုံတစ်ပုံကိုအသုံးပြုခဲ့သည်။ ယင်းကြောင့် setting by နောက်ခံပုံ မျှထပ်အတူသင်စာအုပ်တွေထဲမှာတွေ့မြင်နီးပါးတူသောအကြောင်းအရာများအတွက်ချိုးဖန်တီး:
စတိုင် = "အမြင့်: 20px; နောက်ခံ: #fff url (aa010307.gif) မထပ်စာစောင်ကိုစင်တာ; နယ်စပ်: none;">
HR Element တွေကိုပြောင်းလဲ
CSS3 နှင့်အတူ, သငျသညျလညျးသငျ့ရဲ့လိုင်းများကိုပိုမိုစိတ်ဝင်စားစရာကောင်းစေနိုင်သည်။ The HR ဒြပ်စင်အစဉ်အလာတစ်ခုအလျားလိုက်လိုင်းဖြစ်ပါသည်, သို့သော် CSS နဲ့ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုအသွင်ပြောင်း, သငျသညျကိုသူတို့ကြည့်ရှုပုံကိုပြောင်းလဲနိုင်သည်။ အဆိုပါ HR ဒြပ်စင်ပေါ်တွင်တစ်ဦးကအကြိုက်ဆုံးအသွင်ပြောင်းသည့်အလှည့်ကိုပြောင်းလဲဖို့ဖြစ်ပါတယ်။
ဒါကြောင့်ကိုယ့်အနည်းငယ်ထောင့်ဖြတ်မယ့်ဒါမှသင့်ရဲ့ HR ဒြပ်စင်လှည့်နိုင်ပါတယ်:
နာရီ {
-moz-transform: လှည့် (10deg);
-webkit-transform: လှည့် (10deg);
-O-transform: လှည့် (10deg);
-ms-transform: လှည့် (10deg);
အသွင်ပြောင်း: လှည့် (10deg);
}
ဒါဟာလုံးဝဒေါင်လိုက်င်နိုင်အောင်ဒါမှမဟုတ်သင်ကလှည့်နိုင်ပါတယ်:
နာရီ {
-moz-transform: လှည့် (90deg);
-webkit-transform: လှည့် (90deg);
-O-transform: လှည့် (90deg);
-ms-transform: လှည့် (90deg);
အသွင်ပြောင်း: လှည့် (90deg);
}
ဒီစာရွက်စာတမ်းအတွက်၎င်း၏လက်ရှိတည်နေရာပေါ်အခြေခံပြီး HR လှည့်, ထို့ကြောင့်သင်ချင်တယ်ဘယ်မှာရရန် positioning ကိုထိန်းညှိဖို့လိုအပ်ပါတယ်စေခြင်းငှါသတိရပါ။ ဒါဟာဒီဇိုင်းကိုမှဒေါင်လိုက်လိုင်းပေါင်းထည့်ရန်ဤသုံးစွဲဖို့အကြံပြုသည်မဟုတ်, ဒါပေမယ့်စိတ်ဝင်စားစရာကောင်းတဲ့အကျိုးသက်ရောက်မှုရရန်နည်းလမ်းဖြစ်ပါသည်။
သင့်ရဲ့စာမျက်နှာများပေါ်တွင် Lines Get ရန်နောက်ထပ်နည်းလမ်း
တချို့လူတွေအစား HR ဒြပ်စင်ကို အသုံးပြု. ၏ကျင့်သောအရာတစ်ခုမှာအခြားဒြပ်စင်၏နယ်နိမိတ်အပေါ်မှီခိုရန်ဖြစ်ပါသည်။ သို့သော်တစ်ခါတစ်ရံတွင်တစ်ဦး HR အများကြီးပိုပြီးအဆင်ပြေပြေနဲ့နယ်နိမိတ်ကို set up ဖို့ကြိုးစားနေထက်သုံးစွဲဖို့ပိုမိုလွယ်ကူသည်။ အခြို့သော browser များ၏သေတ္တာမော်ဒယ်ကိစ္စများပင် trickier တစ်နယ်စပ်ဖွင့် setting စေနိုင်သည်။