一个简单的成品多页标签,拿来即可使用.
<style type="text/css">
*{padding:0px;margin:0px;}
body{ width:98%;padding:0px;margin:0px;}
UL{list-style-type:none; margin:0px;font-size:12px;height:30px;padding:0px;}
.w936{margin:auto;width:100%;height:30px;}
.tb_{background-repeat: repeat-x;width:auto;height:40px;width:100%;}
.tb_ ul{height:30px;width:100%;}
.tb_ li{float:left;height: 30px;line-height:30px;width: 130px;cursor:pointer; text-align:center;}
.tb_ li a{font-family:"宋体"; font-size:12px; text-align:left;}
.normaltab { background:url(../images/cz_normal.gif); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab { background:url(../images/cz_active.gif); background-repeat: no-repeat; color:#000; font-weight:bold }
.navline{width:100%;height:5px; font-size:0px; background-color:#91d0fb;}
</style>
<script type="text/javascript">
function g(o){return document.getElementById(o);}
function HoverLi(n){
for(var i=1;i<=4;i++){g('tb_'+i).className='normaltab';}
g('tb_'+n).className='hovertab';
if(n==1){
parent.bottomFrame2.location.href="http://www.baidu.com";
}else if(n==2){
parent.bottomFrame2.location.href="http://www.google.com.hk";
}else if(n==3){
parent.bottomFrame2.location.href="http://yuelangyc.iteye.com";
}
}
</script>
</head>
<body>
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onClick="x:HoverLi(1);">百度</li>
<li id="tb_2" class="normaltab" onClick="i:HoverLi(2);">google</li>
<li id="tb_3" class="normaltab" onClick="a:HoverLi(3);">博客</li>
<li id="tb_4" class="normaltab" onClick="a:HoverLi(4);" disabled=true>不可用</li>
</ul>
<div class="navline"></div></div>
</div>
</div>
</body>
</html>
虽然很简单,但是很实用的东东.
可能会需要应用一个Frame框架,灵活运用吧.
分享到：
相关推荐
标题中的“201005112304最新学校就业指导网站（半成品中....）”表明这是一个在2010年5月11日23时4分更新的，关于学校就业指导的在线平台项目，目前尚处于开发的中期阶段，即“半成品”状态。这个标题暗示了项目的...
标题中的“【半成品】仿丸子地球地区查询_微信小程序模板js代码前台前端H5页面源码.rar”表明这是一个正在开发中的项目，模仿的是“丸子地球”的地区查询功能，适用于微信小程序环境。源码包含了JavaScript（js）...
"百度小说_微信小程序模板js代码前台前端H5页面源码.rar" 这个标题表明，这是一个关于微信小程序的开发资源，具体是百度小说的模板。其中，“百度小说”指的是一个可能已经存在的在线阅读平台，而“微信小程序”则是...
JS文件通常包含Page对象，每个Page对象对应小程序中的一个页面，包含了页面生命周期方法和自定义方法。 WXML（Weixin Markup Language）是微信小程序的标记语言，类似于HTML，用于定义页面结构。它允许开发者插入...
标签“综合资源 2014大学生个人网页作业成品免”强调了这是一个综合性的资源集合，专门针对2014年的大学生个人网页作业，并且是免费提供的。这可能对学习网页设计的学生、教师或者对此感兴趣的人有所裨益，他们可以...
这里我们探讨的项目是“王者荣耀攻略页面半成品”，这是一个利用这些技术进行的实战练习。这个项目虽然尚未完成，但它为学习者提供了一个良好的起点，可以在此基础上进一步完善和创新。 首先，HTML（HyperText ...
在“web前端开发html+css+js免费下载（设计作品成品）”这个资源中，包含了一系列使用HTML、CSS和JavaScript技术构建的Web应用实例。这些技术是现代Web开发的基石，它们共同作用于创建交互式的网页和应用程序。下面...
标题中的“价值100元的4页 dw做的成品演说家活动网页”指的是一个使用Dreamweaver（DW）设计的包含四页的网站，该网站可能是为一个名为“演说家活动”的项目创建的。这个网站可能包含了与演讲、比赛、论坛或任何与...
从标签"软件/工具"和"源码"我们可以推断，这是一个可以下载并进行二次开发的项目。 在解析这个工具之前，我们需要了解一些基本概念。Web开发通常涉及前端和后端技术。前端负责用户界面和交互，而后端处理数据逻辑和...
虽然实例代码中没有显示JavaScript，但在实际网页设计中，可以添加`<script>`标签引入JS文件，或在`<head>`或`<body>`标签内直接编写JS代码，实现如按钮点击事件、表单提交等交互功能。 【网页布局与设计】 在示例...
"简单网页制作成品"这个项目正好为初学者提供了一个学习和模仿的对象，让我们来深入探讨一下这个主题。 首先，我们要明确网页制作的核心技术主要包括HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript。HTML...
【标题】"免费cms成品网站源码"指出的是一个基于J2EE框架的开源内容管理系统（CMS）源代码，这通常是指提供给开发者用于构建和管理网站内容的平台。CMS的核心价值在于它允许非技术人员通过图形用户界面进行内容创建...
这款名为“怪盗基德动漫主题网页”的成品代码，不仅为学生们提供了一个实用的学习资源，也展示了如何通过HTML、CSS和JavaScript等技术来构建一个功能完备且美观的网页。通过学习这些代码和技术要点，学生们可以更好...
在这个“JS绘制简单流程图JS+DIV超级半成品”项目中，开发者可能已经开始构建一个基础框架，但尚未完成全部功能。以下是对这个半成品流程图实现的一些关键知识点的详细说明： 1. **HTML结构**：在流程图中，`<div>`...
5. **编辑工具**: 支持多种HTML编辑软件，如Dreamweaver、HBuilder、Vscode等，这为用户提供了一个灵活的选择空间，可以根据个人习惯选择最适合自己的开发工具。 #### 四、实际应用建议 1. **个性化定制**: 在使用...
《植物大战僵尸》是一款深受玩家喜爱的塔防类游戏，由PopCap...同时，这也为我们提供了对游戏内部运作机制的深入了解，对于想要进行游戏开发或者想要提升JavaScript和Canvas技能的开发者来说，这是一个宝贵的实践机会。
3. **jQuery**：这是一个JavaScript库，简化了DOM操作、事件处理和动画制作，使得JavaScript编程更加便捷。 4. **Bootstrap**：这是一个流行的前端开发框架，提供了一套响应式布局和易于使用的组件，有助于快速构建...
【标题】"9页面DIV+CSS布局DW产品展示网页设计制作大作业成品"是一个关于网页设计的项目，其中包含了9个不同的页面，每个页面都采用了DIV+CSS布局技术进行构建。DW（Dreamweaver）是Adobe公司的一款网页设计工具，...
用vue2实现的一个登录页demo， 背景图可直接替换，成品案例直接可运行 设计技术： vue2、element-ui、vue-router、滑块校验 安装包 npm install 开发运行 npm run serve 编译运行 npm run build 代码解读： ...
在本项目中，"HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面" 提供了一个实践性的学习机会，让学生深入理解并应用前端开发技术，特别是针对网页设计与制作。这个项目以“杭帮美食”为主题，...