之前看过好多网站都在模仿ibm首页的tab菜单，
看了下ibm的tab菜单，里面的实现有点复杂，我试着用纯css+sprite做了一个，效果是一样的，用到的图片大小8.85k，ibm的所有加起来7k多。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IBM_Tab_sprite</title>
<style type="text/css">
*{margin:0px; padding:0px;}
img{border:0}
a{color:#555555; text-decoration:none;}
a:hover {color:#D31821; text-decoration:none;}
body{ color:#555555; font-family:宋体,Arial,sans-serif; font-size:12px;}
.tab{list-style:none; width:890px; height:23px; margin:0px auto;}
.tab_1{background:url(tab_bg.png) 0px 0px;}
.tab_2{background:url(tab_bg.png) 0px -23px;}
.tab_3{background:url(tab_bg.png) 0px -46px;}
.tab_4{background:url(tab_bg.png) 0px -69px;}
.tab_5{background:url(tab_bg.png) 0px -92px;}
.tab a{ float:left; width:178px; height:23px; color:#fff; line-height:23px; text-align:center; font-weight:bold }
.tab a:hover{color:#fff;}
.con{ width:890px; height:150px; margin:0px auto; border:1px red solid}
</style>
</head>
<body>
<div class="tab tab_1" id="tab">
<a href="javascript:;" id="tab_1" onmouseover="showInfo(1)">首页</a>
<a href="javascript:;" id="tab_2" onmouseover="showInfo(2)">了解支持</a>
<a href="javascript:;" id="tab_3" onmouseover="showInfo(3)">了解支持</a>
<a href="javascript:;" id="tab_4" onmouseover="showInfo(4)">了解支持</a>
<a href="javascript:;" id="tab_5" onmouseover="showInfo(5)">了解支持</a>
</div>
<div class="con" id="con_1"><h1>制作：rockyuse QQ：296456018</h1></div>
<div class="con" id="con_2" style="display:none">2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
<div class="con" id="con_3" style="display:none">3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
<div class="con" id="con_4" style="display:none">444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
<div class="con" id="con_5" style="display:none">5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div>
<script type="text/javascript">
var old = 1;
document.getElementById("tab_" + old).style.color = "#000";
function showInfo(n){
document.getElementById("tab").className="tab tab_" + n;
document.getElementById("tab_" + old).style.color = "#fff";
document.getElementById("tab_" + n).style.color = "#000";
old = n;
for(var i=1; i<=5; i++){
document.getElementById("con_" + i).style.display="none";
}
document.getElementById("con_" + n).style.display="";
}
</script>
</body>
</html>
图片放在附件里了
分享到：
相关推荐
IBM官网的导航条效果是网页设计中的一个经典案例，它体现了高效、易用且美观的交互设计理念。在本文中，我们将深入探讨IBM官网导航条的设计原理、实现技术以及其对用户体验的影响。 首先，IBM官网导航条的设计注重...
描述中提到了几种不同的皮肤风格，如"2.0红色风格"、"仿ibm"、"仿msn浅兰3"、"仿阿里"、"圆角tab"以及"左右悬停选项卡"，这表明这个资源包包含了一系列预设的CSS样式，可以满足不同的设计需求。这些风格的实现主要...
【标题】"仿IBM首页滚动"是一个网页设计项目，它主要模仿了IBM官方网站首页的滚动效果。这个效果在网页设计中通常被称为滑动展示或全屏滚动，是一种常见且吸引用户的交互方式。通过使用JavaScript和jQuery这两门强大...
随着时间的推移，IBM的桌面体验不断进化，融入了更多的交互元素和视觉效果，以适应用户的操作习惯和审美需求。 总的来说，“传统IBM桌面 IBM壁纸”代表了一段技术发展的历史，它不仅仅是桌面的美化，更是IBM作为...
【IBM世界地图时间天气预报】是一款由IBM公司提供的专业天气预报工具，它集成了IBM的先进数据分析技术和全球气象数据，为用户提供精准、实时的全球天气信息。这款软件以地图的形式展示世界各地的天气状况，帮助用户...
IBM5150是IBM公司于1981年推出的第一代个人计算机，它标志着现代个人计算机时代的开端。这款机器的型号全称为IBM Personal Computer 5150，简称为IBM PC或IBM5150。IBM5150说明图纸深入地揭示了这款历史性的计算机...
IBM SVC（Storage Volume Controller）是IBM推出的一种存储虚拟化解决方案，它允许用户通过一个中央管理接口来管理和控制多个存储设备。本指南将详细介绍IBM SVC软件的安装与配置过程，包括管理口IP的设置以及初始化...
IBM Webpshere 8.5.0ND版自带的商业JDK，版本信息如下： java version "1.6.0" Java(TM) SE Runtime Environment (build pwa6460_26sr2ifix-20120419_02(SR2+IV19661)) IBM J9 VM (build 2.6, JRE 1.6.0 Windows ...
Java连接IBM WebSphere MQ 7处理队列信息所需jar包，从安装目录直接打的包。主要包括： /com.ibm.mq.commonservices.jar /com.ibm.mq.defaultconfig.jar /com.ibm.mq.fta.jar /com.ibm.mq.headers.jar /...
"IBM V5000存储配置" IBM V5000 存储配置是 IBM 公司开发的一款企业级存储解决方案，旨在满足中大型企业的数据存储需求。通过本文档，我们将对 IBM V5000 存储配置进行详细的说明，帮助用户快速上手使用 IBM V5000...
IBM-3D、IBM-iDataPlex、IBM-IO-Cards、IBM-Logos、IBM-Network-BNT、IBM-Network-B-Type、IBM-PDU、IBM-Racks、IBM-SAN、IBM-Server-BladeCenter、IBM-Server-FlexSystem、IBM-Server-Power、IBM-Server-Systemi、...
IBM数字键盘通常包括数字键区、光标控制键（如方向键、Enter、Tab等）以及一些附加功能键，如F1-F12等，这些设计都是为了提高财务人员、程序员或其他需要频繁输入数字的工作者的效率。驱动程序的安装步骤一般如下： ...
**IBM MQ测试工具详解** IBM MQ（原名WebSphere MQ）是IBM公司提供的一款消息中间件，用于在不同系统之间安全、可靠地传输数据。它支持多种操作系统平台和编程语言，确保应用程序之间的通信不受硬件或软件环境的...
本文将深入探讨IBM的MIB库及其相关文件，帮助读者理解其重要性和工作原理。 MIB库是由一系列定义了网络设备属性和配置的结构化数据集合，这些数据通常用于SNMP（简单网络管理协议）来远程监控和管理网络设备。IBM，...
IBM MQ Explore是一款强大的工具，专为管理IBM WebSphere MQ（以前称为IBM Message Queuing或IBM MQ）环境而设计。在Windows环境下安装IBM MQ Explorer，可以帮助系统管理员和开发人员监控、配置和管理IBM MQ队列...
IBM银行业核心系统改造和简化解决方案的知识点涵盖以下几个重要方面： 1. 银行业面临的挑战与改造的必要性 当前银行业正面临前所未有的压力，这些压力包括市场动态性变化、合并与兼并、新竞争者进入市场、客户需求...
【IBM Java 1.6.0】是IBM公司推出的一款基于Java SE 6的高性能、高可靠性的Java运行环境。这个版本的IBM Java是专为Linux i386平台设计的，提供了丰富的功能和组件，以支持各种企业级应用的开发和运行。以下是关于这...
IBM WebSphere MQ，通常简称为IBM MQ，是IBM公司提供的一款高效、可靠的企业级消息中间件产品。它在企业系统间传输数据，确保了数据的可靠传输和事务处理，是构建分布式系统和实现异构环境间通信的重要工具。在本...
A IBM MQ client is part of the product that can be installed on its own, on a separate machine from the base product and server. You can run an IBM MQ application on an IBM MQ client and it can ...