css.pdf

Background url imgnavspritesgif 91px 0 style head

  • No School
  • AA 1
  • 116

This preview shows page 111 - 115 out of 116 pages.

background : url (img_navsprites.gif) -91px 0 ; } </style> </head> <body> <img class = "home" src = "img_trans.gif" width = "1" height = "1" /> <br /><br /> CSS for starter , written by saturngod ( ) 111
Image of page 111

Subscribe to view the full document.

<img class = "next" src = "img_trans.gif" width = "1" height = "1" /> </body> </html> background ကို 0 0 သံုးထားတာကို ေတြ႕မွာပါ။ left position က 0 , top position က 0 လုိ႕ ဆိုထားတာပါ။ တတိယ ပံု left position က 91px မွာ စပါမယ္။ တတိယ ပံုကို ေခၚခ်င္ေတာ့ -91px ဆိုျပီး ေခၚလိုက္ပါတယ္။ ဒုတိယပံုကို ေခၚခ်င္ရင္ေတာ့ -47 ဆိုျပီး ေခၚလိုက္ဖုိ႕ လိုပါလိမ့္မယ္။ အဲဒါကို browser မွာ ေအာက္ကလို ျမင္ရပါလိမ့္မယ္။ အဲဒီ image ကို သံုးျပီးေတာ့ navigation ေဆာက္ၾကည့္ရေအာင္။ ေသခ်ာေအာင္ ေအာက္က example ေလးကို ထပ္ၾကည့္လုိက္ပါ။ <html> <head> <style type = "text/css" > #navlist{ position : relative ;} #navlist li{ margin : 0 ; padding : 0 ; list- style : none ; position : absolute ; top : 0 ;} #navlist li, #navlist a{ height : 44px ; display : block ;} #home{ left : 0px ; width : 46px ;} #home{ background : url ('img_navsprites.gif') 0 0 ;} #prev{ left : 63px ; width : 43px ;} #prev{ background : url ('img_navsprites.gif') -47px 0 ;} #next{ left : 129px ; width : 43px ;} #next{ background : url ('img_navsprites.gif') -91px 0 ;} </style> CSS for starter , written by saturngod ( ) 112
Image of page 112
</head> <body> <ul id = "navlist" > <li id = "home" ><a href = "default.html" ></a></li> <li id = "prev" ><a href = "css_intro.html" ></a></li> <li id = "next" ><a href = "css_syntax.html" ></a></li> </ul> </body> </html> အဲဒါကို run လိုက္ရင္ ေအာက္ကလို ျမင္ရပါလိမ့္မယ္။ ကၽြန္ေတာ္တို႕က row တစ္ခု တည္းျဖစ္ေနတဲ့အတြက္ top ကို 0px နဲ႕ ပဲ ေခၚေနပါတယ္။ တကယ္လို႕ ကၽြန္ေတာ္တုိ႕ေတြ hover effect ေတြ သံုးခ်င္တဲ့အခါမွာ row ခုကို အသံုးျပဳရင္ ရသလို ခု တည္းမွာလည္း ရပါတယ္။ အခု top position အေၾကာင္း သိသြားေအာင္ ေအာက္က ပံုကို အသံုးျပဳပါမယ္။ ဒုတိယ row ကေတာ့ hover လုပ္တဲ့အခါမွာ ေျပာင္းသြားဖုိ႕ပါ။ ပံုကိုေတာ့ http:// ကေန ရယူႏိုင္ပါတယ္။ <html> <head> <style type = "text/css" > #navlist{ position : relative ;} #navlist li{ margin : 0 ; padding : 0 ; list- style : none ; position : absolute ; top : 0 ;} CSS for starter , written by saturngod ( ) 113
Image of page 113

Subscribe to view the full document.

#navlist li, #navlist a{
Image of page 114
Image of page 115
  • Fall '19

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern