DIV + CSS 样式滑动门经典案例跟大家分享

yzz9i

浏览: 224099 次
性别:
来自: 湖南

最近访客更多访客>>

weswe154

xueshanfeizhu

等到音信断绝

jadechenfei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

CSS XHTML HTML

//css 样式源码

/*全局样式*/
*{
	font-size:12px;
}
body{
	margin:0;
	padding:0;
	background-color:#FFFFFF;
	font-size:12px;
	color:#666666;
	font-family: "宋体",Arial, Helvetica, sans-serif;
}


/*主导航菜单*/
#menu ul{
	padding:0;
	border:0;
	list-style:none;
	line-height:150%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 15px;
}
#menu_out{
	width:966px;
	padding-left:4px;
	margin-left:auto;
	margin-right:auto;
	background:url(Myskin/menu_left.gif) no-repeat left top;
}
#menu_in{
	background:url(Myskin/menu_right.gif) no-repeat right top;
	padding-right:4px;
}
#menu{
	background:url(Myskin/menu_bg.gif) repeat-x;
	height:73px;
}
.menu_line{
	background:url(Myskin/menu_line.gif) no-repeat center top;
	width:8px;
}
.menu_line2{
	background:url(Myskin/menu_line2.gif) no-repeat center top;
	width:15px;
}
#nav{
	padding-left:20px;
}
#nav li{
	float:left;
	height:35px;
}
#nav li a{
	float:left;
	display:block;
	padding-left:6px;
	height:35px;
	background:url(Myskin/menu_on_left.gif) no-repeat left top;
	cursor:pointer;
	text-decoration:none;
}
#nav li a span{
	float:left;
	padding:11px 14px 10px 10px;
	line-height:14px;
	background:url(Myskin/menu_on_right.gif) no-repeat right top;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
}
#nav li .nav_on{   /*鼠标经过时变换背景，方便JS获取样式*/
	background-position:left 100%;
}
#nav li .nav_on span{  /*鼠标经过时变换背景，方便JS获取样式*/
	background-position:right 100%;
	color:#333333;
	text-decoration:none;
	padding:14px 14px 7px 10px;
}
/*子栏目*/
#menu_con{
	text-align:left;
	padding-left:20px;
	clear:both;
}
#menu_con li{
	float:left;
	height:22px;
	margin-top:8px;
}
#menu_con li a{
	display:block;
	float:left;
	background:url(Myskin/menu_on_left2.gif) no-repeat left top;
	cursor:pointer;
	padding-left:3px;
}
#menu_con li a span{
	float:left;
	padding:6px 10px 4px 10px;
	line-height:12px;
	background:url(Myskin/menu_on_right2.gif) no-repeat right top;
}
#menu_con li a:hover{
	text-decoration:none;
	background:url(Myskin/menu_on_left2.gif) no-repeat left bottom;
}
#menu_con li a:hover span{
	background:url(Myskin/menu_on_right2.gif) no-repeat right bottom;
}

// html 页面源码

<!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" lang="zh-CN">
<head>
<title>漂亮滑动门</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#a {
	width: 970px;
	font-size: 14px;
	text-align: center;
	color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>
<body>

<br />
<br />


<script language="javascript">
	function qiehuan(num){
		for(var id = 0;id<=9;id++)
		{
			if(id==num)
			{
				document.getElementById("qh_con"+id).style.display="block";
				document.getElementById("mynav"+id).className="nav_on";
			}
			else
			{
				document.getElementById("qh_con"+id).style.display="none";
				document.getElementById("mynav"+id).className="";
			}
		}
	}
</script> 
<div id=menu_out>
<div id=menu_in>
<div id=menu>
<UL id=nav>
<LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="/"><SPAN>首 页</SPAN></A></LI>

<LI class="menu_line"></LI><li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>AAA</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>AAA</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>BBB</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>CCCC</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>DDDD</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>EEE</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>FFF</span></a></li><li class="menu_line"></li> 
<LI><A class=nav_off id=mynav8 onmouseover=javascript:qiehuan(8) href="#"><SPAN>GGG</SPAN></A></LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav9 onmouseover=javascript:qiehuan(9) href="#" target=_blank><SPAN>HHH</SPAN></A></LI>
<LI class=menu_line></LI>
</UL>
<div id=menu_con><div id=qh_con0 style="DISPLAY: block">
<UL>
  <LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI>
  <LI class=menu_line2></LI><LI><A href="#"><SPAN>test</SPAN></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>test1</SPAN></A></LI></UL></div> 
