CSS制作的有弹动效果的网页导航 1

发了个韩国网站(www.firstkids.co.kr)给我,让我用CSS写一个类似这个网站的导航栏效果

思路是:背景图像定位!

<a href="https://www.haoyidiansheji.com/tag/%e8%bf%99%e6%98%af%e4%b8%80%e4%b8%aa" title="查看更多关于 这是一个 文章" target="_blank">这是一个</a>导航

#nav{
list-style:none;
margin:0;
padding:5px 0 0 0;
background:#F0F0F0;
}
#nav li{
float:left;
display:inline;
margin-right:2px;
}
#nav a{
float:left;
width:81px;
height:28px;
text-align:center;
background:url(http://www.webjx.com/files/091011/1_130617.gif) no-repeat 0 -4px #F3602A;
font:12px/24px '宋体';
color:#FFF;
text-decoration:none;
}
#nav a:hover{
line-height:28px;
background-position:0;
}

声明:本站所有文章均摘自网络。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。