上一篇
下一篇
08-03
28
csdn的blog后台程序的导航菜单的实现
作者:Java伴侣 日期:2008-03-28
研究了一下csdn的 blog后台程序的导航菜单的实现，其特点是每个导航菜单项的宽度不一样，所以，被用作导航条背景的图片不能是一个单一固定长度的图片，所以，csdn采用了一种称之为滑动门的技术，每个菜单项的左边先左对其显示一个半图片，然后右边再右对齐显示另外一个半图片，右边的半个图片显示的多少随菜单项的宽度自动调整，左右两个图分别如下：
左边的图片作为<a>标签的背景图，右边的图片作为<a>标签中内嵌的<span>标签的背景图，下面是整理出来的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#tabsF {
float:left;
width:100%;
font-size:12px;
line-height:normal;
border-bottom:2px solid #666;
margin-top:5px;
}
#tabsF ul {
margin:0;
padding:10px 10px 20px 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background: transparent url("http://writeblog.csdn.net/resources/images/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
margin:0;
background: transparent url("http://writeblog.csdn.net/resources/images/tabrightF.gif") no-repeat right top;
padding:6px 15px 5px 10px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {color:#FFF;}
#tabsF a:hover {background-position:0% -42px;}
#tabsF a:hover span {background-position:100% -42px;}
#tabsF #current a {background-position:0% -42px;}
#tabsF #current a span {background-position:100% -42px;}
</style>
</head>
<body>
<div id="tabsF">
<span id="ctl00_menu"></span><ul><li id="current"><a href="Default.aspx"><span>后台首页</span></a></li><li><a href="PostList.aspx"><span>管理文章</span></a></li><li><a href="PostEdit.aspx"><span>写新文章</span></a></li><li><a href="ArticleList.aspx"><span>收藏</span></a></li><li><a href="AdminGroups.aspx"><span>圈子</span></a></li><li><a href="Feedback.aspx"><span>评论</span></a></li><li><a href="EditLinks.aspx"><span>链接</span></a></li><li><a href="EditGalleries.aspx"><span>相册</span></a></li><li><a href="EditKeywords.aspx"><span>关键字</span></a></li><li><a href="Referrers.aspx"><span>访问来源</span></a></li><li><a href="Configure.aspx"><span>配置</span></a></li><li><a href="Preferences.aspx"><span>参数选择</span></a></li><li><a href="http://hi.csdn.net"><span>个人空间</span></a></li></ul>
</div>
</body>
</html>
左边的图片作为<a>标签的背景图，右边的图片作为<a>标签中内嵌的<span>标签的背景图，下面是整理出来的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#tabsF {
float:left;
width:100%;
font-size:12px;
line-height:normal;
border-bottom:2px solid #666;
margin-top:5px;
}
#tabsF ul {
margin:0;
padding:10px 10px 20px 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background: transparent url("http://writeblog.csdn.net/resources/images/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
margin:0;
background: transparent url("http://writeblog.csdn.net/resources/images/tabrightF.gif") no-repeat right top;
padding:6px 15px 5px 10px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {color:#FFF;}
#tabsF a:hover {background-position:0% -42px;}
#tabsF a:hover span {background-position:100% -42px;}
#tabsF #current a {background-position:0% -42px;}
#tabsF #current a span {background-position:100% -42px;}
</style>
</head>
<body>
<div id="tabsF">
<span id="ctl00_menu"></span><ul><li id="current"><a href="Default.aspx"><span>后台首页</span></a></li><li><a href="PostList.aspx"><span>管理文章</span></a></li><li><a href="PostEdit.aspx"><span>写新文章</span></a></li><li><a href="ArticleList.aspx"><span>收藏</span></a></li><li><a href="AdminGroups.aspx"><span>圈子</span></a></li><li><a href="Feedback.aspx"><span>评论</span></a></li><li><a href="EditLinks.aspx"><span>链接</span></a></li><li><a href="EditGalleries.aspx"><span>相册</span></a></li><li><a href="EditKeywords.aspx"><span>关键字</span></a></li><li><a href="Referrers.aspx"><span>访问来源</span></a></li><li><a href="Configure.aspx"><span>配置</span></a></li><li><a href="Preferences.aspx"><span>参数选择</span></a></li><li><a href="http://hi.csdn.net"><span>个人空间</span></a></li></ul>
</div>
</body>
</html>
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 487
发表评论