<div id=qh_con1 style="DISPLAY: none">
<UL><LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>aaaaaaaaaaaaaaaaaaa</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con2 style="DISPLAY: none">
<UL><LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>bbbbbbbbbbbbbbbbbb</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con3 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>ccccccccccccccccccc</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con4 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>ddddddddddddddddddd</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con5 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>eeeeeeeeeeeeeeee</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con6 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>fffffffffffffffffff</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con7 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>gggggggggggggggg</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con8 style="DISPLAY: none">
<UL><LI>##############################</LI></UL></div>
<div id=qh_con9 style="DISPLAY: none">
<UL><LI>###############################</LI></UL></div> </div></div></div></div> 

<br /><br />
</body>
</html>

完整的还需要图片。下面的下载提供完整的案例，下载运行即可

如果觉得好，给个评价。谢谢

经典滑动门div_css.rar (25.9 KB)
下载次数: 31

分享到：

一个简单功能强大的Google Map 搜索源码 ... | org.hibernate.exception.SQLGrammarExcept ...

2011-05-15 17:54
浏览 1163
评论(1)
分类:Web前端
查看更多

1 楼 lisgking 2011-05-20

不错，收下了

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

滑动TAB，滑动门: 总的来说，滑动门设计是网页交互中的一个经典案例，它结合了前端技术的多个方面，包括DOM操作、事件处理、CSS动画等。实际实现时，开发者可以根据项目需求选择不同的技术和方法，以达到最佳的用户体验。遗憾的是，...

HybridEnergyFarms是一个展示海洋电池技术与可再生能源的工具包，集成模型包括评估LCOE和LCOG的功率模型（Simulink）和成本模型（MATLAB）。.rar: 1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

2025年自动化仪表创业项目方案.docx: 2025年自动化仪表创业项目方案.docx

cmd-bat-批处理-脚本-Messagebox_Cancel_TryAgain_Ignore.zip: cmd-bat-批处理-脚本-Messagebox_Cancel_TryAgain_Ignore.zip

cmd-bat-批处理-脚本-GenerateUnionWinMD.zip: cmd-bat-批处理-脚本-GenerateUnionWinMD.zip

cmd-bat-批处理-脚本-shift.zip: cmd-bat-批处理-脚本-shift.zip

基于MATLAB的电力系统潮流计算完整程序: 电力系统潮流计算是电力工程领域的一项核心技术，主要用于分析电力网络在稳态运行条件下的电压、电流、功率分布等运行状态。MATLAB凭借其强大的数值计算功能和便捷的编程环境，成为电力系统潮流计算的重要工具，它提供了丰富的数学函数库，能够高效地处理复杂的电力系统计算任务。本压缩包中的“潮流计算MATLAB程序”是一套完整的电力系统潮流计算解决方案，主要包括以下几个关键部分：数据输入模块：该模块负责读取电力系统的网络数据，包括发电机、线路、变压器等设备的参数。这些数据通常来源于IEEE测试系统或实际电网，并以特定格式存储。网络建模：基于输入数据，程序构建电力系统的数学模型，主要涉及节点功率平衡方程的建立。每个节点的注入功率等于其消耗功率，对于发电机节点还需考虑其有功和无功功率的调节能力。迭代算法：潮流计算的核心是求解非线性方程组，常见的算法有牛顿-拉夫森法和高斯-塞德尔法。MATLAB的优化工具箱可辅助实现这些算法，通过迭代更新节点电压和支路电流，直至满足收敛条件。结果输出：计算完成后，程序能够输出关键性能指标，如节点电压幅值和相角、支路功率流、发电机的有功无功功率等。这些信息对于分析电网运行状态和制定调度策略具有重要意义。可视化功能：程序可能包含图形用户界面（GUI），用于展示计算结果，例如绘制网络拓扑图并标注节点电压和支路功率，便于用户直观理解计算结果。错误处理与调试：良好的程序设计应包含错误检测和处理机制，以应对不合理数据或计算过程中出现的问题，并给出适当的提示。对于电力系统分析课程的学生来说，这个MATLAB程序是一个宝贵的学习资源。它不仅有助于学生掌握电力系统的理论知识，还能让他们了解如何将理论应用于实践，通过MATLAB解决实际问题。尽管该程序是作者一周内完成的，可能存在一些未完善之处，但使用者可以在参考的基础上逐步改进和完善，使其更贴合自身需求。总之

