용 CSS实现的一张图完成的导航条</p> <p><style></style></p> <p>ul,li{ list-style:none; float:left;}</p> <p>body{ font-size:12px; 줄 높이:1.6; 글꼴 계열:Verdana, '宋体', Arial; text-align:center;}</p> <p>#info li{ margin-left:4px; margin-top:15px;}</p> <p>#info a {display:block;text-align:center; padding-left:15px;</p> <p>padding-top:2px;padding-bottom:1px;배경-이미지: </p> <p>url(/upload/20080515201218783.GIF);</p> <p>Background-repeat: no-repeat;color: #000 ; 너비:47px; 커서:손; 텍스트 장식: 없음;}</p> <p>#job a:link,#job a:visited{배경-위치: -62px 0px;}</p> <p>#eve a:link,#eve a:visited{배경-위치: -124px 0px;}</p> <p>#oth a:link,#oth a:visited{배경-위치: -186px 0px;}</p> <p>#car a:hover ,#car a:active {배경-위치: 0px -22px; 색상:#fff;}</p> <p>#job a:hover ,#car a:active {배경 위치: -62px -22px; 색상:#fff;}</p> <p>#eve a:hover ,#car a:active {배경 위치: -124px -22px; 색상:#fff;}</p> <p>#oth a:hover ,#car a:active {배경 위치: -186px -22px; color:#fff;}</p> <p></style></p> <p></head></p> <p><body> </p> <p><p id="info"></p> <p> <ul></p> <p> <li id="car"><a href="#" target="_blank"><span></p> <p> 游 戏</span></a></li></p> <p> <li id="job"><a href="#" target="_blank"><span></p> <p> 娱 乐</span></a></li></p> <p> <li id="eve"><a href="#" target="_blank"><span></p> <p> 菜 单</span></a></li></p> <p> <li id="oth"><a href="#" target="_blank"><span></p> <p> 好 玩</span></a></li> </p> <p> </ul> </p> <p></p></p> <p></body></p> <p></html></p> <p><br></p>
