csdn的blog后台程序的导航菜单的实现

原创 2007年10月10日 22:52:00

研究了一下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>

【ssm个人博客项目实战03】左侧导航菜单功能实现

先说一下具体的功能就是当我们点击左侧菜单选项时,右侧主界面会显示对应的内容。也就是说每当我们点击左侧导航菜单就等于打开了一个新的页面只不过它是选项卡的形式显示在center中。打开easyUI API...
  • xp541130126
  • xp541130126
  • 2017年04月14日 18:09
  • 2136

底部导航栏的几种实现方式

概述Android底部导航栏实现方式真的是太多了~在这里仅介绍几种实现方式~建议使用TabLayout +ViewPager ,TabLayout是Android Material Design中的控...
  • yangshangwei
  • yangshangwei
  • 2016年03月16日 23:58
  • 10999

实现博客园首页导航菜单效果 前台代码

网站分类                                         .NET技术(0)                 编程语言(0)           ...
  • zshaodan092011
  • zshaodan092011
  • 2013年04月25日 09:01
  • 1368

借助apache来实现下载后台程序导出的excel文件

在pb客户端模式需要查询客户详单,因为详单是分布在几十台通讯主机上面,前台只是发送一条申请记录,数据录入时触发器写一个标记文件到后台服务程序的目录中,后台程序timer(3)进行检查(这样不用扫描数据...
  • chengg0769
  • chengg0769
  • 2015年08月02日 14:07
  • 1381

手把手教你用DWR实现js前台调用后台程序而不需要AJAX

手把手教你用DWR实现js前台调用后台程序而不需要AJAX 利用DWR组件实现前台直接操作后台数据 1.到http://download.csdn.net/detail/lishirong/401...
  • lishirong
  • lishirong
  • 2014年12月02日 09:49
  • 3345

Android能否实现一键清理后台程序后程序自启动(类似QQ微信不被清理软件杀死)

答案是 不能 苹果app应用即使app退到后台或被杀掉也能收到推送消息,这是因为苹果服务器的原因,苹果服务器可以找到每个苹果手机进行推送,但是谷歌不提供推送使得很多产品经理希望实现如苹果一样的体验...
  • hellowoshijiali
  • hellowoshijiali
  • 2015年04月21日 18:48
  • 3138

一个Java后台程序的实例

一个JAVA后台程序的设计方案     选择自 glchengang 的 Blog    关键字   java.util.Timer 定时器 后台  出处      作者:陈刚,桂林人,97...
  • scoredevil
  • scoredevil
  • 2011年12月28日 17:21
  • 426

精简的后台程序代码——Update

public class Update     {         private static string UPDATE_SQL = @"UPDATE {0} SET {1} WHERE {2...
  • hoiven
  • hoiven
  • 2016年07月19日 15:36
  • 565

网络服务器后台程序开发架构

网络服务器后台程序开发几种架构包括: 1.多线程模型,多线程模型即每次网络请求开启一个线程处理,这种模型瓶颈是高并发,容灾性能差。一旦某次处理挂起,将影响其他的线程的创建和运行,整个处理的并发数收到...
  • aries5555
  • aries5555
  • 2012年11月27日 20:46
  • 3209

快速解决打印机后台程序服务没有运行的问题

  许多人在安装使用打印机时或者添加打击机时,通常会出现一个系统错误提示:“打印机后台程序服务没有运行”要么就在使用打印机打印时提示“后台处理程序子系统应用程序已停止工作并关闭”,相信许多朋友都...
  • u010326424
  • u010326424
  • 2014年06月08日 11:48
  • 1331
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:csdn的blog后台程序的导航菜单的实现
举报原因:
原因补充:

(最多只允许输入30个字)