DIV+CSS实现导航条功能

最新推荐文章于 2024-09-13 15:41:23 发布
最新推荐文章于 2024-09-13 15:41:23 发布
阅读量288 收藏 1
点赞数
分类专栏： DIV+CSS篇章 文章标签： CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanglihuhappy/article/details/83284201
版权
<%@ 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 οnlοad="Reset()">
<table width="100%" align="center">
<div id="container">
<ul id="tabnav">
<li><a id="content11" οnfοcus="blur()" href="#" οnclick="javascript:hiddenContent('content1');" >导航条元素1</a></li>
<li><a id="content12" οnfοcus="blur()" href="#" οnclick="javascript:hiddenContent('content2');" >元素2</a></li>
<li><a id="content13" οnfοcus="blur()" href="#" οnclick="javascript:hiddenContent('content3');" >元素3</a></li>
<li><a id="content14" οnfοcus="blur()" href="#" οnclick="javascript:hiddenContent('content4');" >元素4</a></li>
<li><a id="content15" οnfοcus="blur()" href="#" οnclick="javascript:hiddenContent('content5');" >元素5</a></li>
<li><a id="content16" οnfοcus="blur()" href="#" οnclick="javascript:hiddenContent('content6');" >元素6</a></li>
<li><a id="content17" οnfοcus="blur()" href="#" οnclick="javascript:hiddenContent('content7');" >元素7</a></li>
<li><a id="content18" οnfοcus="blur()" href="#" οnclick="javascript:hiddenContent('content8');" >元素8</a></li>
<li><a id="content19" οnfοcus="blur()" href="#" οnclick="javascript:hiddenContent('content9');" >元素9</a></li>
<li><a id="content20" οnfοcus="blur()" href="#" οnclick="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>
wanglihuhappy
关注
专栏目录
CSS+DIV制作导航条
05-02
<body> <div class="cd"> <ul><!--导航条--> <li><a href="#">A</a></li> <!---------------------------------------------> <li><a href="#">B</a><!--二级--> <ul> <li><a href="#">B1</a><!--3级--> <ul> <li><a href="#">B12</a></li> </ul> </li> <li><a href="#">B2</a> <ul> <li><a href="#">b22</a></li> </ul> </li> </ul> </li><!--二级结束--> <!---------------------------------------------> <li><a href="#">C</a></li> </ul><!--导航条结束--> </div> </body> </html>
css实现导航条
easy_is_happy的博客
12-25 623
导航条作为一个网站必不可少的组件，普遍实现导航条的方式是使用ul和li元素 *{margin:0; padding:0; font-size:14px;} ul{ list-style:none; width:100px} a{color:#333;text-decoration:none} .nav li a{ display:block; text-indent:20p
30种菜单导航（DIV+CSS）设计实现
最新发布
weixin_29301059的博客
09-13 1492
本文还有配套的精品资源，点击获取 简介：网页设计中，菜单导航是关键的页面布局组件，本资源提供了30种使用 <div> 元素和CSS实现的不同风格和功能的菜单导航实例。从基础的水平和垂直菜单到复杂的动态效果菜单如弹出式和手风琴菜单，每种类型都详细说明了实现方法。这些导航菜单在设计上既注重视觉效果，又增强交互性，为不同类型的网站提供了多样的导航解决方案...
DIV+CSS导航栏
代码存档
06-16 3057
HTML文件 &lt;div id="header"&gt; &lt;h1&gt;Your Website&lt;/h1&gt; &lt;h2&gt;catchy slogan...&lt;/h2&gt; &lt;/div&gt; &lt;div id="navigation"&gt; &lt;ul&gt; &lt;li&a
div+css实现的导航栏
二进制天堂
01-08 1010
css文件：.channel { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }.channel ul { list-style:none; margin:0px;}.channel li { float:left; padding-left:8px; }.cha
DIV+CSS实现的MAC风格的水平导航条
05-18
【标题】：“DIV+CSS实现的MAC风格的水平导航条” 在网页设计中，导航条是网站布局的重要组成部分，它帮助用户快速访问网站的主要部分。本教程将介绍如何使用DIV和CSS来创建一个模仿MAC操作系统风格的水平导航条。...
4款DIV+CSS首页导航条菜单（绝对漂亮）
05-12
本文将详细介绍"4款DIV+CSS首页导航条菜单"的设计特点和应用价值，以及如何利用这些资源来提升网站的用户体验。 首先，让我们了解什么是DIV+CSS。在HTML中，`<div>`元素是一个通用容器，用于组织页面上的其他元素。...
DIV+CSS基础教程：导航条的制作详解
thewebcode
03-12 749
课程开始： 前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY！...
纯css实现动态效果导航条
04-28
使用纯css实现导航条的动态效果，代码简洁实用
三种简洁的经典高效的DIV+CSS制作的Tab导航简析
03-22
NULL 博文链接：https://lzj0470.iteye.com/blog/999139
左侧导航菜单div+css样式
11-03
左侧导航菜单div+css样式，样式非常好看，适合faq页面使用，分层级的可折叠菜单
div+css制作的几款好看的导航栏
11-07
网页特效，几款好看的导航栏，鼠标点击变斜体导航栏目网页特效，利用了div+css制作而成
CSS实现导航条Tab切换的三种方法介绍
09-27
本篇文章主要介绍了CSS实现导航条Tab切换的三种方法，包括布局、hover、label，具有一定的参考价值，有兴趣的可以了解一下。
html div上的导航条,DIV+CSS导航条
weixin_35901475的博客
06-07 311
CSS导航条*{ margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8;}body{ background: #333}#info{padding:50px;}#infobox{padding:0px 20px;background-color: #640000;}#center{background: #ABB...
div+css鼠标动态下拉导航条代码示例
"一个使用div和CSS实现的导航条脚本代码实例，适用于现代教务管理系统，但在XP系统上可能无法实现鼠标动态下拉效果。" 在网页设计中，Div（division）和CSS（Cascading Style Sheets）是构建用户界面的两种关键技术...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值