您现在的位置：：首页 > CSS专题 > CSS样式 > >> 正文

用CSS滤镜巧制3D按钮式导航条

『更新时间：2008-04-28 04:24:34 』『字体：大中小』『编辑：归来 | 来源：模版CMS 』

平面的导航条看多了，想不想做个3D的，当然制作的方法很多，真是仁者见仁，智者见智。我试着做了个按钮式的，效果还不错，每一个菜单项看起来都是一个个的按钮，制作方法也不复杂，并且大小只有几k，算瘦小的了。你只要有点html和CSS的基础知识就够了。　　下面我们开始制作：
　　第一步：
　　用Dreamweaver建立一个3x1的表格，宽度为70px，不设高度值，边框设为0，间距（cellspacing）为2。　　第二步：
　　在上面已经建立好的表格的单元格中分别插入一个1x1的表格，高度值和宽度值均设为100%，边框和间距都设为0，并在每个表格中填上菜单名称。
代码是：
<table width="70" border="0" cellpadding="0" cellspacing="2">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td >互动学校</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td>市场专家</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td>资讯中心</td>
</tr>
</table> 第三步：
现在我们建立两个CSS样式分别取名为up和down，代码如下：
.up{
border:3 outset royalblue;color:yellow;font:12px;text-align:center;background:blue;cursor:hand
} 说明：边界为3，采用outset即突起样式，颜色为royalblue，字体颜色为黄色，字体大小为12px，居中对齐，背景颜色为blue，鼠标式样为手型。
.down{
border:3 inset royalblue;color:#33ff33;font:12px;text-align:center;background:blue;cursor:hand;position: relative; left: 1px; top: 1px
} 说明：边界样式为inset即内凹，字体颜色为#33ff33，position: relative; left: 1px; top: 1px可以产生1个像素的位移，这样按钮按下去时效果好些。
　　第四步：
对第二步所做的表格添加样式和行为，即在table标签后加上下列代码：
class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" onclick=window.open("http://www.ccidnet.com/school/web","_blank") 说明：在通常以及鼠标弹起和移出时采用up样式，在鼠标按下时采用down样式，链接采用onclick，不要用a，因为后者在访问后会留下难看的虚线框。
　　另外，你还可以再加点修饰，如CSS滤镜等，不过切忌太花哨，否则反而效果不好！　　为了方便你学习，下面提供了全部的代码，你可以把它们复制到写字板，生成一个txt文件，然后把文件扩展名该成htm，就可以用IE直接打开了！ <html>
<head>
<title>3D按钮式导航条</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body{text-align:center;background:#ffffff}
.up{
border:3 outset royalblue;color:yellow;font:12px;text-align:center;background:blue;cursor:hand
}
.down{
border:3 inset royalblue;color:#33ff33;font:12px;text-align:center;background:blue;cursor:hand;position: relative; left: 1px; top: 1px; clip:rect( )
}
</style>
</head>
<body>
<table width="700" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" onclick=window.open("http://www.ccidnet.com/news","_blank") cellpadding="0" cellspacing="0">
<tr>
<td>资讯中心</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>技术天地</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>软件特供</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT财经</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>市场专家</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>互动学校</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>DIY专区</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>媒体全文</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT罗盘</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT人才</td>
</tr>
</table>
</td>
</tr>
</table> 　　<p> </p>
<table width="70" border="0" cellpadding="0" cellspacing="2">
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" onClick=window.open("http://www.ccidnet.com/news","_blank") cellpadding="0" cellspacing="0">
<tr>
<td>资讯中心</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>技术天地</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>软件特供</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT财经</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>市场专家</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>互动学校</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>DIY专区</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>媒体全文</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT罗盘</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT人才</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

上一篇文章：用CSS做的几个漂亮的按钮

下一篇文章：巧用样式表，让文本框与按钮变个样

共有位网友发表了评论

您暂未登陆,请登陆后发表! 或直接填写昵称匿名发表

1.请勿发表广告及不良言论.

2.本文内容及版权归原作者.

昵称：(选填)

匿名?

本栏目最新信息

巧用样式表，让文本框与按钮变个样
用CSS滤镜巧制3D按钮式导航条
用CSS做的几个漂亮的按钮
使用css直接定义input标签
常用CSS按钮样式
用CSS风格的文本和图形构建网页实用
使用纯 CSS 设计3D按钮
推荐几组漂亮的按钮CSS

本栏目热门信息

用CSS做的几个漂亮的按钮
常用CSS按钮样式
巧用样式表，让文本框与按钮变个样
推荐几组漂亮的按钮CSS
用CSS滤镜巧制3D按钮式导航条
使用纯 CSS 设计3D按钮
使用css直接定义input标签
用CSS风格的文本和图形构建网页实用