<style> Inp_l1,.inp_l2,{background:url (yun_qi_img/bg_x.jpg) no-repeat}. inp_l1{width:67px; height:23px; background-position:-4px-4px; border:0; Color: #464646; LINE-HEIGHT:23PX} inp_l2{width:67px; height:23px; background-position:-4px-30px; border:0; color: #464646; LINE-HEIGHT:23PX} </style> <input type= "Submit" value= "Login" class= "INP_L1" onmouseover= "This.classname=" Inp_ L2 ' "onmouseout=" this.classname= ' inp_l1 ' "id=" input_btn1 "name=" enter.x "tabindex=" 4 ">
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
<pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <title> with CSS implementation of a diagram completed navigation bar </title> <style> ul,li{list-style:none; float:left; body{font-size:12px line-height:1.6; Font-family:verdana, "XXFarEastFont-Arial", "Song-Body"; #info li{margin-left:4px; margin-top:15px;} #info a {display:block;text-align:center; padding-left:15px; Padding-top:2px;padding-bottom:1px;background-image:url (yun_qi_img/bg-2.gif); Background-repeat:no-repeat;color: #000; width:47px; Cursor:hand; Text-decoration:none;} #job A:link, #job a:visited{background-position: -62px 0px;} #eve A:link, #eve a:visited{background-position: -124px 0px;} #oth A:link, #oth a:visited{background-position: -186px 0px;} #car a:hover, #car a:active {background-position:0px-22px; color: #fff;} #job a:hover, #car a:active {background-position: -62px-22px; color: #fff;} #eve a:hover, #car a:active {background-position: -124px-22px; color: #fff;} #oth A:hover, #car a:active {background-position: -186px-22px; color: #fff;} </style> </pead> <body> <div id= "info" > <ul> <li id= "Car" ><span> game </span></li> <li id= "Job" ><span> Entertainment </span></li> <li id= "Eve" ><SPAN&G T Menu </span></li> <li id= "oth" ><span> fun </span></li> </ul> </DIV&G T </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]