滑动门和翻转门实现的横竖双tab标签测试页面（附源码）
双tab可以用来表现二维数据的某一个单元。所以很多情况下还是比较有用的。但是很少人用这个而已。人们少用的原因比较多。反正我是比较少见的。
此版本至少测试版，只有IE6下进行了测试。FF和IE7一定会有问题的。所以还要使用一些css hack的技巧（可以参看：http://www.cnblogs.com/JustinYoung/archive/2007/09/14/892414.html）
不多说，横向的延伸用的是滑动门技术，鼠标移上去变色用的是翻转门技术。什么这门，那门的，好像很神秘的样子，其实看看代码就知道了，也不是很难的，只是个名称而已。我还停不喜欢这些叫法的，因为把一些其实很简单的东西都叫复杂了。就像“黑话”一样。难道把一些门外面的人都忽悠晕了，自己就变成了高手吗？
源码下载(点击下发图片下载)：
下面是代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!" />
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
<title>CSS/Javascript demo</title>
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
#container{
background-color:#333;
border:1px dotted green;
width:800px;
margin:10px auto;
padding-bottom:10px;
}
.jui-dirBr{
clear:both;
}
.divTab{
width:620px;
background-color:#fff;
min-height:240px;
_height:240px;
padding:10px;
}
/*- Menu Tabs--------------------------- */
.tabs {
margin:0;
width:800px;
font-size:93%;
line-height:normal;
height:31px;
float:left;
}
.tabs ul {
margin:0;
padding:10px 10px 0 180px;
list-style:none;
}
.tabs li {
display:inline;
margin:0;
padding:0;
}
.tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.tabs a span {float:none;}
/* End IE5-Mac hack */
.tabs a:hover span {
color:#FF9834;
}
.tabs a:hover {
background-position:0% -42px;
}
.tabs a:hover span {
background-position:100% -42px;
}
.tabs .selected {
background-position:0% -42px;
cursor:default;
}
.tabs .selected span{
background-position:100% -42px;
color:#FF9834;
}
/******************************/
.tabs-v {
width:150px;
font-size:93%;
line-height:normal;
float:left;
_position:relative;
_left:3px;
}
.tabs-v ul {
margin:0;
padding:30px 0 10px 10px;
list-style:none;
}
.tabs-v li {
margin:0 0 2px 0;
padding:0;
}
.tabs-v a {
background:url("tableftH_V.gif") no-repeat left top;
margin:0;
display:block;
width:100%;
text-decoration:none;
}
.tabs-v a span {
display:block;
background:url("tabrightH_V.gif") no-repeat right top;
padding:7px 0px 7px 5px;
margin-left:3px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.tabs-v a span {float:none;}
/* End IE5-Mac hack */
.tabs-v a:hover span {
color:#FF9834;
}
.tabs-v a:hover {
background-position:0% -26px;
}
.tabs-v a:hover span {
background-position:100% -26px;
}
.tabs-v .selected {
background-position: 0% -26px;
cursor:default;
}
.tabs-v .selected span{
background-position: 100% -26px;
color:#FF9834;
}
</style>
</head>
<body>
<div id="container">
<div class="tabs">
<ul>
<li><a href="#" title="Link 1" ><span>Link 1</span></a></li>
<li><a href="#" title="Link 2" class="selected"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
</ul>
</div>
<div class="tabs-v">
<ul>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3" class="selected"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
</ul>
</div>
<div class="divTab">
<p>横竖双tab标签。FF需要再调整。IE6测试通过。</p>
<a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
</div><!--end: divTab -->
</div><!--end: container -->
</body>
</html>
keyword:css样式表,滑动门技术,滑动门效果,css滑动门,滑动门代码,史丹利滑动门,css滑动门技术,滑动门菜单,翻转门技术,翻转门效果,css翻转门,翻转门代码,css翻转门技术,翻转门菜单
转载于:https://www.cnblogs.com/JustinYoung/archive/2007/09/25/905740.html
滑动门和翻转门实现的横竖双tab标签测试页面（附源码）相关推荐
- [附源码]计算机毕业设计Python+uniapp安卓门禁系统appo8yd7(程序+源码+LW+远程部署)
[附源码]计算机毕业设计Python+uniapp安卓门禁系统appo8yd7(程序+源码+LW+远程部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程 项目运行环境配置: Pyt ...
- 【附源码】计算机毕业设计JAVA政府机关门禁管理系统
[附源码]计算机毕业设计JAVA政府机关门禁管理系统 目运行 环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(In ...
- html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
- 计算机毕业设计（附源码）python政府机关门禁管理系统
项目运行 环境配置: Pychram社区版+ python3.7.7 + Mysql5.7 + HBuilderX+list pip+Navicat11+Django+nodejs. 项目技术: dj ...
- (附源码)计算机毕业设计SSM政府机关门禁管理系统
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- 【附源码】计算机毕业设计java政府机关门禁管理系统设计与实现
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- Opencv 摄像头二次开发，横竖屏切换，前后摄像头切换，铺满全屏问题，一次解决（附源码）
Android Opencv 4.2 摄像头二次开发之 横竖屏切换,前后摄像头切换,铺满全屏问题,相机无法启动问题,一次解决 问题1.横竖屏切换崩溃问题 描述: 主要是原生的Opencv demo中没 ...
- android ios滑动解锁效果,Android 高仿 IOS7 IPhone 解锁 Slide To Unlock 附源码
0. 源码下载 1. IPhone 解锁 效果图: 在最新的IOS7中,苹果更改了解锁方式,整个屏幕向右滑动都可以解锁,不再局限在一个小的矩形中.这种文字加亮移动的效果还是继承了下来.之前滑动最左边的 ...
- android仿疯狂猜图源码,Android开发实现高仿优酷的客户端图片左右滑动切换功能实例【附源码下载】...
本文实例讲述了Android开发实现高仿优酷的客户端图片左右滑动切换功能.分享给大家供大家参考,具体如下: 本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和 ...
最新文章
- 干货 | AI 工程师必读，从实践的角度解析一名合格的AI工程师是怎样炼成的
- Ubuntu18.04.4 报错Name or service not known
- Linux工具快速上手，Linux很实用命令
- C语言 其他标准函数
- leetcode笔记：Search in Rotated Sorted Array
- win32汇编入门(一)
- 2017西安交大ACM小学期数论 [阅兵式]
- Hadoop不适合哪些场景 哪些场景适合？
- 性能测试分析与调优原理
- 非常OK！小米10发布/上市日期泄露，小米股价大涨逾6%
- 6远程桌面连接不上_windows server2008 远程桌面 创建新用户和多用户登录
- Android View框架总结（七）View事件分发机制
- Android小项目--2048小游戏
- 安全浏览器版本过低？该升级浏览器内核了
- CTabSheet类源码
- java 适配器模式详解_JAVA设计模式详解（五）----------适配器模式
- 终于下定决心经营自己的 GitHub 账号
- 浅谈SVG的两个黑魔法
- 让最新免费版WPS支持Office VBA
- Mysql数据库-初识Mysql