cmd-bat-批处理-脚本-updaterjs.zip: cmd-bat-批处理-脚本-updaterjs.zip

cmd-bat-批处理-脚本-fsharp.zip: cmd-bat-批处理-脚本-fsharp.zip

电力系统双馈感应发电机频率耦合特性建模与稳定性分析：风电系统次同步振荡风险评估及控制策略设计（含详细代码及解释）: 内容概要：该论文深入研究了双馈感应发电机(DFIG)的频率耦合特性及其对系统稳定性的影响。传统阻抗分析方法将DFIG系统解耦为正序和负序子系统进行分析，但当系统中存在频率耦合时，这种线性假设可能导致错误的稳定性结论。论文重点分析了由PLL（锁相环）和不对称转子电流控制引起的频率耦合现象，建立了描述DFIG频率耦合特性的解析模型，并通过仿真验证了模型的有效性。基于该模型，论文进一步分析了系统稳定性及频率耦合的影响因素，表明阻抗分析方法相比传统特征值分析方法更具优势，即使无法建立解析模型，也可通过实验或仿真获得阻抗模型。此外，论文提供了详细的Python代码实现，包括DFIG参数定义、阻抗模型构建、稳定性分析及可视化结果。适合人群：电力系统工程师、风电系统研究人员、高校电气工程专业师生等具有电力系统基础知识和一定编程能力的专业人士。使用场景及目标：①用于理解和研究DFIG系统在风电场中的频率耦合特性；②帮助工程师和研究人员分析DFIG系统的稳定性，识别潜在的次同步振荡风险；③为实际风电系统的稳定性评估和优化提供理论依据和技术支持。其他说明：该论文不仅提供了理论分析，还通过Python代码实现了完整的DFIG频率耦合建模和稳定性分析流程。

2025年职称计算机考试理论模拟试题及答案.docx: 2025年职称计算机考试理论模拟试题及答案.docx

《CMU统计学课程1 - 10章课后习题答案整理》: 《全统计：CMU课程1-10章课后答案详解》是一份极具价值的学习资料，专为卡内基梅隆大学（CMU）“全统计”课程的前10章课后习题提供详尽的解题指导。该压缩包内含10个PDF文件，每个文件对应一章的详细解答，目的是助力学生深刻领会统计学的基础知识、核心理论与实际应用。在第一章中，通常会讲解统计学的基本概念，例如样本与总体、参数估计、概率分布等。答案详解会涵盖如何计算平均值、中位数、众数，以及如何分析这些统计量之间的差异。同时，还会介绍随机变量和概率分布，如二项分布、正态分布等内容。第二章主要涉及抽样分布理论，包括中心极限定理，这是统计推断的关键基础。答案详解会说明如何借助抽样分布开展假设检验，例如t检验和z检验。第三章则深入探讨置信区间的构建以及假设检验的方法。答案详解会详细阐述如何确定置信水平，以及在不同情境下如何选择单尾或双尾检验。第四章通常聚焦于线性回归模型，包括回归方程的建立、残差分析以及多重共线性问题。答案详解会展示如何解读回归系数，预测未知变量，并解释相关性的强度和方向。第五章可能探讨非参数统计方法，这些方法不依赖于特定的分布假设，例如Kolmogorov-Smirnov检验、Mann-Whitney U检验等。答案详解会解释在数据分布未知时如何开展统计分析。第六章将涉及单因素和多因素方差分析（ANOVA），用于比较不同组间的均值差异。答案详解会详细说明如何执行ANOVA，解释F统计量及其意义。第七章可能涵盖实验设计的基本原则，包括随机化、复制和控制。答案详解会说明如何设计有效的实验以减少偏差，以及如何分析实验结果。第八章可能涉及时间序列数据的特性，如趋势、季节性和周期性。答案详解会介绍ARIMA模型、自回归移动平均模型等，并解释如何预测未来趋势。第九章可能深入到多元统计领域，包括多元线性回归、主成分分析、因子分析等。答案详解会介绍如何处理多维

MATLAB实现激光谐振腔自再现模的Fox-Li迭代算法仿真: 提供一份MATLAB代码，采用Fox-Li迭代算法，只需复制粘贴到MATLAB软件中即可直接运行，非常便捷且精准。

