Blog မွာ Scoll Box ထည္႕နည္း( ၄) မ်ဳိး

Basic HTML Scroll Box ေလးမ်ဴိးကုိ ကြၽန္ေတာ္ တင္ျပမွာ ျဖစ္ပါတယ္၊
ပထမနည္း
ဒီနည္းကေတာ႕ ကြၽန္ေတာ္တုိ႕ ရုိးရုိး Scoll Box တစ္ခုဖန္းတီတာျဖစ္ပါတယ္ ေအာက္က code ေတြကုိေလ႕လာျပီ စမ္းၾကည္႔ပါ၊

<div style="height:120px;width:250px;font:16px/26px Georgia,Zawgyi_One, Garamond, Serif;overflow:scroll;">
Height:120px နဲ႕ width:250px ကေတာ႕ မိမိ Scroll box ရဲ႕အျမင္႔နဲ႕ အက်ယ္ျဖစ္ပါတယ္ မိမိလုိခ်င္သလုိေျပာင္ႏုိင္ပါတယ္။
</div>

အထက္ပါ code ကုိ Run ၾကည္႕လုိက္ရင္ ေအာက္ပါအတုိင္းက်လာပါမည္၊

Height:120px နဲ႕ width:250px ကေတာ႕ မိမိ Scroll box ရဲ႕အျမင္႔နဲ႕ အက်ယ္ျဖစ္ပါတယ္ မိမိလုိခ်င္သလုိေျပာင္ႏုိင္ပါတယ္။

ဒုတိယနည္း
Scroll Box ကုိ Background color နဲ႕ ျပဳလုပ္တာျဖစ္ပါတယ္၊ ေအာက္က code ေတြကုိ မိမိတုိ႕ Blog ေတြကုိ စိတ္ၾကိဳက္ စမ္းထည္႔ၾကည္႔ပါ၊

<div style="height:150px;width:300px;overflow:scroll;background-color:#67F152;">မိမိတုိ႕ color ေတြ အျမင္႕အက်ယ္ေတြစိတ္ၾကိဳက္ျပန္လည္ျပဳျပင္ႏုိင္ပါတယ္။ color အေၾကာင္းကုိ Html အေၾကာင္းမွာေဖာ္ျပေပးပါမည္။</div>


ေအာက္က Result ကုိၾကည္႔ပါ၊

မိမိတုိ႕ color ေတြ အျမင္႕အက်ယ္ေတြစိတ္ၾကိဳက္ျပန္လည္ျပဳျပင္ႏုိင္ပါတယ္။ color အေၾကာင္းကုိ Html အေၾကာင္းမွာေဖာ္ျပေပးပါမည္။

တတိယနည္း
မိမိတုိ႔ပုုံေတြထည္႔တာျဖစ္ပါတယ္၊ Scroll Box နဲ႕ ပုံေတြထည္႕တဲ႕ေနရာမွာ ကုိယ္႕ပုံတင္ခ်င္တယ္ဆုိရင္ေတာ႕ မိမိပုံကုိ ပထမ upload တင္ဖုိ႕ေတာ႕ လုိအပ္တယ္၊ျပီရင္ ရလာတဲ႕ link ကုိ img src မွာ မိမိ link နဲ႕ အစာထုိလုိက္ပါ၊

<div style="height:221px;width:330px;overflow:scroll;">
<img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br />
<img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" />
</div>

စတုတၱနည္း

ဒီ code ကေတာ႕ ကြၽန္ေတာ္တုိ႕ ပုံေတြကုိ background ထားျပီ စာေရးတဲ႕နည္းျဖစ္ပါတယ္။
<div style="height:220px;width:325px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">မိမိပုံကုိ background ထားျပီ စာေရးခ်င္တယ္ဆုိရင္ေတာ႕ဒီနည္းကုိ အသုံးျပဳႏုိင္ပါတယ္။
</div>

မိမိပုံကုိ background ထားျပီ စာေရးခ်င္တယ္ဆုိရင္ေတာ႕ဒီနည္းကုိ အသုံးျပဳႏုိင္ပါတယ္။

Posted in: Blog