သင္ခန္းစာ-၃
ဒီေန႔တင္ျပသြားမွာကေတာ့ cssနဲ႔ေနာက္ခံပံုထည့္နည္းနဲ႔linkေတြေအာက္ကမ်ဥ္းေၾကာင္းေဖ်ာက္နည္းရယ္linkကိုအေရာင္အမ်ိဳးမ်ိဳးသတ္မွတ္တာရယ္ကိုတင္ျပသြားမွာျဖစ္ပါတယ္ ေနာက္ခံပုံထည့္နည္းကလြယ္ပါတယ္
background-image:url("image link"); ဒီလိုေရးပါတယ္ ကြင္းစကြင္းပိတ္ထဲမွာပံုနာမည္သို႔မဟုတ္လင့္ကိုထည့္ရံုပါပဲ ေနာက္ပီးကိုယ္ထည့္လိုက္တဲ့ပံုနဲ႔ပါတ္သက္ပီးျပင္ဆင္မႈေလးေတလုပ္ပါမယ္ သူ႔ရဲ႕ျပင္ဆင္ခ်က္ေတြကေတာ့ ၁.background-repeat:norepeat; သူကေတာ့ ဥပမာအလ်ား၁၀၀အနံ၁၀၀႐ွိတဲ့tableတစ္ခုတည္းကိုအလ်ား၁၀အနံ၁၀႐ွိတဲ့ပံုတစ္ပံုထည့္မယ္ဆို backgroundထည့္မွာျဖစ္တဲ့အတြက္tableရဲ႕၁၀၀မျပည့္မခ်င္းျဖည့္သြားမွာျဖစ္တဲ့အတြက္ပံုက၁၀ပံုျဖစ္သြားမွာပါ norepeatကိုသံုးျခင္းျဖင့္ပံုကိုတစ္ပံုပဲေပၚေစမွာပါ repeatထားမယ္ဆိုရင္ေတာ့ပံုအမ်ားႀကီးျဖစ္ေနမွာပါ ၂.background-attachment:fixed; သူကေတာ့ဥပမာ tableထဲေနာက္ခံပံုထည့္လိုက္မယ္ပီးရင္စာေရးမယ္ အဲ့မွာuserကစာကိုဆြဲဖတ္တဲ့အခါမွာပံုကလည္းစာနဲ႔အတူလိုက္ပါသြားမွာပါ အဲ့လိုပါမသြားခ်င္ပဲပံုကရပ္ေနၿပီးစာပဲသြားေစခ်င္ရင္ေတာ့fixedကိုသံုးပါတယ္စာနဲ႔အတူပံုပါပါသြားေစခ်င္ရင္ေတာ့scrollကိုသံုးပါတယ္ ၃.background-position:left top; သူကေတာ့ပံုကိုဘယ္နားမွာေပၚေစခ်င္လိုတဲ့အခါမွာသံုးပါတယ္left topဆိုပံုကဘယ္နဲ႔အေပၚေဒါင့္နားေလးမွာေပၚမွာပါ သတိျပဳရမွာကleftနဲ႔topၾကားမွာspaceတစ္ခ်က္ျခားရပါမယ္ pxနဲ႔လည္းေဖာ္ျပလို႔ရပါတယ္ background-position:15px 25px 50px 80px; အဲ့လိုေရးလို႔ရပါတယ္ left top right bottomပါ ၄.background-color:blue; သူကေနာက္ခံအေရာင္ထည့္တာပါ ၅.background-size:100 150px; သူကပံုအရြယ္အစားသတ္မွတ္တာပါ tableတစ္ခုမွာထည့္ျပပါမယ္<html> <head> <style type="text/css"rel="stylesheet"> body{ background-color:violet; } table{ background-image:url("http://ngabwangaangel.site88.net/image/template1.jpg"); background-repeat:norepeat; width:150px; height:150px; background-size:150 150px; cellpadding:2px; cellspacing:5px; color:green; font-size:20px; } </style> </head> <body> <table> <tr> <td>ကကကကကကက</td> <td>ခခခခခခခခခခခခ</td> </tr> <tr> <td>aaaaaaaaaaaaaa</td> <td>bbbbbbbbbbbbbb</td> </tr> </table> </body> </html> ဒီတစ္ခါလင့္ေတြအေရာင္သတ္မွတ္တာကိုေျပာျပပါမယ္ ၁.text-decoration:none; သူကလင့္ေတြမွာေအာက္မွာမ်ဥ္းပါတာကိုသတိျပဳမိၾကမွာပါအဲ့မ်ဥ္းေလးကိုေဖ်ာက္ခ်င္တဲ့အခါသံုးပါတယ္ ၂.a:link သူကuserကclickမလုပ္ရေသးတဲ့လင့္ေတရဲ႕အေရာင္ကိုသတ္မွတ္တာပါ ၃.a:hover သူကuser clickလိုက္တဲ့အခ်ိန္မွာျပမယ့္အေရာင္ပါ ၄.a:focus သူကလင့္ေပၚကိုuserရဲ႕လက္သို႔မဟုတ္mouse pointerေရာက္ေနတဲ့အခ်ိန္မွာျပတဲ့အေရာင္ပါ ၅.a:visited သူကuserကclickၿပီးသားလင့္ေတရဲ႕အေရာင္ကိုသတ္မွတ္တာပါ ေအာက္မွာေရးနည္းၾကည့္ပါ<html> <head> <style type="text/css"rel="stylesheet"> a{ text-decoration:none } a:link{ color:green; } a:focus{ color:orange; } a:hover{ color:blue; } a:visited{ color:red; } </style> </head> <body> <a href="link1">link1</a><br> <a href="link2">link2</a> </body> </html> ကဲcodeေတြကိုrunၾကည့္ပါခမ်ာ
No comments:
Post a Comment