高手们！！！怎么制作网站的下拉式导航条？？？

网站的下拉式导航条好看，怎么制作呢？？能不能知道小弟以下，谢谢啦！！！嘿嘿尽量详细点吧！！... 网站的下拉式导航条好看，怎么制作呢？？
能不能知道小弟以下，谢谢啦！！！嘿嘿尽量详细点吧！！展开

 我来答

1个回答

#热议# 不吃早饭真的会得胆结石吗？

msia121
2007-06-28 · TA获得超过1006个赞

知道小有建树答主

回答量：487

采纳率：0%

帮助的人：485万

我也去答题访问个人页

关注

展开全部

用CSS巧制微软下拉式导航条
（作者：touch8 2002年02月20日 09:17）

去过微软中国站点（http://www.microsoft.com/china)的朋友都会对它的下拉菜单式导航条感兴趣，微软的制作方法比较复杂，不是一般菜鸟能学会的，于是就有很多人想出各种办法模拟制作，可是不是要用到很多层就是要用到脚本，感觉还是挺麻烦。我的做法可就简单多了，而且效果不错，看看本文抬头的导航条，再和微软站点的比较一下，怎么样？是不是几乎一模一样？你只要会点html和CSS的一些基本知识就能做到，具体的方法如下：

第一步：

为链接建立样式，代码如下：

a:visited{color:white}
a:link{color:white}
a:active{color:white}
a:hover{color:red }

说明：除了hover是红色外，其他都是白色，和微软一致。

第二步：

建立一个表格，以便放菜单内容，如建立一个3行1列的表格如下：

说明：表格参数均为0，即border="0" cellpadding="0" cellspacing="0" 这里为了解释方便所以留了边框。

第三步：

将菜单内容添入表格并加上链接，如下：

主页
微软中国
美国总部

第四步：

下面我们要建立样式了，首先建立一个名为close的样式，代码如下：

.close{visibility:hidden;background:#6699ff;height:23px;
color:white;font:9pt;text-align:center}

说明：使用hidden属性，说白了就是什么也看不到了！

再来建立一个样式名为open，代码如下：

.open{visibility:visible;background:#6699ff;height:23px;
color:white;font:9pt;text-align:center}

说明：背景采用天蓝色，字体为9pt，和微软保持一致，使用visible属性，即可见。

第五步：

既然样式已经建好了，我们就来调用，代码如下：

<table width="100" border="0" cellpadding="0" cellspacing="0"class=close>
<tr>
<td class=open><a href="#">主页</a></td>
</tr>
<tr>
<td><a href="#">微软中国</a></td>
</tr>
<tr>
<td><a href="#">美国总部</a></td>
</tr>
</table>

说明：整个表格采用close样式，而“主页”单元格采用open样式，充分利用CSS优先权的规则，所产生的效果是只能看到“主页”这个单元格。

第六步：

这是关键的一步，用行为调用样式，代码如下：

<table width="100" class=close onMouseOut="this.style.visibility='hidden'"
onMouseOver="this.style.visibility='visible '"
cellpadding="0" cellspacing="0" border="0" >
<tr>
<td class=open> <a href="#">主页</a></td>
</tr>
<tr>
<td><a href="#">微软中国</a></td>
</tr>
<tr>
<td><a href="#">美国总部</a></td>
</tr>
</table>

说明：当mouseover即鼠标移上时，表格变为可见，而当onmouseout即鼠标移开时，表格恢复不可见样式。

最后一步：

一个下拉菜单已经做好了，现在建立一个1x8的表格，再把下拉菜单插到各个单元格里面，最后把这个大的表格放到一个层里（这样容易定位），大功告成！

为了方便你学习，下面是本菜单式导航条的全部代码，你可以把代码拷贝到记事本里，保存为一个txt文件，然后将这个文件的扩展名由.txt改为.htm，就可以直接用IE打开了。

<html>
<head>
<title>用CSS做下拉式菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body{margin-top:50}
.td{font:9pt;color:green}
a:visited{color:white}
a:link{color:white}
a:active{color:white}
a:hover{color:red }
..close{visibility:hidden;background:#6699ff;
height:23px;color:white;font:9pt;text-align:center}
..open{visibility:visible;background:#6699ff;
height:23px;color:white;font:9pt;text-align:center}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" >
<div id="Layer1" style="position:absolute;
left:4px; top:4px; width:1000px; height:108px;
z-index:1">
<table width="100%" border="0" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
a.style.height='23'" onMouseOver="this.style.
visibility='visible';
a.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=a class=open > <a href="#">主页</a>
  |</td>
</tr>
<tr >
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">微软中国</a></td>
</tr>
<tr>
<td><a href="#">美国总部</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
b.style.height='23'" onMouseOver="this.style.
visibility='visible';
b.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=b class="open"><a href="#">活动与培训</a>  |   </td>
</tr>
<tr >
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">在线讲座</a></td>
</tr>
<tr>
<td ><a href="#">任证与培训 </a></td>
</tr>
<tr>
<td ><a href="#">微软出版社</a></td>
</tr>
<tr>
<td > </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
c.style.height='23'" onMouseOver="this.style.
visibility='visible';
c.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=c class=open><a href="#">定阅电子期刊
  </a>|</td>
</tr>
<tr >
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">订阅</a></td>
</tr>
<tr>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
d.style.height='23'" onMouseOver="this.style.
visibility='visible';
d.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=d class=open><a href="#">微软中国</a>
  |</td>
</tr>
<tr>
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">新闻</a></td>
</tr>
<tr>
<td><a href="#">动态传真</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%"class=open cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td ><a href="#">微软总部
</a> |</td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
e.style.height='23'" onMouseOver="this.style.
visibility='visible';
e.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=e class=open><a href="#">购买与许可
  </a>|</td>
</tr>
<tr>
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">版权与许可</a></td>
</tr>
<tr>
<td><a href="#">购买指南</a></td>
</tr>
<tr>
<td><a href="#">我用正版</a></td>
</tr>
<tr>
<td><a href="#">商标指南</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
f.style.height='23'" onMouseOver="this.style.
visibility='visible';
f.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=f class=open><a href="#">站点地图   </a>|</td>
</tr>
<tr>
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">站点内幕</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=open cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td ><a href="#">招贤纳士 </a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div align="left"> </div>
</body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

高手们！！！怎么制作网站 的下拉式导航条？？？

其他类似问题

为你推荐：

高手们！！！怎么制作网站的下拉式导航条？？？