`
liudaoru
  • 浏览: 1579065 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

TAB式导航栏的快捷实现(IE & FF)

    博客分类:
  • Ajax
阅读更多

应同事要求做了一个,效果如下:

 

当鼠标移上时变色。

没有使用脚本,纯粹通过css实现。同时通过调整背景图片位置的方式解决图片的闪动,主要代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>TRS -- 导航</title>
		<script type="text/javascript">

		</script>
		<style type="text/css">
			#sys_menu a {width:106px;height:34px;display:block;float:left;background:url(btn.gif) 0px 0px no-repeat;font-family:"宋体";text-align:center;color:#fff;font-size:14px;font-weight:600;text-decoration:none;}
			#sys_menu a:hover, #sys_menu a.on {background:url(btn.gif) -106px 0px no-repeat;}
			#sys_menu a span {line-height:34px;}
		</style>
	</head>
	<body style="position:relative;overflow:hidden;">
		<div id="sys_menu">
			<a href="#" class="on"><span>首页</span></a><a href="#"><span>公司介绍</span></a><a href="#"><span>主要产品</span></a><a href="#"><span>奥运专题</span></a>
		</div>
	</body>
</html>

 

span主要是为以后做扩充而留的。

  • 描述: 页面效果
  • 大小: 5.4 KB
  • 描述: 用来做背景的图片
  • 大小: 3.2 KB
2
2
分享到:
评论

相关推荐

    Android垂直tab导航栏、左侧竖直tab导航栏

    "Android垂直tab导航栏、左侧竖直tab导航栏"是一个创新的界面设计,它为Android应用提供了更灵活、更个性化的导航方案,同时也对开发者的技术能力提出了新的挑战,需要掌握自定义View、布局管理、动画实现等相关技能...

    Tab导航栏收集

    Tab导航栏的实现方式多样,可以根据不同的编程语言、框架和库进行定制。本资源"Tab导航栏收集"显然是一个汇总了多种Tab切换实现代码的集合,方便开发者参考和学习。 1. **基础概念**: - Tab导航:Tab是一种UI元素...

    左侧竖直tab导航栏

    综上所述,"左侧竖直tab导航栏"是提升移动应用用户体验的一种有效方法,而VerticalTabLayout+ViewPager的组合则提供了实现这一设计的强大工具。通过理解和熟练运用这些技术,开发者可以创建出更加符合用户习惯的、...

    Android之新闻客服端顶部导航栏Tab点击和左右滑动实现切换界面

    APP市场中大多数新闻App都有导航菜单,随着版本迭代的更新,带来了许多控件,使用新控件让你更方便实现导航栏。 博客地址:http://blog.csdn.net/dickyqie/article/details/55253562

    小程序多种今日头条顶部tab导航栏标签效果实现,带部分注释。

    本项目实现了小程序中类似今日头条的多种顶部Tab导航栏标签效果,为用户提供流畅的滑动体验,并与页面内容无缝联动。下面我们将详细探讨这一实现过程及其关键知识点。 首先,我们要理解小程序的架构。小程序基于...

    网页导航栏tab切换

    本资源针对“网页导航栏tab切换”提供了一种实现方案,特别适合那些希望为自己的网站添加动态、炫酷效果的开发者。下面将详细探讨这个主题。 一、JavaScript在导航栏中的应用 JavaScript是一种强大的客户端脚本语言...

    Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

    本文将详细介绍如何使用`TabLayout`和`ViewPager`在Android应用中实现底部Tab导航栏。 首先,我们需要在项目的`build.gradle`文件中引入`Android Design Support Library`。在`dependencies`块中添加以下依赖: ``...

    CSS网页导航栏样式制作软件

    尽管这个软件没有折叠导航栏的功能,但用户仍然可以通过其他方式实现这一效果,例如使用CSS的`:hover`伪类来实现鼠标悬停时的折叠效果,或者利用JavaScript来添加动态交互。 在压缩包中的文件`csstabdesigner2.exe`...

    导航栏生成器CSS Tab Designer.zip

    【CSS Tab Designer】是一款强大的在线工具,专门用于创建和设计美观、响应式的导航栏。它基于CSS(层叠样式表)技术,使开发者能够轻松定制和预览网页的Tab式导航结构。通过这款生成器,你可以快速制作出适应不同...

    RadioButton_Fragment_Tab实现底部导航栏

    本教程将详细讲解如何使用RadioButton和Fragment来实现这样的底部导航栏。 首先,我们需要理解RadioButton的基本概念。RadioButton是Android中的单选按钮控件,属于RadioGroup的一部分。RadioGroup是一个可以包含多...

    IE Tab Chrome 插件,切换IE内核

    2. **兼容性**: IE Tab 支持多种IE版本,如IE5、IE6、IE7、IE8、IE9、IE10和IE11,满足不同网站的需求。 3. **书签同步**: 与Chrome的书签同步功能兼容,方便用户管理网页链接。 4. **隐私保护**: 在使用IE Tab时,...

    8套-多功能响应式UI组件网页模板源码合集-适配移动端设备-header&导航栏&文章列表&tab页等.zip

    它采用了前沿的HTML5和CSS3技术,实现了响应式设计,能够无缝适配各种设备的屏幕尺寸。此外,它还内置了丰富的JavaScript插件,助您轻松实现各种复杂的交互效果。这套源代码文件具有极高的可定制性,您可以根据您的...

    layui点击导航栏刷新tab页的示例代码

    在Layui的tab组件中,若要实现点击导航栏切换tab页时能够刷新内容,可以利用Layui提供的配置选项来实现。具体的方法是通过修改tab组件的配置项中的autoRefresh属性来达到效果。在未修改之前,autoRefresh的默认值为...

    左侧导航与tab页切换HTML示例

    2. CSS样式:定义导航栏和tab页的样式,如背景色、字体、边框等,同时设置tab页的默认隐藏和激活状态的样式。 3. JavaScript/jQuery代码:处理点击导航栏时的事件,根据点击的导航项,显示对应的tab页内容,并更新...

    IE Tab Multi (Enhance) for Chrome 1.0.0.1离线安装包

    可在Chrome内使用多标签页式的IE,同时比其它IE扩展拥有更多强大的实用功能! IE Tab Multi 的表现与原版IE是最相近的。 你可以不用再另外打开IE访问只能在IE中访问的网站并运行ActiveX控件。 这个扩展只支持Windows...

    ie tab插件

    IE Tab 实现其功能的关键在于它能够调用系统中的IE渲染引擎。当用户安装并启用该插件后,对于特定的网页,IE Tab 会临时将浏览器的渲染模式切换到IE内核,使得网页按照IE的规则进行解析和展示。这样,即使是在使用非...

    HTML5&SVG实现的超酷动画Tab菜单栏

    一款基于SVG和CSS3的动画Tab菜单插件,菜单图标使用SVG绘制而成,切换时还会产生不错的动画效果,还同时会渐变地更新页面的背景颜色,当然如果你觉得太花里胡哨,可以自行修改js代码取消背景颜色的渐变切换。

Global site tag (gtag.js) - Google Analytics