<!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;
float: right;
width: 680px;
}
.w936{
width:288px;
border:1px solid skyblue;
margin-top: 2px;
margin-right: 0;
margin-bottom: 2px;
margin-left: 0;
float: left;
}
/* TAB 切换效果 */
.tb_{background-color: #E6F2FF; background-image: url('http://www.dc18.com/images/barbg_tab.gif'); background-repeat: repeat-x;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;padding-top: 6px;width: 288px;cursor:pointer;}
.normaltab { background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab { background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
#Layer1 {
position:absolute;
left:232px;
top:82px;
width:145px;
height:85px;
z-index:1;
}
#aaaaaa {
height: 100px;
width: 100px;
position: absolute;
left: 393px;
top: 16px;
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
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';
}
//-->
</script>
</head>
<body>
<div id="aaaaaa"><img src="skin-bg.gif" width="213" height="105" /></div>
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onclick ="xgz:HoverLi(1);">网上房展会</li>
<li id="tb_2" class="normaltab" onclick="xgz:HoverLi(2);">本月开盘</li>
<li id="tb_3" class="normaltab" onclick="xgz:HoverLi(3);">知名开发商</li>
<li id="tb_4" class="normaltab" onclick="xgz:HoverLi(4);">栏目导航</li>
<li id="tb_5" class="normaltab" onclick="xgz:HoverLi(5);">哈哈哈哈</li>
<li id="tb_6" class="normaltab" onclick="xgz:HoverLi(6);">Q小鸽子</li>
</ul>
</div>
</div> <div class="ctt">
<div class="dis" id="tbc_01">内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</div>
<div class="undis" id="tbc_02">内容2</div>
<div class="undis" id="tbc_03">内容3</div>
<div class="undis" id="tbc_04">内容4</div>
<div class="undis" id="tbc_05">内容5</div>
<div class="undis" id="tbc_06">内容6 [Q小鸽子]</div>
</div>
</body>
</html>
原文链接:http://hi.baidu.com/fuyangxw/blog/item/ca26523e293c802b70cf6c18.html
分享到:
相关推荐
"css+js滑动门小实用小实例"是一个集合,包含三个利用CSS和JavaScript技术构建的实用小示例,旨在展示如何创建美观且功能性的滑动门效果。滑动门效果通常用于导航菜单或者图像展示,它允许用户通过鼠标悬停或点击来...
html+css+js学习代码html+css+js学习代码html+css+js学习代码 html+css+js学习代码html+css+js学习代码html+css+js学习代码 html+css+js学习代码html+css+js学习代码html+css+js学习代码 html+css+js学习代码...
html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的...
HTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码....
JavaScript(JS)与CSS是构建网页动态效果和样式的核心技术,滑动门(Sliding Doors)是一种常见的前端设计技巧,常用于制作按钮、导航菜单等元素。这种技术利用CSS的背景定位和JavaScript的事件处理来实现元素的...
HTML+CSS+JS精品网页模板,设置导航条、轮翻效果,鼠标滑动效果,自动弹窗,点击事件、链接等功能;适用于大学生期末大作业或公司网页制作。响应式网页,可以根据不同的设备屏幕大小自动调整页面布局; 支持如...
在构建一个个人博客时,HTML、CSS和JavaScript是三个核心组成部分。HTML负责网站的基本结构,CSS则用于美化页面样式,而JavaScript则为交互性提供动力。以下是对这些知识点的详细说明: **HTML(HyperText Markup ...
HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的...
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材,旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现,提供了丰富的实践材料,使学习者能够通过实际...
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript...
在这个"html+css+js网页设计源代码.zip"中,`catcatcat-master`可能是一个项目目录,暗示着这个网页设计是以猫为主题。HTML文件通常会包含各种元素,如`<head>`(头部信息)、`<body>`(主体内容)、`<header>`...
简单登录注册界面模板(HTML+CSS+JavaScript)【登录注册界面代码】 简单登录注册界面模板(HTML+CSS+JavaScript)。简单登录注册界面模板(HTML+CSS+JavaScript)。简单登录注册界面模板(HTML+CSS+JavaScript)。 ...
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
"CSS+JS滑动门式的图片轮番切换"是这种技术的一个实例,它结合了CSS(层叠样式表)和JavaScript两种前端技术来实现动态的图片展示。下面将详细讲解这一技术及其相关知识点。 首先,CSS在其中主要负责样式设计和布局...
web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页...
基于html+css+js实现的模仿华为商城静态网页源码+项目说明(附静态网页效果链接).zip 课程作业 静态网页设计实现 模仿华为商城静态网页源码 附静态网页效果链接 项目说明 html+css+js实现 基于html+css+js实现的...
个人网页的全部代码和图片HTML+CSS+JS的web个人网页.zip直接运行index.html文件即可 个人网页的全部代码和图片HTML+CSS+JS的web个人网页.zip直接运行index.html文件即可 个人网页的全部代码和图片HTML+CSS+JS的web...
《网页设计与制作项目教程(HTML+CSS+JavaScript)》是一部深入浅出的教材,旨在教授读者如何构建和设计互动式的网页。这份源代码压缩包包含的文件是教材中的实例和练习,帮助学习者通过实践来掌握这三种核心技术。...
《Html+Css+Javascript从入门到精通》是一本全面介绍了Web前端开发技术的教程。本书旨在帮助读者掌握Web开发的基础知识,并通过实践逐步深入理解HTML、CSS以及JavaScript这三种核心技术。以下是根据该书内容整理出的...
【标题】"地方旅游主题网页html+css+js 共12页" 是一个综合性的网页设计项目,它涵盖了HTML、CSS和JavaScript这三种核心技术,用于构建一套完整的旅游主题网站。这个项目包含12个不同的页面,每个页面可能对应着网站...