<%@ page contentType="text/html; charset=GBK"%>
<html >
<head >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS实现导航条功能</title>
<style type="text/css">
<!--
body {
font-family: verdana, sans-serif;
font-size: 12px;
background-color: #FFFFFF;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}
#container
{
width: 830px;
padding: 1px;
border: 1px solid #ccc;
background: #fff;
}
#tabnav
{
height: 10px;
margin: 0;
padding-left: 0px;
background: url(../images/tableft10.gif) repeat-x bottom;
}
#tabnav ul
{
margin:0;
padding:0px 0px 0px 0px;
list-style:none;
}
#tabnav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
font-color:#f00;
padding: 2px 2px 2px 2px;
margin-right: 2px;
border: 1px solid #000000;
text-decoration: none;
border-bottom: 1px solid #000000;
color: #03c;
}
#tabnav a span {
float:left;
display:block;
background: url(../images/tabright10.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabnav a span {float:none;}
/* End IE5-Mac hack */
#tabnav a:hover span {
color:#FFF;
}
#tabnav a:hover {
background-position:0% -42px;
}
#tabnav a:hover span {
background-position:100% -42px;
}
//-->
</style>
<script type="text/javascript">
<!--
function hiddenContent(name){
for(i=1;i<11;i++){
document.getElementById("content1").style.display="block";
var contentString="content"+i;
var nums=10+i;
var contentStr="content"+nums;
var content=document.getElementById(contentString);
var mycontents=document.getElementById(contentStr);
if(name==contentString){
content.style.display="block";
mycontents.style.background="#aabbcc";
}
else{
content.style.display="none";
mycontents.style.background="#8BB531";
}
}
}
//-->
</script>
</head>
<body onload="Reset()">
<table width="100%" align="center">
<div id="container">
<ul id="tabnav">
<li><a id="content11" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content1');" >导航条元素1</a></li>
<li><a id="content12" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content2');" >元素2</a></li>
<li><a id="content13" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content3');" >元素3</a></li>
<li><a id="content14" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content4');" >元素4</a></li>
<li><a id="content15" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content5');" >元素5</a></li>
<li><a id="content16" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content6');" >元素6</a></li>
<li><a id="content17" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content7');" >元素7</a></li>
<li><a id="content18" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content8');" >元素8</a></li>
<li><a id="content19" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content9');" >元素9</a></li>
<li><a id="content20" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content10');" >元素10</a></li>
</ul>
<table width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
</table>
<div id="content1" style="display: block">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容1</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容2</font>
</td>
</tr>
</table>
</div>
<!--4-->
<div id="content2" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号1</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知1</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容11</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容22</font>
</td>
</tr>
</table>
</div>
<div id="content3" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号2</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知2</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容222</font>
</td>
</tr>
</table>
</div>
<!-- 5 -->
<div id="content4" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号3</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知3</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容1111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容2222</font>
</td>
</tr>
</table>
</div>
<!--6 -->
<div id="content5" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号5</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知5</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容11111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容22222</font>
</td>
</tr>
</table>
</div>
<!-- 7 -->
<div id="content6" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号6</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知6</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容222222</font>
</td>
</tr>
</table>
</div>
<!-- 8 -->
<div id="content7" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号7</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知7</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容1111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容2222222</font>
</td>
</tr>
</table>
</div>
<!-- 9 -->
<div id="content8" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号8</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知8</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容11111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容22222222</font>
</td>
</tr>
</table>
</div>
<!-- 9 -->
<div id="content9" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号9</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知9</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容111111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容222222222</font>
</td>
</tr>
</table>
</div>
<!-- 10 -->
<div id="content10" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号10</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知10</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容1111111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容2222222222</font>
</td>
</tr>
</table>
</div>
</div>
<table width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr>
<td >常规显示的内容</td>
<td >常规显示的内容1</td>
</tr>
<tr>
<td >常规显示的内容2</td>
<td >常规显示的内容3</td>
</tr>
<tr>
</table>
</table>
</body>
</html>
- div.rar (1.8 KB)
- 描述: 可以将各个<div>下面的元素换成自己的一个大的ActionForm的一部份！
这样就不必要将一个FORM放到一个页面中那么难看，同时也实现了类似浏览器上[工具]->[Internet选项]->[常规][安全]这样的功能！
- 下载次数: 32
分享到：
相关推荐
"DIV+CSS网页导航条"是一种常见的实现方式，利用HTML的`<div>`元素结合CSS（层叠样式表）来创建功能性和美观的导航菜单。在本教程中，我们将深入探讨如何通过这种方式来设计一个鼠标滑过时背景颜色会改变的导航条。 ...
网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js
在“div+css”导航条中，div通常被用作容器，包含一系列链接或菜单项。这些div元素通过CSS进行定位、布局和样式化。CSS可以控制导航条的宽度、高度、颜色、字体、边框、背景、浮动等属性，从而实现各种设计效果。...
本文将通过分析一个具体的div+css导航条实例代码，深入探讨其实现原理和技术要点。 #### 二、基础知识回顾 ##### 1. HTML (HyperText Markup Language) HTML 是一种标记语言，用于定义网页结构。在构建导航条时，...
11. **导航条制作**：导航条是网站的重要组成部分，需要考虑其响应性，确保在不同屏幕尺寸下都能正常工作。 12. **清除默认样式**：浏览器对HTML元素有默认的样式，如`body`和`div`的外边距和内边距，需要通过CSS...
`div+css`布局能够实现灵活、可维护的网页设计，对于创建横向带箭头的步骤流程展示尤为适用。以下是制作此类布局的具体步骤和相关知识点： 1. **创建HTML结构**：首先，我们需要用`<div>`元素来表示每个步骤，每个...
Bootstrap的网格系统、导航条、下拉菜单、模态框、表单控件等功能，都是基于DIV+CSS的实现，符合题目描述的框架特征。 Bootstrap的核心特性包括： 1. 响应式布局：自动适应不同设备屏幕大小，确保在手机、平板电脑...
通过分析和修改这些代码，可以深入理解如何使用DIV+CSS实现导航条的仿制。此外，可能还会涉及到浮动布局（`float`）、Flexbox或Grid布局等现代布局方法，以及可能的JavaScript交互效果。 总之，学习【DIV+CSS 仿...
【标题】：“DIV+CSS实现的MAC风格的水平导航条” 在网页设计中，导航条是网站布局的重要组成部分，它帮助用户快速访问网站的主要部分。本教程将介绍如何使用DIV和CSS来创建一个模仿MAC操作系统风格的水平导航条。...
在无限级导航条中，CSS用于定义导航条的样式，如颜色、字体、布局、过渡效果等，以及实现无限级下拉的效果。 接下来，我们将深入探讨如何实现这个无限级导航条： **一、HTML结构** HTML结构通常由顶级菜单项和...
前面介绍了Web标准的基本概念，及其实现的基本...采用DIV+CSS可以很快实现页面布局，而且在页面设计和维护时都带来了极大的方便。本章将使用一个简单的实例，介绍DIV+CSS页面方式的简单设计过程，希望借此能抛砖引玉。
在本案例中，我们看到的文件名如w.gif、h.gif、f.gif等可能代表不同用途的动态图片，比如w.gif可能用于导航栏的滑动效果，h.gif可能是滚动条或提示信息的动态效果，而f.gif可能用于按钮的鼠标悬停状态。 此外，文件...
DIV+CSS仿京东商城导航条! 值得下载看看!资源免费,大家分享!!
本教程主要聚焦于如何使用`DIV+CSS`技术来仿制京东商城的导航条，这是网页设计中一个重要的组成部分，它能提供清晰的网站导航，帮助用户快速找到所需信息。 首先，`DIV`是HTML中的一个块级元素，它可以容纳其他HTML...
在创建导航菜单时，通常会用一个`div`来包裹整个导航条，每个菜单项也会被分别放入独立的`div`中。 接着，让我们探讨CSS（层叠样式表）。CSS是控制网页外观的关键，它允许我们分离内容（HTML）和表现（CSS）。在...
### DIV+CSS规范命名大全集合 #### CSS规范命名与实践指南 在网页设计与开发过程中，DIV+CSS的布局方式已经成为了业界的标准做法之一。合理的命名规则不仅能够提高代码的可读性和可维护性，还能有效提升团队协作...
在创建导航条时，CSS可以实现如下的功能： 1. **布局管理**：通过`display`属性设置元素为`inline-block`或`flex`，可以将导航条项排列成一行。 2. **背景与边框**：使用`background-color`、`border`和`box-shadow...
"DIV+CSS导航制作器"这款工具可能提供了以下功能： 1. **预设模板**：内置多种常见导航样式，用户可以直接应用，减少从零开始设计的时间。 2. **可视化编辑**：通过拖拽和点击的方式，用户可以直观地调整导航栏的...