css用一张背景图片实现导航菜单带背景图效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.111com.net/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title><a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>实现导航菜单带背景图效果</title> 
<style> 
ul,li{ list-style:none; float:left;} 
body{ font-size:12px; line-height:1.6; font-family:Verdana, "宋体", Arial; text-align:center;} 
#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(/upload/201007/20100714195929854.gif); 
background-repeat: no-repeat;color: #000;  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> 
</head> 
<body> 
<a href="http://www.111com.net">网页制作教程</a>,站长必备的高质量<a href="http://www.111com.net/js_a/js.html" target="_blank">网页特效</a>和广告代码。111com.net，站长js特效。<hr>

提示：您可以先修改部分代码再运行

css用一张背景图片实现导航菜单带背景图效果

相关文章

精彩推荐