<!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>滑动门</title>
<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*滑动门的宽度*/}
/* TAB 切换效果 */
.tb_{background-image: url('http://www.codefans.net/jscss/demoimg/200901/tabs1.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/* 控制显示与隐藏css类 */
.normaltab { background-image:url('http://www.codefans.net/jscss/demoimg/200901/tabs2.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab { background-image: url('http://www.codefans.net/jscss/demoimg/200901/tabs3.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">
ASP.NET</li>
<li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
MYSQL</li>
<li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
DELPHI</li>
<li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);">
VB.NET</li>
<li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);">
JAVA</li>
<li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);">
PHP5</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">这里是ASP.NET的相关内容</div>
<div class="undis" id="tbc_02">这里是MYSQL的相关内容</div>
<div class="undis" id="tbc_03">这里是DELPHI的相关内容</div>
<div class="undis" id="tbc_04">这里是VB.NET的相关内容</div>
<div class="undis" id="tbc_05">这里是JAVA的相关内容</div>
<div class="undis" id="tbc_06">这里是PHP5的相关内容</b>
</div>
</div>
</div>
</body>
</html>
two:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52css.com</title>
<style type="text/css">
<!--
#woaicss {
width:100%
margin:0;
padding:0;
font-size:13px;
line-height:38px;
font-family: Arial, Courier, "Courier New", monospace ;
}
#woaicss2 {
width:100%;
height:50px;
background:#c00;
text-align:center;
font-size:18px;
line-height:50px;
color:#fff;
background:#c00;
float:left;
}
#woaicss ul {
margin:20px 0 0 18px;
padding:0;
list-style-type:none;
background:#fff;
}
#woaicss li {
float:left;
margin:0;
padding:0;
background:url(attachments/month_0702/hm_4.jpg) no-repeat right top;
}
#woaicss li a {
display:block;
background:url(attachments/month_0702/hm_3.jpg) no-repeat left top;
padding:0 15px;
font-size:15px;
color:#000;
font-weight:800;
text-decoration:none;
}
#woaicss li a:hover {
color:#c00;
}
#woaicss li.dang {
background:url(attachments/month_0702/hm_2.jpg) no-repeat right top;
}
#woaicss li.dang a {
background:url(attachments/month_0702/hm_1.jpg) no-repeat left top;
color:#fff;
}
#woaicss li.dang a:hover {
color:#fc0;
}
-->
</style>
</head>
<body>
<div id="woaicss">
<ul>
<li><a href="http://www.52css.com/">Div CSS</a></li>
<li><a href="http://www.52css.com/">52CSS</a></li>
<li class="dang"><a href="http://www.52css.com/">52CSS.com</a></li>
<li><a href="http://www.52css.com/"><a href="http://www.52css.com/" target="_blank">CSS Web Design</a></a></li>
<li><a href="http://www.52css.com/">CSS Layout Example</a></li>
</ul>
</div>
<div id="woaicss2">CSSWebDesign - CSSTemplates - CSSLayoutExample - www.52css.com</div>
</body>
</html>
分享到：
相关推荐
滑动门（Sliding Doors）技术是网页设计中一种常见的CSS和JavaScript应用，主要用于创建具有动态效果的导航菜单或按钮。这种技术通过精确控制图像的显示部分，使得元素在鼠标悬停时能呈现出不同的视觉效果，给用户...
滑动门通常利用CSS（层叠样式表）来实现，通过定位和背景图片的偏移来达到“滑动”的效果。 首先，我们来看滑动门的基本结构。一个简单的滑动门通常由两个部分组成：主容器和子元素。主容器是整个滑动门的外框，而...
### CSS+DIV 实现的纵向垂直滑动门效果解析 #### 一、概述 本文将详细介绍如何使用CSS和DIV来实现一个纵向垂直滑动门效果的菜单，这种效果常用于后台管理系统，能够有效地节省空间并提供友好的用户体验。 #### 二...
在网页设计中，"滑动门"效果是一种常见的CSS（层叠样式表）技术，用于创建动态和交互式的用户体验。这种效果通常应用于导航菜单、按钮或者其他需要突出显示或响应鼠标悬停事件的元素。"DivCss鼠标划过滑动门效果...
CSS滑动门技术是一种在网页设计中常用的技巧，主要用于创建具有视觉吸引力的导航菜单或按钮。这个技术利用了CSS的定位、伪类和背景图像属性，使得元素在鼠标悬停时能够显示不同的图像部分，从而实现类似滑动的效果。...
滑动门设计是一种常见的用户界面元素，尤其在移动设备和网页设计中被广泛采用。它提供了优雅的方式来展示和隐藏内容，使得用户界面更加简洁而高效。以下是对20个滑动门示例的详细解析： 1. **基础滑动门**：这是一...
滑动门是一种常见的网页设计元素，特别是在导航菜单和广告展示中。它利用JavaScript或CSS（有时结合HTML）来实现页面内容的动态展示和隐藏，从而提高用户体验和网站交互性。在网页设计中，滑动门通常指的是一个可以...
滑动门技术是一种常见的网页设计手法，主要用于创建动态的、响应用户交互的界面元素。它主要结合了HTML、CSS（层叠样式表）以及JavaScript这三种核心技术，为用户提供了一种优雅的方式来展示信息或图片。在网页设计...
JQuery滑动门特效是一种常见的网页交互效果，它利用了JQuery库的强大功能，为用户提供了一种动态且吸引人的展示方式。这种特效通常应用于网站的导航菜单、广告轮播或者内容展示区域，使得用户可以方便地浏览和选择...
滑动门导航栏是一种经典的网页设计技术，常用于创建具有视觉吸引力和交互性的导航菜单。这一设计模式利用CSS（层叠样式表）的特性来实现，使得用户在鼠标悬停时，导航链接的左右两边会出现不同的背景效果，如同门...
"自动播放的滑动门"是一种常见的网页动态效果，它通常用于展示一系列内容，如广告或新闻，以吸引用户的注意力并提高用户体验。这种效果模仿了实际的滑动门动作，当用户滚动页面或等待一定时间后，内容会像门一样平滑...
JavaScript（JS）与CSS是构建网页动态效果和样式的核心技术，滑动门（Sliding Doors）是一种常见的前端设计技巧，常用于制作按钮、导航菜单等元素。这种技术利用CSS的背景定位和JavaScript的事件处理来实现元素的...
**滑动门技术详解** 滑动门技术是CSS（层叠样式表）中的一种常见技巧，主要用于实现图像切换效果，特别是在按钮或者导航菜单的设计中。它利用了CSS的背景定位和伪类选择器来实现单张图片的不同部分在鼠标悬停时显示...
滑动门技术是一种常见的用户界面设计，尤其在移动设备和网页设计中广泛应用。"符合标准的滑动门"指的是遵循特定规范和最佳实践的滑动门实现，旨在提供良好的用户体验和无障碍访问。在这个压缩包中，包含了一个名为...
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
滑动门效果是一种在网页设计中常见的交互式特效，它主要应用于导航菜单、按钮或图像展示，通过模拟门的开合动作，使用户界面更具动态感和吸引力。这种效果能够提升用户体验，使得用户更容易注意到并操作相关元素。...
在滑动门选项卡特效中，CSS主要负责以下任务： 1. 设置选项卡的样式，如颜色、字体、边框等。 2. 定义选项卡的布局，通常使用浮动或Flexbox、Grid布局使选项卡水平排列。 3. 隐藏非选中内容区域，通常使用`display:...
【标题】：“100个Tab滑动门实例”是一个集合了多种Tab滑动效果的实践教程，旨在帮助开发者和设计师深入理解并掌握这一交互设计技术。Tab滑动门是一种常见的用户界面元素，通常用于在有限的空间内展示多个页面或功能...
例如，对于一个导航菜单，每个链接项都可以是一个滑动门，由两部分组成：上部（门的顶部）和下部（门的底部）。当鼠标滑过时，这两部分会分别显示或隐藏，形成类似门打开或关闭的效果。 ```html ...
在JavaScript和jQuery的世界里，"点击门"和"滑动门"是两种常见的交互效果，它们主要用于提升用户体验，尤其在网站导航和展示中。本文将详细介绍这两种效果以及如何使用提供的js插件实现它们。 首先，"点击门"效果...