cmd-bat-批处理-脚本-register_python.zip: cmd-bat-批处理-脚本-register_python.zip

cmd-bat-批处理-脚本-GetOSVersion.zip: cmd-bat-批处理-脚本-GetOSVersion.zip

基于GAN的视景图像超分辨率重建方法研究.zip: 基于GAN的视景图像超分辨率重建方法研究.zip

MATLAB环境下极化码SC与SCL译码仿真研究: 极化码（Polar Code）是由土耳其科学家Erdal Arıkan在2009年提出的一种新型纠错编码技术。它通过利用信道的极化现象，将虚拟信道分为误码率接近0和接近1/2的两类。在编码设计中，数据被放置在误码率极低的信道上，从而实现高效的数据传输。极化码的主要优势在于其理论编码容量能够达到香农限，并且构造方法较为简单。 MATLAB是一种功能强大的数学计算和编程工具，广泛应用于科学研究和工程领域。在极化码的研究中，MATLAB可用于构建编码和解码算法，模拟数据在不同信道条件下的传输效果，验证理论性能，并优化相关参数。 SC（Successive Cancellation，逐位取消）译码是极化码的基本解码方法。它从最可靠的比特开始，依次解码每个虚拟信道，且每个比特的解码结果会影响后续比特的解码，因为它们之间存在依赖关系。虽然SC译码的实现较为简单，但其计算复杂度较高，随着码长的增加，解码时间会线性增长。 SCL（Successive Cancellation List，逐位取消列表）译码是SC译码的改进版本。它通过引入列表机制，同时处理多个路径，从而增强了错误校正能力，并在一定程度上降低了错误率。与SC译码相比，SCL译码虽然需要消耗更多的计算资源，但能够提供更好的性能。一个完整的MATLAB仿真资源通常包含以下内容：编码模块：用于实现极化码的生成，包括码字构造和极化矩阵操作等。信道模型：用于模拟各种通信信道，例如AWGN（加性高斯白噪声）信道或衰落信道。 SC/SCL译码模块：包含SC译码和SCL译码的算法实现。误码率（BER）计算：通过比较发送和接收的码字，计算误码率，以评估编码性能。性能曲线绘制：绘制误码率与信噪比（SNR）之间的关系曲线，展示不同译码策略的性能差异。使用说明：指导用户如何运行仿真，理解代码结构，以及如何调整参数以进行自定义实验。代码注

postgresql-16.9-1-windows-x64 版本官网下载安装文件: postgresql-16.9-1-windows-x64 版本官网下载安装文件

Matlab代码基于马蹄先验的联合均值-协方差估计的模拟研究.rar: 1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

cmd-bat-批处理-脚本-create-ad.zip: cmd-bat-批处理-脚本-create-ad.zip

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

DIV + CSS 样式 滑动门经典案例 跟大家分享

评论

发表评论

相关推荐

JAVA 执行可执行文件的方法整理

springMVC 框架敏捷搭建

一个文本框输入显示提示的js 页面代码

(JAVA)未登录获取系统数据，例如一些公告之类的展示数据

encodeURIComponent 与 decodeURIComponent 编码互转

c:foreach 中jsp页面 中怎么对时间类型进行格式化问题

留言板回复html模板代码 [用的时候直接copy]

怎么控制 显示 DIV 里面的 字数 只显示部分文字

FCKeditor 在jsp [ssh 框架中]中怎么调用 实现 图片上传/文件浏览【自己看文档摸索出来的】跟大家一块分享

txt文件上传数据 批量解析批量存入数据库方法操作（1）

txt解析经典测试（2）

一个简单功能强大的Google Map 搜索源码 【我在CSDN上也有发布】

Write operations are not allowed in read-only mode (FlushMode.NEVER/MANUAL)..

dwr 动态创建表. 主键查询加载数据显示【javascript 中实现】

框架必知必熟的基础【笔记】

最近访客更多访客>>

DIV + CSS 样式滑动门经典案例跟大家分享

c:foreach 中jsp页面中怎么对时间类型进行格式化问题

怎么控制显示 DIV 里面的字数只显示部分文字

FCKeditor 在jsp [ssh 框架中]中怎么调用实现图片上传/文件浏览【自己看文档摸索出来的】跟大家一块分享

txt文件上传数据批量解析批量存入数据库方法操作（1）

一个简单功能强大的Google Map 搜索源码【我在CSDN上也有发布】