导航箭头效果 css

2010-12-23 13:34:58 by 【6yang】, 298 visits, 收藏 | 返回

制作效果:

背景图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航箭头效果 css</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">

*{ padding:0; margin:0;}
li{ list-style:none;}
#menus li{
    display:inline;
}
li {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}
#menus li a {
    background:transparent url(images/menu.gif) no-repeat;
    display:block;
    color:#382E1F;
    height:31px;
    line-height:31px;
    padding:0 20px;
    margin-left:-10px;
    text-decoration:none;
    font-size:11px;
    float:left;
    z-index:1;
}

#menus li a.home {
    background-position:0 -93px;
    width:45px;
    padding:0;
    margin-left:0;
    text-indent:-999em;
}
#menus li a.home:hover {
    background-position:0 -124px;
}
#menus li a:hover {
    background-position:0 -31px;
}

.aa,.bb{
    display:inline;
}

</style>
<script type="text/javascript">

$(function(){

});

</script>
</head>
<body>
<ul id="menus">
    <li class="page_item"><a href="http://www.sndaued.com/blog/" title="首页" class="home">首页</a></li>
    <li class="page_item page-item-9"><a title="About" href="http://www.sndaued.com/blog/?page_id=9">About</a></li>
    <li class="page_item page-item-11 current_page_item"><a title="Services" href="http://www.sndaued.com/blog/?page_id=11">Services</a></li>
    <li class="page_item page-item-13"><a title="Join us" href="http://www.sndaued.com/blog/?page_id=13">Join us</a></li>
    <li><a href="javascript:void(0);" class="lastmenu"></a></li>
</ul>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=864&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

导航箭头效果 css

图片原图